Passsing slider values between pages in JQuery Mobile

Question

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.

Taifun · Accepted Answer · 2012-11-03T14:30:56.393

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
enter image description here

Thanks. The theme style works fine if you bind your code inside 'pageinit' as described in [http://jquerymobile.com/test/docs/api/events.html]. And the other thing is that button() is superfluous as per your comments and the docs. — Basel Shishani, Nov 02 '12 at 20:10
Not sure how your binding worked! But we're supposed a given function to the event as we might want to bind to different events. I modified accordingly. — Basel Shishani, Nov 03 '12 at 03:04

Passsing slider values between pages in JQuery Mobile

1 Answers1

Linked