1

In a web page using jQUery 1.7.1 and jQUery-UI 1.8.18, if I output $.ui in an alert box when the document is ready, I get [object Object]. However when using Firefox, if I output $.ui in a click event handler, I get 'undefined' as result. With other browsers (latest versions of IE, Chrome and Safari), the result is still [object Object] when clicking on the link.

Here is my HTML Page:

<!doctype html>
<html>
<head>
    <title></title>

    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.18.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            alert($.ui);    // ALERT A

            $(document).on("click", ".dialogLink", function () {
                alert($.ui);    // ALERT B
                return false;
            });
        });
    </script>

</head>
<body>
    <a href="#" class="dialogLink">Click me!</a>
</body>
</html>

In this post, I reduced to its simplest form another problem I was having described here: $(this).dialog is not a function. I created a new post for the sake of clarity, since the real question is different from the original one now that pin-pointed where the problem resided.

UPDATE:

IF I replace my alerts with simply alert($); I get this result for alert A:

function (selector, context) {
    return new jQuery.fn.init(selector, context, rootjQuery);
}

and this one for alert B:

function (a, b) {
    return new d.fn.init(a, b, g);
}

This does not make sense to me, although I may not be understanding well enough what $ is...

UPDATE 2:

I can only reproduce this problem using Firefox on OS X. On Firefox running on Windows 7, everything is fine.

Community
  • 1
  • 1
Jean-François Beauchamp
  • 5,485
  • 8
  • 43
  • 77
  • 1
    Works for me: http://jsbin.com/iyikuk (source: http://jsbin.com/iyikuk/edit#html). There must be more to the page. I took the above, pasted it into JSBin, and all I changed was where the scripts came from. – T.J. Crowder Mar 28 '12 at 04:12
  • @T.J.Crowder I am having the same problem on the link you posted. What browser are you using? As I mentioned, I am having this problem only with FF. I am using Firefox 11.0 on a Mac with OS X 10.7.3. – Jean-François Beauchamp Mar 28 '12 at 04:22
  • 1
    Works for me, too. Did the same thing as TJ except in a fiddle for those who like fiddles: http://jsfiddle.net/VxDaA/ Moreover, there's no reason based on this sample that it WOULDN'T work. The most common way to lose an event handler is to modify the DOM such that the original node is destroyed, cloned without events, etc. Or a new `.dialogLink` is getting added (which won't have the event bound on it since that fired in document.ready) – Greg Pettit Mar 28 '12 at 04:23
  • I just tried using Firefox v10.0.2 and Firefox v11.0 on a Windows 7 machine, and there it is working fine. So it seems to be a problem with Firefox on OS X only. – Jean-François Beauchamp Mar 28 '12 at 04:26
  • @GregPettit After your post and the one from T.J. Crowder, I decided to do some more testing, and discovered that the problems only occurs on OSX. My guess is that you tried this on a Windows machine. I haven't tried a linux machine... – Jean-François Beauchamp Mar 28 '12 at 04:34
  • @T.J.Crowder Thanks for all that testing! You were right! It has to do with an add-on. I restarted Firefox 11.0 on my Mac in Safe Mode (All add-ons disabled), and now it is working fine. Thanks! If you want to post your suggestion as an answer, I'll mark it as the right answer. – Jean-François Beauchamp Mar 28 '12 at 04:41

1 Answers1

4

I think you must have an add-on in your Firefox installation on OSX which is mucking about with the page; specifically, I think it's loading a compressed version of jQuery into the page after page load, which is a strange thing to do but explains the behavior you're seeing. Your alert of the $ function clearly shows it changing from an uncompressed version (return new jQuery.fn.init(selector, context, rootjQuery);) into a compressed version (return new d.fn.init(a, b, g);), and re-loading jQuery would replace $ with a completely new version, which means jQuery UI's additions would be gone from it. E.g., something loading a compressed jQuery after page load fits the symptoms.

Absent an add-on (or malware, I suppose) doing that, there's no reason that $ or $.ui would get redefined with the page you posted, and I've now tried it on Chrome 17, Firefox 11, and Opera 11 on Linux (Ubuntu 11.10) as well as IE9, Firefox 5, Safari 5, and Opera 11 on Windows 7. They all work as expected.

I'd disable all add-ons and try again. If it still happens, I'd completely wipe Firefox from the machine and reinstall from scratch.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Starting Firefox in safe mode solved the problem. I then tried to identify which add-on caused the problem by turning some of them off and on again, but I am not able to reproduce the problem anymore. – Jean-François Beauchamp Mar 29 '12 at 00:24
  • @Jean-FrançoisBeauchamp: I would completely uninstall Firefox and reinstall from scratch. Sometimes paranoia is a survival trait. – T.J. Crowder Mar 29 '12 at 05:17