javascript - how to open jQuery UI dialog with AJAX request? - Stack Overflow

admin管理员组

文章数量:1203384

On my web page I have a jQuery UI Dialog. When I click the button (create new user) it opens a new window. My question is how can I open that window with an AJAX request?

It would be nice to open the dialog-form from another page. For example: dialog.html

<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>

  <form>
  <fieldset>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
    <label for="email">Email</label>
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
  </fieldset>
  </form>
</div>

You can see full code in this fiddle:

On my web page I have a jQuery UI Dialog. When I click the button (create new user) it opens a new window. My question is how can I open that window with an AJAX request?

It would be nice to open the dialog-form from another page. For example: dialog.html

<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>

  <form>
  <fieldset>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
    <label for="email">Email</label>
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
  </fieldset>
  </form>
</div>

You can see full code in this fiddle:

• javascript
• jquery
• ajax
• jquery-ui

Share Improve this question Follow edited Feb 26, 2014 at 19:26 CommandZ 3,61111 gold badge2424 silver badges2828 bronze badges asked Oct 9, 2013 at 9:06 user2767715user2767715

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 11

You can define your dialog like this :

function showUrlInDialog(url){
  $.ajax({
    url: 'dialog.html',
    success: function(data) {
      $("#dialog-form").load(data).dialog({modal:true}).dialog('open');
    }
  });
}    

And define the current markup that is inside dialog-form div, into a new page called dialog.html. Call the above written function on the button click event. I hope this is what you needed.

I think this is a simpler version of the answer:

$("#the-button").click(function(){
  $("#dialog").dialog({modal: true}).dialog('open')).load("dialog.html")
})

For me .load is not working. So I used,

function showUrlInDialog(url){
  $.ajax({
    url: 'dialog.html',
    success: function(data) {
      $("#dialog-form").html(data).dialog({modal:true}).dialog('open');
    }
  });
} 

本文标签： javascripthow to open jQuery UI dialog with AJAX requestStack Overflow