$(this).dialog is not a function

Question

...or Why $(this).dialog() fails in Firefox when using dynamic HTML?

I have a a click event that opens a jQuery modal dialog box on a web page, and it is working fine in Chrome and IE, but not in Firefox.

Here is the pertinent code:

var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
var dialogDiv = $(document.createElement('div')).attr("id", dialogId);

dialogDiv.load(this.href, function () {
    var dialog = $(this).dialog({ autoOpen: false });
    ...
});

In Firefox 11, $(this).dialog({ autoOpen: false }) fails with the following error message:

$(this).dialog is not a function

But in IE 9 an Chrome 17 everything is working fine. Any clue why that is?

UPDATE:

Here is my document.ready function where the code above was. I removed it to simplify things. ALERT A is occuring before ALERT B. ALERT A says [object Object]. ALERT B occurs when I click on a link and it says 'undefined'.

$(function () {

    alert($.ui);    // ALERT A

    // Wire up the click event of any dialog links
    $('.dialogLink').live('click', function () {
        alert($.ui);    // ALERT B
        return false;
    });
});

UPDATE 2:

Now that I pin pointed where the problem was coming from I rephrased my question and posted the minimal code to reproduce the original problem here: Why is FF on OS X losing jQuery-UI in click event handler?

Can you debug with console.log or a simple alert to check if jquery is working fine? Also if its jquery UI, use firebug to check if it loads fine in ff! — Marshall Mathews, Mar 27 '12 at 04:53
@MarshallMathews: jQuery is working fine, since dialogDiv is initialized fine with $(document.createElement('div')).attr("id", dialogId). I checked this with firebug. How would you go about checking whether jQuery-UI loads fine with Firebug? — Jean-François Beauchamp, Mar 27 '12 at 17:21
`console.log("This explains the dialog method: " + $.ui.dialog)` if false, then maybe UI isn't loaded right — Kyle Macey, Mar 27 '12 at 18:16
If you're using jQuery, why are you creating a div with `$(document.createElement('div')).attr("id", dialogId);`? Why not just use `$('
').attr("id", dialogId);`? — j08691, Mar 27 '12 at 18:25
Works fine in FF11 in a fiddle when loading from "/echo/html". Must be something else going on in the code. — Dave, Mar 27 '12 at 18:32
@j08691: Because of posts like [this one](http://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent) saying that is more efficient. — Jean-François Beauchamp, Mar 27 '12 at 19:33
Might as well rewrite it all in pure JS if you want efficiency. — j08691, Mar 27 '12 at 19:39
@j08691 Well, jQuery is very useful. Writing everything would not be efficient in terms of my work throughput. However, if in suche instances I have the choice between 2 ways of doing things that lead to the same result, I will choose the more efficient of the two. — Jean-François Beauchamp, Mar 27 '12 at 20:39
@KyleMacey I added your console.log() line right at the beginning of my dialogDiv.Load() method, and I got "$.ui is undefined" as output. However, I also put the same console.log() command right under the line where I include jQuery-UI 1.8.18, and there it worked fine. It is also executed before the former consol.log(). I really don't understand why jquery-ui is "becoming" undefined. — Jean-François Beauchamp, Mar 27 '12 at 20:43
An error in your Javascript is most likely causing a break in propagation. — Kyle Macey, Mar 27 '12 at 21:06

Eric Hodonsky · Answer 1 · 2012-03-28T15:22:03.297

You've got a bit of a syntax/chaining issue if I'm not mistaken:

var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
//var dialogDiv = $(document.createElement('div')).attr("id", dialogId);
//dialogDiv equals the attribute 'id'
//try and console.log(dialogDiv) right here. what I think you want is:

var dialogDiv = $("<div />");
dialogDiv.attr("id", dialogId).load(this.href, function () {
    var dialog = $(this).dialog({ autoOpen: false });
    ...
});

I also don't think this is the correct way to initialize what you're trying to do... can you describe what's going on, on your page?

you may think about doing something like this:

var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000);
//Build some HTML here in the dialog div, or in a string.
theHTML = $('#'+dialogId).html() || "<p>This is a string of HTML</p>";
$('body').on('click', ".button" function () {
    console.log($.ui);
    $.dialog({autoOpen:true, html: theHTML})
});

The problem is that I am loosing jQuery-UI in the click event handler when using Firefox. My code is running fine with Google Chrome and with IE. I don't think the changes you are proposing will fix the issue I am trying to solve. — Jean-François Beauchamp, Mar 28 '12 at 01:52
Try putting the $.ui in that piece, I don't have ff11 but it workes for me in jsfiddle.net — Eric Hodonsky, Mar 28 '12 at 15:21

score -1 · Answer 2 · answered Mar 29 '12 at 00:21

The problem was with a Firefox Add-On. I started Firefox in safe mode, and now everything is working fine. I tried to identify which Add-On caused the problem, and I restarted Firefox with various Add-Ons turned on or off, but I can't seem to be able to reproduce the problem now.

$(this).dialog is not a function

2 Answers2

Linked