jqueryUI: инициализация содержимого диалогового окна при первом нажатии

Question

Это должно быть легко для опытных пользователей jqueryUI. То, что я хотел бы достичь, это:

• иметь одну кнопку, когда страница только что была оказана (и больше ничего)
• при нажатии этой кнопки открывается диалоговое окно и диалоговое окно контента генерируется, используя AJAX

В настоящее время у меня есть большинство из них, но с использованием двух различных кнопок пользовательского интерфейса jquery. Я использую icanhaz, но это не должно иметь никакого значения, так как я получил эту часть, работающую нормально. Это HTML часть:

<script id="user" type="text/html"> 
    <p> 
     There are following users: 
     <ul> 
     {{#users}} 
      <input type="checkbox" name="user" value="{{ username }}" />{{ fullname }} 
      {{^last}}<br />{{/last}} 
     {{/users}} 
     </ul> 
    </p> 
</script> 

<a id="user-btn" class="btn">show users</a> 

<a id="dialog-btn" class="btn">show dialog</a> 

<div id="dialog-message" title="Select users"> 
</div> 

и это является частью JavaScript:

$(document).ready(function() { 

    $("#user-btn").click(function() { 
     $.ajax({ 
      type: "GET", 
      dataType: "json", 
      url: "../php/client/json.php", 
      data: { 
       type: "users" 
      } 
     }).done(function(response) { 
      var element = $('#dialog-message'); 
      element.append(ich.user(response)); 
     }); 
    }); 

    $("#dialog-btn").click(function() { 
     $("#dialog-message").dialog().dialog("open"); 
    }); 
}); 

При нажатии на первую кнопку «показать пользователям», он создает контент для диалога. Когда я нажимаю «показать диалог», диалог создается и открывается. Я хотел бы очистить его - для вызова ajax (и рендеринга icanhaz) при щелчке, используя отображаемый html для создания диалога, откройте диалоговое окно и дисплей (всего за один клик).

Answer 1

$(document).ready(function() { 

    $("#user-btn").click(function() { 
     if ($('#dialog-message').is('.ui-dialog-content')) { 
      // data already loaded and dialog already initialized 
      $('#dialog-message').dialog('open'); 
     } else { 
      // request data and initialize dialog 
      $.ajax({ 
       type: "GET", 
       dataType: "json", 
       url: "../php/client/json.php", 
       data: { 
        type: "users" 
       } 
      }).done(function(response) { 
       $('#dialog-message') 
        .append(ich.user(response)) // load data into element 
        .dialog(); // show as dialog (autoOpen is true by default) 
      }); 
     } 
    }); 
}); 

$('#dialog-message').is('.ui-dialog-content') только один способ проверить, если диалог уже инициализирована на элементе; может быть лучший способ.