Passsing slider values between pages in JQuery Mobile

I'm trying to pass form slider values between pages so that the changed settings can be used in the target page. For that I'm just accessing the DOM on the same page as explained in the answer here.

Here is my sample code:

<!DOCTYPE html>
<html>    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Multi-page template</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

        <script>
            $(document).on('pageinit', '#review', function() {
                $('form').submit(function() {
                    first_count = $('#first_slider').val();
                    second_count = $('#second_slider').val();
                    $.mobile.changePage('#front');
                    return false;
                });
            });
            $(document).on('pageinit', '#front', function() {

                $('#first_count').text('' + first_count);
                $('#second_count').text('' + second_count);

            });
        </script>
    </head>
    <body>

        <!-- ======================== -->
        <div data-role="page" id="review" data-theme="a">

            <div data-role="header">
                <h1>Review</h1>
            </div>
            <p>
                Review content
            </p>

            <div data-role="content" data-theme="a">
                <form>
                    <label for="first_slider">First:</label>
                    <input type="range" id="first_slider" value="60" min="0" max="100" />
                    <label for="second_slider">Second:</label>
                    <input type="range" id="second_slider" value="60" min="0" max="100" />
                    <input type="submit" value="Submit" />
                </form>
            </div>

        </div>

        <!-- ======================== -->
        <div data-role="page" id="front" data-theme="a">

            <div data-role="header">
                <h1>Front</h1>
            </div>

            <div data-role="content" data-theme="a">
                <p>
                    Front content
                </p>

                <p id='first_count'></p>
                <p id='second_count'></p>

                <p>
                    <a href="#review" data-role="button">Main</a>
                </p>
            </div>
        </div>
    </body>
</html>

This seems to work the first time and the changed setting would show on the 'front' page, but not on subsequent page calls. I tried other JQM page events than 'pageinit' but can't get this to work.

I played around with your example and got it working. I used this info from the docu

Form buttons

For ease of styling, the framework automatically converts any button or input element with a type of submit, reset, or button into a custom styled button — there is no need to add the data-role="button" attribute. However, if needed, you can directly call the button plugin on any selector, just like any jQuery plugin:
 $('[type="submit"]').button();

which results in this script

<script>
    $('[type="submit"]').bind( "click", function() {
      first_count = $('#first_slider').val();
      second_count = $('#second_slider').val();
      $('#first_count').text('' + first_count);
      $('#second_count').text('' + second_count);
      $.mobile.changePage('#front');
      return false;
    });
</script>

complete corrected version of your example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Multi-page template</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
  <div data-role="page" id="review" data-theme="a">
    <div data-role="header">
      <h1>Review</h1>
    </div>
    <p>
      Review content
    </p>

    <div data-role="content" data-theme="a">
      <form>
        <label for="first_slider">First:</label>
        <input type="range" id="first_slider" value="60" min="0" max="100" />
        <label for="second_slider">Second:</label>
        <input type="range" id="second_slider" value="60" min="0" max="100" />
        <input type="submit" value="Submit" />
      </form>
    </div>
  </div>

  <!-- ======================== -->
  <div data-role="page" id="front" data-theme="a">
    <div data-role="header">
      <h1>Front</h1>
    </div>

    <div data-role="content" data-theme="a">
      <p>
        Front content
      </p>

      <p id='first_count'></p>
      <p id='second_count'></p>

      <p>
        <a href="#review" data-role="button">Main</a>
      </p>
    </div>

    <script>
      $(document).bind('pageinit');
    </script>
  </div>

  <script>
    $('[type="submit"]').bind( "click", function() {
      first_count = $('#first_slider').val();
      second_count = $('#second_slider').val();
      $('#first_count').text('' + first_count);
      $('#second_count').text('' + second_count);
      $.mobile.changePage('#front');
      return false;
    });
  </script>
</body>
</html>

screenshot

来源：https://stackoverflow.com/questions/13172181/passsing-slider-values-between-pages-in-jquery-mobile

标签

jquery-mobile

slider