Question

I have this function to open a jQuery UI dialog:

function pop_up(div, titulo) {
  $("#" + div).dialog({
    autoOpen: false,
    show: "explode",
    hide: "explode",
    modal: true,
    minHeight: 550,
    height: "auto",
    width: "auto",
    title: titulo,
  });

  $("#" + div).dialog("open");

  return false;
}

which I call in the same hidden div:

pop_up('pop', 'my title');

Which works fine (I can open and close as many times as I want) but if I load some content dynamically in the #div I get this firebug error (in the next attempt to open a dialog)

$("#" + div).dialog is not a function
[Parar en este error]   

title: titulo

Basically

pop_up('pop', 'my title');   /* OK */

$('#pop').load('somefile.html',function(){
    pop_up('pop', 'some title');   /* CRASH */
});

will fire the error; any idea what am I doing wrong?

Answer 1

In your example, you are calling pop_up() with an id of div. I’m not sure that is a good id value, but just the same in the next line of code you try to load ‘somefile.html’ into #pop which may have not been created yet. Then you try to create a new pop_up which is referencing the same object that is being loaded (#pop).

Would this work?

pop_up('div1', 'my title');
$('#div1').load('somefile.html',function(){
    pop_up('pop', 'some title');
});

Here we use a dialog with an id of div1. Then we load ‘somefile.html’ into that dialog. Once that load is completed, we create a new pop_up called pop.

Hope this helps!