Please Log-in or Register to get full access to the forums.


Post Reply 
 
Thread Rating:
  • 1 Votes - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Solved] a.compareDocumentPosition is not a function
6th July, 18:16
Post: #1
[Solved] a.compareDocumentPosition is not a function
When I hover over my button that calls up my qTip, I get the following error:

a.compareDocumentPosition is not a function

To see a working example, view my jsFiddle


Confirmed Affected Browser(s):
  • Firefox 5.0

Libraries:
  • jQuery 1.6.2
  • jQuery UI 1.8.14
  • nightly qTip2 (2.0.0pre as of Sun, Jun 26, 2011)
Find all posts by this user
Quote this message in a reply
8th July, 00:26
Post: #2
RE: a.compareDocumentPosition is not a function
I got the same error. According to http://bugs.jquery.com/ticket/7297, jQuery.contains(document, $(document.body)) causes error in firefox, but
jQuery.contains(document, document.body) would work fine. Can we please check and fix this?
Find all posts by this user
Quote this message in a reply
8th July, 11:01
Post: #3
RE: a.compareDocumentPosition is not a function
This actually appears to be unfixable on my end. Binding mouseleave to the window element is what's causing the bug, but it's needed to enable the hide.leave functionality...
Visit this user's website Find all posts by this user
Quote this message in a reply
11th July, 15:45
Post: #4
RE: a.compareDocumentPosition is not a function
(8th July 11:01)Craig Wrote:  This actually appears to be unfixable on my end. Binding mouseleave to the window element is what's causing the bug, but it's needed to enable the hide.leave functionality...

As I researched some more, I came across a fix in the GitHub area. Setting hide.leave to false does the trick:

To see a working example, view my jsFiddle

My changed js:

JS Code
// Create our tooltip defaults
this.plugins.qtip.defaults = $.extend(true, {}, this.plugins.qtip.defaults, {
 
	position	: { my : "bottom center", at : "top center" },
	show		: { delay : 0 },
	hide		: { delay : 0, leave: false },
	style		: { classes: "ui-tooltip-shadow ui-tooltip-rounded", widget: true }
 
});


Craig, is this not a bug fix we can put in?
Find all posts by this user
Quote this message in a reply
14th September, 15:57
Post: #5
RE: a.compareDocumentPosition is not a function
(11th July 15:45)Scott Elliott Wrote:  My changed js:

JS Code
// Create our tooltip defaults
this.plugins.qtip.defaults = $.extend(true, {}, this.plugins.qtip.defaults, {
 
	position	: { my : "bottom center", at : "top center" },
	show		: { delay : 0 },
	hide		: { delay : 0, leave: false },
	style		: { classes: "ui-tooltip-shadow ui-tooltip-rounded", widget: true }
 
});


Craig, is this not a bug fix we can put in?

Adding "leave: false" to hide fixed the issue on my site also. Is there anything else that needs to be done to fix this bug?
Find all posts by this user
Quote this message in a reply
14th September, 16:26
Post: #6
RE: a.compareDocumentPosition is not a function
Are you using the latest nightlies? This should no longer be an issue hopefully.
Visit this user's website Find all posts by this user
Quote this message in a reply
14th September, 17:48
Post: #7
RE: a.compareDocumentPosition is not a function
(14th September 16:26)Craig Wrote:  Are you using the latest nightlies? This should no longer be an issue hopefully.

Hmm. I was already using a nightly version with JQuery 1.6.4, but not the most recent version.

I just tried including the newest nightly, but when I do, the Qtip call I was using no longer works. When I use the newest nightly, I get this in the console:

Quote:$(this).attr("title") is undefined

Here is my call for Qtip:

JS Code
$(".tip,.tipBtn,.tipAuto,.mmddyyyy,.icon16").live("mouseover",function(event){
		var theMatch = "";
		if($(this).attr('title')!="")var theMatch = $(this).attr('title').match(/([^|]+)/gi); if(!theMatch||!theMatch[0]||!theMatch[1]){ theMatch[0]="";theMatch[1]=$(this).attr("title"); }
		$(this).qtip({
			overwrite: false, // Make sure the tooltip won't be overridden once created
			content:{ text:theMatch[1], title:theMatch[0] },
			position:{ adjust: {x:10,y:-25,mouse:true}, target: "mouse", viewport: $(window) },
			show: {
				delay: 0,
				effect: false,
				event: event.type, // Use the same show event as the one that triggered the event handler
				ready: true, // Show the tooltip as soon as it's bound, vital so it shows up the first time you hover!
				solo: true
			},
			hide:{ delay:0, effect:false, leave:false }
		}, event); //pass through our original event to qTip
	}).each(function(i){ $.attr(this,"oldtitle",$.attr(this,"title"));this.removeAttribute("title"); }); //store title attr in "oldtitle" attr instead
Find all posts by this user
Quote this message in a reply
15th September, 13:51
Post: #8
RE: a.compareDocumentPosition is not a function
Might want to change your code a bit there:

JS Code
var title = '' + $(this).attr('title'), theMatch;
if(title) {
	theMatch = title.match(/([^|]+)/gi);
	if(!theMatch || !theMatch[1]) 
		theMatch[0] = ""; theMatch[1]= title;
	}
}
Visit this user's website Find all posts by this user
Quote this message in a reply
15th September, 19:46 (This post was last modified: 15th September 19:47 by johndubya.)
Post: #9
RE: a.compareDocumentPosition is not a function
Craig, thanks so much for the response!

I updated my code with that suggestion and with using the new "2.0.0pre" version of qTip2, but it doesn't work. Now, every tooltip shows up with the content of "undefined". I did an alert() at the top of my call for qTip2 to show the "title" attr, but it always came up as "undefined".

Here is my new code, with your changes:
JS Code
$(".tip,.tipBtn,.tipAuto,.mmddyyyy,.icon16").live("mouseover",function(event){
	//alert($(this).attr('title')); //always shows "undefined" with 2.0.0pre version
	var title = '' + $(this).attr('title'), theMatch;
	if (title) {
		theMatch = title.match(/([^|]+)/gi);
		if(!theMatch||!theMatch[0]||!theMatch[1]){ theMatch[0]="";theMatch[1]=title;}
	}
	$(this).qtip({
		overwrite: false, // Make sure the tooltip won't be overridden once created
		content:{ text:theMatch[1], title:theMatch[0] },
		position:{ adjust: {x:10,y:-25,mouse:true}, target: "mouse", viewport: $(window) },
		show: {
			delay: 0,
			effect: false,
			event: event.type, // Use the same show event as the one that triggered the event handler
			ready: true, // Show the tooltip as soon as it's bound, vital so it shows up the first time you hover!
			solo: true
		},
		hide:{ delay:0, effect:false, leave:false }
	}, event); //pass through our original event to qTip
}).each(function(i){ $.attr(this,"oldtitle",$.attr(this,"title"));this.removeAttribute("title"); }); //store title attr in "oldtitle" attr instead
Find all posts by this user
Quote this message in a reply
19th September, 16:28
Post: #10
RE: a.compareDocumentPosition is not a function
Oh my bad, change that top bit to 'oldtitle', didn't notice youe code at the bottom!
JS Code
var title = '' + $(this).attr('oldtitle'), theMatch;
Visit this user's website Find all posts by this user
Quote this message in a reply
19th September, 21:49
Post: #11
RE: a.compareDocumentPosition is not a function
(19th September 16:28)Craig Wrote:  Oh my bad, change that top bit to 'oldtitle', didn't notice youe code at the bottom!
JS Code
var title = '' + $(this).attr('oldtitle'), theMatch;

Works a charm, thank you so much!
Find all posts by this user
Quote this message in a reply
24th October, 15:11
Post: #12
RE: [Solved] a.compareDocumentPosition is not a function
Craig, the one issue I'm having now with the above code that you fixed is that whenever I load HTML through Ajax, any new tooltips loaded are not rendered correctly. They simply show "undefined" in them. But if I run the code above a second time after loading the Ajax content, it works. But isn't the point of using ".live()" is that I don't have to run it a second time? Thanks so much for your help!
Find all posts by this user
Quote this message in a reply
24th October, 16:35
Post: #13
RE: [Solved] a.compareDocumentPosition is not a function
You'll need to setup a test case on jsFiddle John, as I'm not too sure what you mean by not rendered correctly? http://jsfiddle.net/fdavn/
Visit this user's website Find all posts by this user
Quote this message in a reply
24th October, 17:16
Post: #14
RE: [Solved] a.compareDocumentPosition is not a function
(24th October 16:35)Craig Wrote:  You'll need to setup a test case on jsFiddle John, as I'm not too sure what you mean by not rendered correctly? http://jsfiddle.net/fdavn/

Sorry. I will for sure set up a test case there, if necessary. Just tell me to, if my further explanation isn't enough. But maybe I can explain it better...

Basically, I run the above code when my page is first loaded. It correctly creates all tooltips on the page, and they show up perfectly.

But if I load HTML through Ajax that has elements with title attributes, those tooltips are not created successfully. Obviously, the .live() call should be automatically making the Ajax-loaded elements into tooltips, but instead of creating the tooltips, it just creates the tooltip box with "undefined" in it.

But what I've found is that after I load the tooltip elements through Ajax, if I then run the above code again, the tooltips are created successfully. But why would I have to run .live() a second time to create the tooltips on the Ajax-loaded tooltip elements?
Find all posts by this user
Quote this message in a reply
25th October, 18:49
Post: #15
RE: [Solved] a.compareDocumentPosition is not a function
Ok, I finally figured out how to get my example to work on jsFiddle. Never worked with that before. But here is what happens on my site:

http://jsfiddle.net/fDavN/1983/
Find all posts by this user
Quote this message in a reply
27th October, 18:37
Post: #16
RE: [Solved] a.compareDocumentPosition is not a function
Well you're grabbing 'oldtitle' from the elements as your content, but the AJAX's in stuff won't have that, since it's loaded in after the title -> oldtitle replacement code. Just add a backup to check for the title attribute as well: http://jsfiddle.net/fDavN/1999/ . Or even better, make sure all AJAX'd in ones don't use the title attribute, but the oldtitle attribute instead Smile
Visit this user's website Find all posts by this user
Quote this message in a reply
Today, 19:53 (This post was last modified: Today 19:54 by johndubya.)
Post: #17
RE: [Solved] a.compareDocumentPosition is not a function
Cool, didn't realize it was actually taking the tooltip from the oldtitle instead. I moved the code that copies the tooltip info from title to oldtitle to inside the .live() function, and now Ajax-loaded tooltips show perfectly. Thanks so much for the awesome support you provide for qTip2! Smile

JS Code
$(".tip,.tipBtn,.tipAuto,.mmddyyyy,.icon16").live("mouseover",function(event){
   $.attr(this,"oldtitle",$.attr(this,"title"));this.removeAttribute("title"); //store title attr in "oldtitle" attr instead
   var title = '' + $(this).attr('title'), theMatch;
   if (title) {
      theMatch = title.match(/([^|]+)/gi);
      if(!theMatch||!theMatch[0]||!theMatch[1]){ theMatch[0]="";theMatch[1]=title;}
   }
   $(this).qtip({
      overwrite: false, // Make sure the tooltip won't be overridden once created
      content:{ text:theMatch[1], title:theMatch[0] },
      position:{ adjust: {x:10,y:-25,mouse:true}, target: "mouse", viewport: $(window) },
      show: {
         delay: 0,
         effect: false,
         event: event.type, // Use the same show event as the one that triggered the event handler
         ready: true, // Show the tooltip as soon as it's bound, vital so it shows up the first time you hover!
         solo: true
      },
      hide:{ delay:0, effect:false, leave:false }
   }, event); //pass through our original event to qTip
});
Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  [Solved] content function with this.attr networker 1 349 15th December 15:40
Last Post: Craig
  [Solved] Redraw function deprecated WeaponX86 1 435 11th October 10:12
Last Post: Craig
  [Solved] Confirm Prompt - this.toggle is not a function mdewyer 3 972 13th September 08:29
Last Post: Craig
  [Solved] Fluid width using - $(window).resize(function() stevieegee 2 1,346 28th May 16:03
Last Post: stevieegee
  [Solved] ajax url with function() TheDoc 2 1,406 23rd April 19:09
Last Post: TheDoc
  [Solved] $(...).qtip is not a function error cpritchard 2 1,381 9th February 03:13
Last Post: cpritchard
  [Solved] Reposition all tooltips by firing a function violuke 2 871 3rd December 12:38
Last Post: violuke
  .qtip is not a function mjt1987 5 2,036 4th October 11:47
Last Post: Craig
  Event Render when using a custom function for content VoidShadow 0 1,324 22nd August 05:32
Last Post: VoidShadow
  Disabling all tooltips on page with click function nickharambee 4 2,047 22nd July 11:16
Last Post: nickharambee



User(s) browsing this thread: 1 Guest(s)