how to open jQuery UI dialog with AJAX request?

Question

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:

Abhishek Punj · Accepted Answer · 2013-10-09 09:57:33Z

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.

edited Oct 9, 2013 at 9:57

answered Oct 9, 2013 at 9:16

Abhishek Punj

2892 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user2767715 Over a year ago

It worked, thank you. One question: Ajax loads that window while clicking? Or loads before? If I will write sql query into dialog, will my php page read the sql query when I enter the site or will read after when I click button?

Abhishek Punj Over a year ago

It is supposed to load before as far as I think. The page will be requested as soon as the code I mentioned above runs. You can cross check that by taking a look at the fiddler trace. Hence the SQL query is also supposed to run when the page loads and not when the button is clicked.

user2767715 Over a year ago

Okay, man, I should write a couple of sql query into dialog. And I want php sends sql reguests when I start clicking the button. After clicking is writed: Please wait, loading ... after a few seconds is opened dialog. You can see it on Facebook, when user wants to see like list..after a few seconds is opened dialog and show all likes.

Abhishek Punj Over a year ago

This is what will help you.. 8raystech.com/2011/06/28/…

KarSho Over a year ago

For me $("#dialog-form").html(data).dialog({modal: true}).dialog('open');

|

Collin Anderson · Accepted Answer · 2014-09-25 20:27:31Z

7

I think this is a simpler version of the answer:

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

answered Sep 25, 2014 at 20:27

Collin Anderson

15.6k6 gold badges70 silver badges60 bronze badges

Comments

KarSho · Accepted Answer · 2015-12-26 07:58:43Z

0

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');
    }
  });
}

answered Dec 26, 2015 at 7:58

KarSho

5,74613 gold badges47 silver badges79 bronze badges

Collectives™ on Stack Overflow

how to open jQuery UI dialog with AJAX request?

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related