Databases
StackOverflow2013
Postsdbo
POjquery slider in dropdown menu item causing too many events
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery slider in dropdown menu item causing too many events
    text
    copied!<p>I am using a jQuery slider in a dropdown menu item. When I click on the menu item, a dropdown opens with a slider. User is expected to drag one of the slider handles. From that point onwards, any mouse movement on that page causes a slider event and a callback. This continues until I click someplace else on the page, effectively rolling back the menu dowpdown.</p> <p>Is this behavior normal? How can I have the slider change events stop once the user has released the slider handle? I have a page that reloads from a database whenever the user changes the slider. This is causing excessive load on the database.</p> <p>I am using jQuery UI with bootstrap. You can see example at <a href="http://jsfiddle.net/Sh5A5/2/" rel="nofollow">http://jsfiddle.net/Sh5A5/2/</a> </p> <p>Here is the JS:</p> <pre><code>islide = 0; $("#XYZ").text("DDDDDxD"); $("#XYZ").append("&lt;b class=caret&gt;&lt;/b&gt;"); $("#slider-range").slider({ range: true, min: 0, max: 500, values: [75, 300], slide: function (event, ui) { alert("hello #" + ++islide); $("#XYZ").html("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1) + " &lt;b class='caret'&gt;&lt;/b&gt;"); } }); </code></pre> <p>and html:</p> <pre><code>&lt;div class="nav dropdown"&gt; &lt;a id="XYZ" data-toggle="dropdown" class="btn btn-primary" href="#"&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#"&gt; &lt;p&gt;Range: 0 to Inf&lt;/p&gt; &lt;div id="slider-range"&gt;&lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>I tried the same without bootstrap. It looks ugly but behaves just the same. Is there a better alternative?</p> <p>Thanks</p>
 

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