jQuery Mobile rendering problems with content being added after the page is initialized

Question

I\'m using jQuery Mobile and Backbone JS for a project. It\'s mostly working, using jQuery Mobile\'s event \'pagebeforeshow\' to trigger the correct Backbone View. In the Ba

Answer 1

I'm not sure if this helps but when adding dynamic elements I was using .page() in the sucess ajax call itself (example here and here) but I found that it was not working as expected. I found that in the ajax call it's better to refresh the element (if it's a form element) to use these documented methods:

• Checkboxes:

  $("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
  

• Radios:

  $("input[type='radio']").attr("checked",true).checkboxradio("refresh");
  

• Selects:

  var myselect = $("select#foo");
  myselect[0].selectedIndex = 3;
  myselect.selectmenu("refresh");
  

• Sliders:

  $("input[type=range]").val(60).slider("refresh");
  

• Flip switches (they use slider):

  var myswitch = $("select#bar");
  myswitch[0].selectedIndex = 1;
  myswitch .slider("refresh");
  

and for adding a non-form element use .page()