Question

39

how to open jQuery UI dialog with AJAX request?

rated 0 times [ 44] [ 5] / answers: 1 / hits: 32128 / 11 Years ago, wed, october 9, 2013, 12:00:00

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:

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

krystadesiraeo

Add To Favorites

Follow

Total Points: 493

Total Questions: 93

Total Answers: 100

Location: San Marino

Member since Thu, Jun 30, 2022

2 Years ago

answered 11 Years ago deanna · Accepted Answer

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.