grunk grunk - 5 months ago 28
jQuery Question

How to execute function after opening a jQueryUI Dialog?

On my web page i have some links like :

<div id="toolbarButtons">
<a href="actualites/addLink" id="liens" rel="lien" title="Insérer un lien" class="toolbarButton"><span><img src="pub/struct/picto/icon_toolbar-link.gif" alt="Liens" />Lien</span></a>
<a href="actualites/addImage" rel="image" title="Insérer une image" id="img" class="toolbarButton"><span><img src="pub/struct/picto/icon_toolbar-img.gif" alt="Liens" /> Image(s)</span></a>
</div>
<div id="dialogbox"></div>


First of all i init my dialogbox by calling :

initDialog : function() {
$('#dialogbox').dialog({
bgiframe:true,
autoOpen:false,
width:500,
modal:true
});
}


then i attach the the dialog on click event :

$('.toolbarButton').click(function(e){
e.preventDefault();
actu.dialogManager($(this));
});

dialogManager : function(elem) {

elem.blur();
var title = elem.attr('title');
var href = elem.attr('href');
var rel = elem.attr('rel');

$('#dialogbox').dialog('option','title',title);

if(rel == 'lien')
{
$('#dialogbox').dialog('option','buttons',{
'Add' : function(){
//TODO
},
'Cancel' : function(){
$('#linkText').val('');
$('#linkUrl').val('');
$(this).dialog('close');
}
});

$('#dialogbox').load(href).dialog('open');

}
}


As you can see , the content of the dialog box is fetched with ajax. The dialog contain some input.
I have a last function which is supposed to edit the content of the input but i don't know how and where to call it. It need to be called after the opening of the dialog to be efficient. How can i do that ?

doing it juste after

$('#dialogbox').load(href).dialog('open');


won't work because of the asynchronous loading (called before the dialog is fully loaded).

Thanks for your help.

Answer Source

You could do something when the dialog is opened.

initDialog : function() {
  $('#dialogbox').dialog({
      bgiframe:true,
      autoOpen:false,
      open: function() {
          // do something on load
       },
      width:500,
      modal:true
  });
}