[Solved] Bug in FireFox 2.x

[tamir]

Hi Craig ,
When I'm trying to use qTip in Firefox 2 (my web site have to support this old browser ) , the tooltip does not appear . It create the HTML elements , but i see nothing .

There is an error in the console :
An attempt was made to use an object that is not, or is no longer, usable" code: "11
../Scripts/jquery.qtip.min.js
Line 75

This is the code I'm using :

JS Code

var globalEvent;
 
         $(".icon").live("mouseover", function(event) {
             globalEvent = event;
             this.style.cursor = 'pointer';
             $(this).qtip({
             overwrite:false,
                 content: {
                     title: {
                         text: function() { return "Section : " + $(this).attr('id'); },
                         button: false
                     },
                     text: function() {
 
                         var view = $(this).attr('v');
                         var imgView = '';
 
                         if (view != '' && view.indexOf("na.jpg") == -1) {
                             imgView = "<img class=\"viewImg\"  src=\"images/views/" + view + "\">";
                         }
                         return imgView;
                     }
                 },
                 show: {
                     event: event.type,
                     ready: true,
                     solo: true
                 },
                 hide: {
                     delay: 100,
                     fixed: true
                 },
 
 
                 style: {
                     tip: true,
                     classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
                 },
 
                 position: {
                     container: $("#content"),
                     my: 'bottom right',
                     at: 'top left',
                     adjust: {
                         screen: 'fit'
                     }
                 }
             });
         }, globalEvent);

Thanks , Tamir.

[Craig]

Can you test out the latest commit and see if it solves your problem please Tamir?

[tamir]

Hi Craig , Thanks for you quick replay .

I tried it but it's still not working

This is the error i get :

Error: uncaught exception: [Exception... "An attempt was made to use an object that is not, or is no longer, usable" code: "11" nsresult: "0x8053000b (NS_ERROR_DOM_INVALID_STATE_ERR)" location: "..Scripts/jquery.qtip.min.js Line: 61"


Now , it's not working well in Firefox 3.6 , The tooltip appear only in the second time i hover the image

(You can test it on FF 2.x without installing it using this wonderful tool http://spoon.net/browsers/ . you can even install firebug on it )


Thanks,Tamir.

[tamir]

Hi Craig ,
Any news on this one ?

Thanks , Tamir.

[Craig]

Is this error still ocurring in the latest commits?

[tamir]

Hi Craig ,
I checked with the latest commit , still have the same problem .

As I mentioned in the last post , It's not working well in Firefox 3.6 , The tooltip appear only in the second time i hover the image

the last good commit was from :Sun Sep 19

The code I'm using is :

JS Code

$(document).ready(function() {
    var globalEvent;
    var theOverIcon;
 
    $(".icon").live("mouseover", function(event) {
 
        $("div[id$='click']").qtip('destroy');
        globalEvent = event;
        theOverIcon = $(this);
        this.style.cursor = 'pointer';
 
        $(this).qtip({
            overwrite: false,
            content: {
                title: {
                    text: function () { return "Section : " + theOverIcon.attr('disName').replace("$", "-") },
                    button: false
                },
                text: function() {
 
                    var view = $(this).attr('v');
                    var imgView = '';
 
                    if (view != '' && view.indexOf("na.jpg") == -1) {
                        imgView = "<img class=\"viewImg\"  src=\"images/views/" + view + "\">Click on the icon to get tickets";
                    } else {
                        imgView = 'Click on the icon to get tickets'
                    }
                    return imgView;
                }
            },
            show: {
                event: event.type,
                ready: true,
                solo: true
            },
            hide: {
                delay: 100,
                fixed: true,
                effect: function() { $(this).fadeOut(100); }
            },
 
 
            style: {
                tip: true,
                classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
            },
 
            position: {
                container: $("#content"),
                my: 'bottom right',
                at: 'top left',
                adjust: {
                    screen: 'fit',
                    resize: true
                }
            }
        });
    }, globalEvent);

Thanks , Tamir.

[Craig]

tamir, this is definitely be fixed in the latest commit. Please upgrade and let me know!

[tamir]

Hi Craig ,and thank you for your quick replay.

I have upgraded to the latest commit (the one from Nov 10) and test on Firefox 2 and Firefox 3.6 . Still no change , I'm having the same bugs , in FF 2 the tooltip does not appear at all , and in FF 3.6 the tooltip appear only in the second hover .

What am i doing wrong ?

I use the precompiled JS from the dist folder , I've not updated the CSS (from the September commit ) , and I'm using two events on the same icon , on hover and on click , in the click event i use $(this).qtip('destroy'); so i can have the two events , but i don't think that's the problem , the hover event is the first one to use (before any destroy action) and that's the problematic one.

Hopefully you can Help. Thanks , Tamir.

[piotrek4team]

I was have the same problem. Try call qtip function like this:

JS Code

$(document).ready(function($) {
  $('.your-class').qtip({
    .....
  })
});

'$' in 'function($)' is very important!

[tamir]

Hi piotrek4team , Thanks for your solution . The problem is i have many images and all of them have the same class name , that's why i have to use "this" in the function . But after what you wrote i've decided to try this form of writing :

JS Code

$("#"+this.id).qtip({});

But still I get the same thing , In FF3.6 i see the qtip only after the second hover and FF2 dose not show at all.
The commit from Sep 19 is working perfectly on FF3.6 but not on FF2.


Anyone have an idea ?

Thanks again , Tamir.

[tamir]

I have done some more debugging , I did not solve the case but found some interesting things .

When i was looking on the HTML generated in the first time i hover and the second time i hover , I found some differences , could that be it ?


first hover :

JS Code

<div id="ui-tooltip-2" role="tooltip" class="ui-tooltip qtip ui-helper-reset ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded ui-tooltip-focus ui-tooltip-pos-br" 
style="z-index: 15002; display: none; left: 707px; top: 513px; opacity: 1;" aria-hidden="false">
<div class="ui-tooltip-tip" style="width: 12px; height: 12px; background-color: transparent; border: 0px none; right: 0px; bottom: -12px;">
<canvas width="12" height="12" style="background-color: transparent; border: 0px none;">
</canvas>
</div>
<div class="ui-tooltip-wrapper">
<div class="ui-tooltip-titlebar ">
<div id="ui-tooltip-2-title" class="ui-tooltip-title">Section : 345</div>
</div><div class="ui-tooltip-content " id="ui-tooltip-2-content">
<img src="images/views/Georgia Dome/Atlanta Falcons/345.jpg" class="viewImg">Click on the icon to get tickets</div>
</div></div>

second hover :

JS Code

<div id="ui-tooltip-2" role="tooltip" class="ui-tooltip qtip ui-helper-reset ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded ui-tooltip-focus   ui-tooltip-pos-br" 
style="z-index: 15002; display: none; left: 707px; top: 513px; opacity: 1;" aria-hidden="true">
<div class="ui-tooltip-tip" style="width: 12px; height: 12px; background-color: transparent; border: 0px none; right: 0px; bottom: -12px;">
<canvas width="12" height="12" style="background-color: transparent; border: 0px none;">
</canvas></div>
<div class="ui-tooltip-wrapper">
<div class="ui-tooltip-titlebar "><div id="ui-tooltip-2-title" class="ui-tooltip-title">Section : 345</div></div>
<div class="ui-tooltip-content " id="ui-tooltip-2-content">
<img src="images/views/Georgia Dome/Atlanta Falcons/345.jpg" class="viewImg">
Click on the icon to get tickets</div></div></div>

the difference is aria-hidden="false" in the first hover , and in the second aria-hidden="true"

Tamir.

[Craig]

That's odd... jugding from the HTML the tooltip isn't visible. Are you sure the show event is being fired? Try attaching a custom show callback:

JS Code

events: {
   show: function(e) {
      console.log(e);
   }
}

[tamir]

Hi Craig ,
I've added the code and here are the results:

FF 3.6 :
The show event is fired in the first and second hover ,I get an event of type "tooltipshow" (Tell me if you need more data from console window ) , but the tooltip appears only in the second hover .


FF 2.0 :
I get an error --

An attempt was made to use an object that is not, or is no longer, usable" code: "11

sanitize()(Object overwrite=false content=Object show=Object)jquery.q...ip.min.js (line 76)
l()()jquery.q...ip.min.js (line 22)
trim()(Object, function(), undefined)jquery-1....2.min.js (line 30)
N(Object overwrite=false content=Object show=Object, [img#fimg_sec_203.icon flag1.png length=1 0=img#fimg_sec_203.icon context=document])jquery.q...ip.min.js (line 22)
bind()(Object overwrite=false content=Object show=Object, undefined, undefined)jquery.q...ip.min.js (line 70)
(?)()(Object originalEvent=Event mouseover type=mouseover)ticketsutils.js (line 518)
oa(Object originalEvent=Event mouseover type=mouseover)jquery-1....2.min.js (line 18)
handle()(Object originalEvent=Event mouseover type=mouseover)jquery-1....2.min.js (line 55)
remove()()

Thanks , Tamir.

[Craig]

Hmm, can you use the non-minified version of qTip can re-report the error please?

[tamir]

Hi Craig,
I used the non-minified version of qTip and the error on FF2 is :

An attempt was made to use an object that is not, or is no longer, usable" code: "11
sanitize()(Object overwrite=false content=Object show=Object)jquery.q...ip.min.js (line 1662)
(?)()()jquery.q...ip.min.js (line 129)
trim()(Object, function(), undefined)jquery-1....2.min.js (line 30)
sanitizeOptions(Object overwrite=false content=Object show=Object, [img#fimg_sec_370.icon flag1.png length=1 0=img#fimg_sec_370.icon context=document])jquery.q...ip.min.js (line 128)
qtip()(Object overwrite=false content=Object show=Object, undefined, undefined)jquery.q...ip.min.js (line 1353)
(?)()(Object originalEvent=Event mouseover type=mouseover)ticketsutils.js (line 521)
oa(Object originalEvent=Event mouseover type=mouseover)jquery-1....2.min.js (line 18)
handle()(Object originalEvent=Event mouseover type=mouseover)jquery-1....2.min.js (line 55)
remove()()jquery-1....2.min.js (line 49)
[Break on this error] if('boolean' !== typeof opts.once && opts.once) { opts.once = !!opts.once; }

Tamir

[Craig]

This should now be fixed in the latest commit tamir. Take a look and let me know if this solves the problem!

[tamir]

Hi Craig ,
Thanks for your quick handle . I've tried with the latest commit , but the case is still not solved .

In FF 3.6 :
the show event is fired on every hover , but the tooltip still appear only in the second time .

in FF 2.0 :
I get two errors :

1.

uncaught exception: An attempt was made to use an object that is not, or is no longer, usable (NS_ERROR_DOM_INVALID_STATE_ERR)
[Break on this error] context.restore();

2. this error is in the jquery library
An attempt was made to use an object that is not, or is no longer, usable" code: "11
? in jquery-1.4.2.min.js@49(Object, "onBeforeLoad", undefined, undefined)jquery-1....2.min.js (line 49)
? in jquery-1.4.2.min.js@65("onBeforeLoad", undefined, undefined)jquery-1....2.min.js (line 65)
? in overlay.js@247(undefined)overlay.js (line 248)
? in jquery-1.4.2.min.js@52(Object originalEvent=Event click type=onLoad, [Object originalEvent=Event click type=onLoad 0=Object], Object, Object)jquery-1....2.min.js (line 54)
? in jquery-1.4.2.min.js@66()jquery-1....2.min.js (line 66)
? in jquery-1.4.2.min.js@29([button#splink.catIcon, Object 0=button#splink.catIcon 1=Object length=2], function(), Object)jquery-1....2.min.js (line 30)
? in jquery-1.4.2.min.js@24(function(), undefined)jquery-1....2.min.js (line 24)
? in jquery-1.4.2.min.js@66(Object originalEvent=Event click type=onLoad, undefined)jquery-1....2.min.js (line 66)
? in overlay.js@109(Object originalEvent=Event click type=onLoad)overlay.js (line 128)
? in overlay.js@100(Object originalEvent=Event click type=onLoad)overlay.js (line 101)
? in jquery-1.4.2.min.js@54(Object originalEvent=Event click type=onLoad)jquery-1....2.min.js (line 55)
? in jquery-1.4.2.min.js@49()jquery-1....2.min.js (line 49)
[Break on this error] function(b){return"\\"+b})};c.event={add...f};if(k.indexOf(".")>-1){r=k.split(".");

Tamir.

[Craig]

Hmm this is very odd, that seems to be a jQuery error... but it seems to be originating from your beforeLoad function? Could you please post your full qTip config?

[tamir]

Hi Craig ,

First the full code :

JS Code

$(document).ready(function () {
    var globalEvent;
    var theOverIcon;
 
    $(".icon").live("mouseover", function (event) {
 
        $("div[id$='click']").qtip('destroy');
        globalEvent = event;
        theOverIcon = $(this);
        this.style.cursor = 'pointer';
 
        $("#" + this.id).qtip({
            overwrite: false,
            content: {
                title: {
                    text: function () { return "Section : " + theOverIcon.attr('disName').replace("$", "-") },
                    button: false
                },
                text: function () {
 
                    var view = $(this).attr('v');
                    var imgView = '';
 
                    if (view != '' && view.indexOf("na.jpg") == -1) {
                        imgView = "<div />";
                    } else {
                        imgView = 'Click on the icon to get tickets'
                    }
                    return imgView;
                }
            },
            show: {
                event: event.type,
                ready: true,
                solo: true
            },
            hide: {
                delay: 100,
                fixed: true,
                effect: function () { $(this).fadeOut(100); }
            },
 
 
            style: {
                tip: true,
                classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
            },
 
            events: {
                show: function (e) {
                    console.log(e);
                }
            },
 
 
            position: {
                container: $("#content"),
                my: 'bottom right',
                at: 'top left',
                adjust: {
                    screen: 'fit',
                    resize: true,
                    x: 10,
                    y: 5
                }
            }
        });
    }, globalEvent);
 
 
    var globalEvent2;
    var theClickIcon;
    var TicketsBySectionTable = null;
 
    $(".icon").live("click", function (event) {
 
        $(this).qtip('destroy');
 
        if (oCache != null && oCache["stTable"] != null) {
            oCache["stTable"] = { "iCacheLower": -1 };
        }
 
        theClickIcon = $(this);
        globalEvent2 = event;
 
        $(this).qtip({
            id: 'click',
            overwrite: false,
            content: {
                title: {
                    text: function () { return "Section : " + theClickIcon.attr('disName').replace("$", "-"); },
                    button: true
                },
                text: "<div id='stTableDiv' class='stTable'><table id='stTable' class='display'  cellspacing='0' cellpadding='0' border='0'><thead><tr>" +
                            "<th>Broker</th><th>Row</th> <th>Quantity</th><th>Price</th><th></th></tr></thead>" +
                            "<tbody><tr><td ></td><td></td><td></td><td></td><td></td></tr></tbody></table></div>"
            },
            show: {
                event: event.type,
                ready: true,
                solo: true,
                effect: function () { $(this).fadeIn(100); }
            },
            hide: {
                event: false,
                effect: function () { $(this).fadeOut(100); }
            },
            style: {
                tip: true,
                classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
            },
            events: {
                render: function (event, api) {
                    var ajaxP = 'Ajax/GetSectionTickets.ashx' + '?eid=' + eventid + '&sid=' + theClickIcon.attr('srname');
                    TicketsBySectionTable = $('#stTable').dataTable({
                        "bProcessing": true,
                        "bServerSide": true,
                        "bStateSave": false,
                        "bFilter": false,
                        "bLengthChange": false,
                        "sAjaxSource": ajaxP,
                        "iDisplayLength": 5,
                        "fnDrawCallback": function () { api.reposition(); },
                        "fnInitComplete": function () { api.reposition(); },
                        "fnServerData": fnDataTablesPipeline,
                        "aaSorting": [[3, "asc"]],
                        "aoColumns": [null,
			                               null,
			                               { "sWidth": "18%" },
			                               null,
			                                { "bSortable": false}],
                        "sPaginationType": "full_numbers",
                        "bJQueryUI": true,
                        "oLanguage": {
                            "sProcessing": "",
                            "sZeroRecords": "SeatKarma found no tickets for this Section.",
                            "sInfo": "_START_ to _END_ of _TOTAL_ tickets",
                            "oPaginate": {
                                "sNext": ">",
                                "sPrevious": "<"
                            }
                        }
                    });
 
                }
            },
 
            position: {
                container: $("#content"),
                my: 'bottom right',
                at: 'top left',
                adjust: {
                    screen: 'fit',
                    resize: true,
                    x: 10,
                    y: 5
                }
            }
        });
 
    }, globalEvent2);

I upgraded to JQuery v1.4.4 and in FF 2.0 i get a diffrent error :

An attempt was made to use an object that is not, or is no longer, usable" code: "11
sanitize()(Object)jquery.q...ip.min.js (line 2133)
(?)()()jquery.q...ip.min.js (line 129)
makeArray()(Object, function(), undefined)jquery-1....4.min.js (line 33)
sanitizeOptions(Object, undefined)jquery.q...ip.min.js (line 128)
init(0, Object prerender=false id=0 overwrite=false metadata=Object)jquery.q...ip.min.js (line 1250)
bind()(0)jquery.q...ip.min.js (line 1382)
makeArray()([img#fimg_sec_404.icon flag2.png 0=img#fimg_sec_404.icon length=1 prevObject=[0]], hoverIntent(event), img#fimg_sec_404.icon flag2.png)jquery-1....4.min.js (line 33)
first()(hoverIntent(event), undefined)jquery-1....4.min.js (line 26)
bind()(Object prerender=false id=0 overwrite=false metadata=Object, undefined)jquery.q...ip.min.js (line 1369)
qtip()(Object overwrite=false content=Object show=Object, undefined, undefined)jquery.q...ip.min.js (line 1362)
(?)()(Object originalEvent=Event mouseover type=mouseover)ticketsutils.js (line 520)
Ka(Object originalEvent=Event mouseover type=mouseover)jquery-1....4.min.js (line 18)
handle()(Object originalEvent=Event mouseover type=mouseover)jquery-1....4.min.js (line 63)
add()()jquery-1....4.min.js (line 57)
[Break on this error] var opts = options.style.tip;

In FF 3.6 i get the same thing ( qtip appear only on the second hover , but show event is fired )

Tamir.

[Craig]

What line did the error occur on?

[tamir]

Line 2133 in qtip code :

JS Code

try {
		var opts = options.style.tip;
		if(typeof opts !== 'object'){ options.style.tip = { corner: !!opts }; }
		if(typeof opts.method !== 'string'){ opts.method = TRUE; }
		if(!(/canvas|polygon/i).test(opts.method)){ opts.method = TRUE; }
		if(typeof opts.width !== 'number'){ opts.width = 12; }
		if(typeof opts.height !== 'number'){ opts.height = 12; }
		if(typeof opts.border !== 'number'){ opts.border = 0; }
	}
	catch(e) {}

And in my code it just give the end of .live() function (line 69 above ).

[Craig]

tamir, test out the new commit please. Does fix your issue?

[tamir]

Hi Craig ,
No , it's not solving the problem , I'm getting the exact same error in FF 2 and the same situation in FF 3.6 .

It seems like the problem occur in this line of code .

var opts = options.style.tip;

Have you checked my code ? does it look good to you ?

Thanks , Tamir.

[tamir]

Hi Craig ,

I've replaced my CSS with the new one and now FF 3.6 is working
(there is a problem with positioning but I'll open a new thread for this)

So just one more to go
(in FF 2 i get the same problem)


Thanks , Tamir.

[tamir]

Hi Craig , Anything new with this problem ?
Tamir.