Getting Dialog Data on Ajax Load

Question

Hey All

Not quite sure how to do the following and hope you can advise.

I have a dialog which opens up a page through ajax. I would like to somehow once this dialog has finished loading trigger an event which then will perform some other action.

Can anyone advise on how to do such a task.

Hope you can help.

Lee

Answer 1

Check out the jQuery API documentation for ajax. The "trigger" you need is called a callback function and either the "success", "error" or "complete" (used on either success or error) function is called when done:

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  },
  error: function(XMLHttpRequest, textStatus){
    alert(textStatus);
  }
});

I wasn't sure what dialog script you are using, are you using jQuery UI Dialog? And if the example above doesn't help, please provide the code you are trying to make work.

Answer 2

$( ".selector" ).dialog({
   open: function(event, ui)
   {
       //Dialog Open
   }
});

And

$( ".selector" ).bind( "dialogopen", function(event, ui)
{
  // Dialog Open
});

http://jqueryui.com/demos/dialog/#event-open

---

Update:

$.ajax(
{
    url: 'ajax/test.html',
    success: function(data)
    {
        var Contents = data;
        $dialog = $('<div></div>').attr('title',Contents.title).append($('<p></p>').val($Contents.contents));
        $($dialog).dialog({
           open: function(event, ui)
           {
                //Dialog Open
           }
        });
    }
});

as you defined Contents as a global scope its accessible in the open function of dialog.