qTip, AJAX and .NET

[miketravis]

Hello everyone,

Having a problem with qTip and AJAX in .NET.
I have a table in an updatePanel (.NET AJAX control) in which there are rel attributes for pictures in the table which tells qTip the url of the page to show in an IFrame. I have a save button that saves info in the editable table. When I click this button it saves no problem. But if I show a qTip by double clicking on the picture and then hit save it gives me a javascript error:

htmlfile: Unspecified error.

at: 'var G=this[0].getBoundingClientRect()'

The app still works but after this when ever the page is scrolled I get the same error.

Anyone have any idea of what is happening here?

[Craig]

miketravis, unfortunately that is not a qTip error, it looks like a jQuery error to me. Could you do a trace to see where this error is occuring and what methods are being called?

[Action Jackson]

craig Wrote:miketravis, unfortunately that is not a qTip error, it looks like a jQuery error to me. Could you do a trace to see where this error is occuring and what methods are being called?

I'm getting the exact same issue. When I scroll up/down after an AJAX call I get the error. I also tested my page without any qtip code and everything works fine so this definately looks like something having to do with qtip or how we have it implemented. Craig let me know if you want any sample code to help reproduce this behavior.

[miketravis]

The error I mentioned above (htmlfile: Unspecified error. occuring at var G=this[0].getBoundingClientRect() ) is from the jquery-1.3.2.min.js. But as the above poster said, If you remove qTip from your page it everything works expected.

Looking at the Call Stack in Visual Studio it has the following next:

target.position = self.options.position.target.offset(); [jquery.qtip-1.0.0-rc3.js - in updatePosition: function(event, animate)]

api.updatePosition(event, true); [jquery.qtip-1.0.0-rc3.js - in function bgiframe()]

[Action Jackson]

I have looked over my code and I believe it's due to how I'm re-initializing my qtips. After the ajax loads content to the page i'm calling a function that re-initializes the qtips since the ajax content contains tips. I think perhaps I cannot keep calling this function over and over again.

function refreshQTips() {
$('.tip1').qtip({........});
$('.tip2').qtip({........});
etc.
}

If I call this function more than once then try to scroll up/down the jquery errors out. Is there another way I can try to re-initialize my qtips so the ajax content can also contain tooltips?

Thanks for your help!

[Craig]

Hmmm looking at it now, this might be a problem with the R3C release itself. As I recall (it's been a while!) the RC3 initialized the qTip in a much different way to the improved branch releases, which could be causing this problem. It seems like the script is getting confused about what qTip it's referencing...

Looking into this as fast as I can guys so bare with me!

[Action Jackson]

craig Wrote:Hmmm looking at it now, this might be a problem with the R3C release itself. As I recall (it's been a while!) the RC3 initialized the qTip in a much different way to the improved branch releases, which could be causing this problem. It seems like the script is getting confused about what qTip it's referencing...

Looking into this as fast as I can guys so bare with me!

I have been playing around with this and made some progress. Before calling the ajax content I destroyed all my tooltips. Then after the ajax content is put on the page I created the tooltips again. This time I'm getting a new error when I scroll up/down. And this time the error is coming from the qtip js file:

'status' is null or not an object

if(u.status.rendered===true&&(u.options.position.type!=="static"

Any more ideas I can try? I'm getting ready to switch over to cluetip but love qtip and wish it would work!!

[Action Jackson]

The good news is all the other major browsers do not throw any errors so this is only an IE issue.

I'm getting the erorrs on IE 8. I didn't test it on IE 7 or 6 yet. I will try these other browsers next.

Thanks!

[Action Jackson]

Hi Craig...Do you know what is causing the 'status' is null or not an object error in the qtip js file? Thanks!

[Craig]

I've looked into it but this seems to be quite sporadic at my end. Maybe it's the IETester application but sometimes it works, sometimes not? Very odd. Have you tried googling this to see if it's actually a more specific problem with IE's JavaScript engine and certain AJAX calls?

[rojo]

I have been dealing with this exact same problem for the past two months. I have googled and cannot find a fix. The only thing I can see is that there seems to be something specifically with the qTips plugin being reinstantiated after the AJAX call is complete. I do not have this problem with any other plugin. My other plugins are reinstantiated after the AJAX call. The error occurs in both IE and FF.

[drivingbear]

Any word on a resolution to this issue? I'm having the same problem with rc3 in ie7. Even if you know a good place for me to put a catch or something in the qtip js file that would be very helpful to get me by until there is a better solution. Otherwise these tooltips are awesome. Thanks.

[drivingbear]

If anybody is still interested, I put a try/catch block around the u.updatePosition(t,true) call in jquery.qtip-1.0.0-rc3.min.js and that seems be preventing the undefined error popup in ie. If anybody has a better solution or thinks this will cause a problem please let me know.

[Ville]

I'm seeing the same issue on IE7. While I have no idea how the plugin actually works as I haven't spend tons of time studying its code, the error seemed to be fairly simple to circumvent (I'm guessing this is "not treating the root cause but rather medicating the symptoms"). Anyway, I added “typeof u!="undefined"&&” to 1.0.0rc3 (as shown below), and it seemed to put an end to the error while apparently (?) not affecting the plugin adversely.

JS Code

if(typeof u!="undefined"&&u.status.rendered===true&&(u.options.position.type!=="static"

[Ville]

Will this issue be fixed in the 1.0 final release (perhaps with the patch I suggested)?

[Craig]

Ville, this fix should be present in the al;test branch release of the 1.x series branches here:

http://bazaar.launchpad.net/~craig.craig.../1.0/files

[dotNETMkv]

(22nd February 18:24)Craig Wrote:  Ville, this fix should be present in the al;test branch release of the 1.x series branches here:

http://bazaar.launchpad.net/~craig.craig.../1.0/files

Was this ever confirmed as being resolved? I am still having this issue with RC3. I downloaded the reccomended branch from the repo and get the "Object doesn't support this property or method" when make a simple $(this).qtip(...) call.

I have both the RC3 and latest branch scripts in my project and swapping either in and out on Chrome or FF work fine. RC3 on IE causes the error explained by the OP and using the latest branched version causes the error explained above.

Is there any further information on the state of this issue?

[Craig]

1.0 is pretty much dead at this point dotNET, so I won't be making any more patches for it. I'd suggest moving over the qTip2 as it's much more stable and bug-free, even in pre-release form.

[dotNETMkv]

(21st January 14:12)Craig Wrote:  1.0 is pretty much dead at this point dotNET, so I won't be making any more patches for it. I'd suggest moving over the qTip2 as it's much more stable and bug-free, even in pre-release form.

OK, thanks. I will give that a go and let you know how it goes.

[dotNETMkv]

(21st January 14:50)dotNETMkv Wrote:  

(21st January 14:12)Craig Wrote:  1.0 is pretty much dead at this point dotNET, so I won't be making any more patches for it. I'd suggest moving over the qTip2 as it's much more stable and bug-free, even in pre-release form.

OK, thanks. I will give that a go and let you know how it goes.

Swapped in the v2.0 script and I am getting issues on the initial hover. When I hover over an item targetted for a tooltip I get an "Object expected" error in all browsers.

Then when I swap in the uncompressed code, it appears to be that next() is "undefined".

JS Code

function imageLoad(img) {
				// Remove the image from the array
				images = images.not(img);
 
				// If queue is empty, update tooltip and continue the queue
				if(images.length === 0) {
					self.redraw();
					if(self.rendered === TRUE) {
						self.reposition(self.cache.event);
					}
 
					next();
				}
			}

Thinking it could potentially be my implementation I removed all configurations for the tip and just included what the Converter tool recommended and still having the same issue.

JS Code

function bindTooltips(){
          $('.tooltip').each(function() {           
           $(this).qtip(
                {
                   content: "Test Content",
                   position: {                          
                          adjust: {
                                x: 5,
                                y: -5
                          },
                          at: 'right center',
                          my: 'bottom left'
                     }                
                });     
        });
    }

Any ideas?

---

Figured out the issue, had to swap in 1.4.4 jQuery release. Post back issue appears to be resolved. Once I bolt all the events I'll know for sure. Now I just need to go through the motions of how I work my old styles into the new CSS based styling and should be good to rock.