StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow do I make an AJAX call only once on JQuery.hover()?
text
Body
copied!<p>I would like to display the results of an AJAX call in a div when the user hovers over it (i.e. replace the div contents with the results of the AJAX call). The basic functionality is to replace a dot on the page with a circle that contains content from the server when the user hovers over the dot, and show the dot again when they stop hovering. There may be many dots on the page, each with different circle content on hover.</p> <p>I have it working, but I notice that the AJAX call is getting repeatedly called while the user is hovering over the given div. How can I prevent repeated calls? </p> <p>I have tried various usages of .one and .unbind('mouseenter', 'mouseleave') but haven't gotten it to work right yet.</p> <p>Here's what I have right now (the hover behavior works right for the user but causes repeated calls to the backend). </p> <pre><code><div class="box1" s='<%=value1 %>' t='<%=value2 %>'> <div id="circle" style="display: none;"> </div> <div class="dot" id="dot"> <img src="orangeDot.png" /> </div> </div> </code></pre> <p>and the script:</p> <pre><code><script type='text/javascript'> $(document).ready(function () { $(".box1").hover(function () { var source = $(this).attr('s'); var target = $(this).attr('t'); $('#dot').attr("style", "display: none;"); $('#circle').hide().load('/GetCircle?s=' + source + '&t=' + target).show(); }, function () { $('#circle' + divid).attr("style", "display: none;"); $('#dot' + divid).attr("style", "display: inline-block;"); }); }); </script> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload