Receiving events from slider event after page change in jQuery Mobile

Question

In a PhoneGap app, I navigate to a html page via the $.mobile.changePage() function.

The target page contains a slider input element.

I want to compute the selected value after a change of the slider, but I cant figure out how to receive the events.

I looked up the samples of the jQM demo page, but it's not working.

Here is the code of the target page containing the slider element:

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
  <meta name="format-detection" content="telephone=no" />

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

  <script type="text/javascript" src="../cordova/cordova-2.7.0-android.js"></script>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  //WRONG RECEIVING SCRIPT?
  <script type="text/javascript">
    $("#volume-slider").on("stop", function (event) {
      var value = event.target.value;
      alert("User has finished sliding my slider, final value: " + value);
    });
  </script>

</head>
<body>
  <div id="homeContainer" data-role="page">
  <div data-role="content">
        <label for="slider-fill">Lautstärke:</label>
        <input id="volume-slider" type="range" name="slider-fill" value="50" min="0" max="100" data-highlight="true" />
  </div>
  </div>
</body>
</html>

Could it be that I have to place the receiving script somwhere else? Because it seems not to be executed.

Thank you, Max

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

You have several errors in your code:

Working example: http://jsfiddle.net/Gajotres/JCdGA/

$(document).on('pageinit', '#homeContainer', function(){ 
    $(document).on( "slidestop",  "#volume-slider" ,function( event, ui ) {
        alert('Slide Stop!');
    });       
});

If you want to bind an event you must do it during the correct page event, in this case pageinit is used.
slidestop is a correct event to detect end of slider movement.
If you are using multiple HTML page format and if this page is not an initial HTML this javascript will be discarded. When jQuery Mobile loads new HTML pages it loads only BODY content and discards the rest. Read more here.

edited May 23 '17 at 11:43

Community

1
1

answered May 23 '13 at 12:06

Gajotres

57,309
16
102
130

Thanks, this solution seems plausible. You are right, I'm using multiple HTML pages. Therefore I will have to put the JS into a common JS-file which gets loaded at the initial page. Is that correct? But if I do so, the #volume-slider is not available in the DOM at the time when JS is loaded. How can i deal with that? – tvoi May 23 '13 at 12:29
My code handles that. Take a look how slidestop is binded. It is called a delegated binding. Basically it doesn't matter if elemenet exist or not when you bind an event. Because you are binding it to the document object and when time comes it will look for #homeContainer. – Gajotres May 23 '13 at 12:32

Receiving events from slider event after page change in jQuery Mobile

1 Answers1