ajax call looping

Question

If you could take a look over this page http://www.crimesolutionsstore.com/surveillance-system-components/microphones.html

and hover the mouse the Quick View....you'll notice that the video seems to be flashing (the Chrome's consol says the ajax call keeps repeating itself)

Do you have any idea why?

This is the respective html section

<div class="float-left product-item-image center" id="div0" onmouseover="quick(1498,0);disp(1498,0);return false;" onmouseout="hide(1498,0);return false;">
    <iframe frameborder="1" id="ebox10" width="1%" height="1%" bgcolor="#808080" style=""></iframe>

<div style="" class="valinfo" id="s0">

Styles removed to keep it cleaner

Answer 1

The mouseover event is constantly firing and loading ajax queries, which then sets the html of the element with id "div0", which results in the flashing youtube video.

The repeated firing of ajax queries is due to child element of "div0", "s0", which contains the video and the surrounding box. This can be viewed in firebug after running:

quick(30292,0);disp(30292,0)

Once in the console.

To fix this, you can add an attribute to "div0" during the mouseover event handler, load ajax only when the attribute is not set, and clear the attribute upon mouseout.