Question

I have a need to have a multi-page html, with each page containing an identical toggle. When the user changes a toggle on one page, all the toggles on the other pages should change (or at least change on loading the other pages).

I’ve created a Fiddle to illustrate a simple scenario, with a two page example and identical toggles on each page. I’d LIKE to be able to change the toggle on page 2 by toggling the toggle on page 1
http://jsfiddle.net/vSr99/

I’ve tried a number of methods, and yes have included a refresh after attempting to manipulate with javascript, but have not even come close, no doubt due to my programatically challenged nature :-/

If anyone can suggest a simple solution I’d much appreciate it!

Thx

Answer 1

try setting a global attribute when the button is clicked and store this on $(‘html’) like so:

 $('html'). attr('toggleIs',true);

then you can check for this on pagebforeshow and add the toggled state to the buttons on all new pages being pulled into view depending on the button state.

EDIT
Here is a jsfiddle (ignore the first alert);

Here is the html:

$(document).on('change', '.your_select', function(){
  // set
  if( $(this).find('option:selected').val() == "on" ){
       $('html').data('toggle', 'on');
       } else {
       $('html').data('toggle', 'off');
       }
  });

$(document).on('pagebeforeshow', '.ui-page', function(){

  var that = $(this).find('.your_select');
  // clear
  that.find('option').removeAttr('selected');
  // reset
  if($('html').data('toggle') == "on" ){
      alert("should be on")
      that.find('select option[value="on"]').attr('selected', 'selected')
      } else {
        alert("should be off")          
        that.find('option[value="off"]').attr('selected', 'selected')
        }
 // refresh slider
 ... 
 });

please note:

• took me a while to see you where using jquery 1.6.4, so my on-bindings didn’t work. If you want to keep, you need to use live for the bindings to also capture pages being pulled in.
• I gave a class to all sliders, to set them together
• I cannot get the JQM slider(‘refresh’) to work on the slider or any parent element… you will have to figure that out by yourself, but the synchronizing is working 🙂