Strange Issue in Jquery, Magento

Question

I have been using Custom extension for "Quick View" on every product like this

when hover the image, that link will show. when click that link, it will show with detailed description with big image. Its working well in product list page. But in home page, I got error like "TypeError: d is undefined" in img_height.js line no.7

I have checked that file and give alert for to find what value hold by d.I got an alert like [object object].(Multiple alerts were came).

d=Element.retrieve(a,"prototype_event_registry",$H()));
alert(d);  //undefined d
var e=d.get(b);
Object.isUndefined(e)&&(e=[],d.set(b,e));  

After closing alert boxes by check the checkbox "prevent this page from creating additional dialogs".

At that time, I got Error like "NS_ERROR_NOT_AVAILABLE: "

But I got alert box only in home page, Not in product list page. After giving alert, Quick Look working well in home page too. But if i remove alert, again i got same error "TypeError: d is undefined"

And also in between, I got most of the errors like "$.browser is undefined","typeerror $(...).live is not a function". I have fixed those issues by adding this script "<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>"

But i can't able to whats the real issue. This issue consumed around 3 days of my time. Still i didn't get any idea about why its happend like this.

If anybody have an idea, please save me guys.....

Answer 1

When this kind of thing happens to me it is either:

a) Because the product page is loading some extra scripts that aren't present on the home page. In this case, study the page source of the product page and check all the scripts that are loaded and all the inline scripts. Compare this to the page source for the home page being very careful to distinguish between different versions of jQuery and ensuring that jQuery is always .noConflict() so that Magento's prototype.js can own $. Maybe the home page has some other module that loads a different version of jQuery before or after your Quick Look scripts.

Or

b) Because some HTML element that the script needs is not present on the HTML page. So for example the product page might have a DOM element <div id="my-special-quick-look-box"> that the JavaScript will reference, but on the home page maybe this element is missing or in an unexpected ancestor-child relationship. Or, the div is present but the CSS means it has no height or is missing some property that the JavaScript is trying to reference.

Or

c) If all the JavaScript is combined into one file, it changes the running order and often some DOM element that will be there later is not there when the script is run. So if you have combined JavaScript take care over the running order and use the DOM events to know what has loaded when and then run the JavaScript at the right time.

That is my experience. Maybe it will help you find the bug.