Question

Since I’m spending now about a week in solving a problem I decided to kindly ask in this community if someone can help me or at least give me a clue before the story of falling down gets true 🙂

I’m programming a dynamic page in Python which generates HTML Output where a form is submitting its values to the generating Python script itself – that works very well – using JQuery Mobile on the Client side.
I do use a multi-page Layout where 5 Pages contain a form with sliders.

I want that all sliders trigger a cgi script (which is the Python script itself).
I did this first with the following code in each form:

<form action="**scriptname**" method="get" name="raum1" id="f_raum1">

<input type="range" name="slider_r1l" id="slider-1" value="**bfout1**" min="-70" max="12" data-theme="b" data-highlight="true" data-track-theme="a" onchange="document.getElementById('f_raum1').submit()"/>

(the xxx Values will be replaced by python before output to the browser)

The Problem is, that the onchange is triggered before I complete my slider value change (means that I’m still on the way on the slider to change the values) since even a small change triggers the cgi request.
I want to do that with vmouseup so that the trigger becomes true when I release the finger or mouse from the device.

I tried this in my html header but I don’t get it to work (surely cause of my lack of Javascript knowledge) and removed the onchange within the input tag:

<script type="text/javascript">
var in = getElementsByTagName("INPUT");
$(in).bind('vmouseup', function () {
self.document.submit();
 });
</script>

Where is my Problem? This should bind all input tags to the vmouseup function?

Answer 1

The mouse is interacting with the graphical components, not the input box. You could bind to the -ui-slider:

$('#slider-1').siblings('.ui-slider').bind('vmouseup', function () {
  /* Do submit */
});

You got a more detailed description of how to bind slider events here:
jQueryMobile: how to work with slider events?