发表新帖
发表新帖

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

后端 未结
关注
11 1949
清酒与你
清酒与你 2020-12-14 18:54

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

相关标签:
11条回答
  • 情话喂你
    2020-12-14 19:12

    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()

    0 讨论(0)
  • 渐次进展
    2020-12-14 19:13

    For me only .page() worked (without the .page('destroy')).

    E.g.:

    $('my-control-group-id').page();

    Amnon

    0 讨论(0)
  • 忘了有多久
    2020-12-14 19:14

    I little bit off topic. I wanted to be able to stop jqm from creating first default page div on init as backbone wraps elements in divs anyway. I wanted to dynamically insert pages to the DOM and then call jqm to create its classes and widgets. I finally did this like this: 

     <head>
 <script src="jquery-1.8.3.js"></script>
 <script type='javascript'>
 $(document).on("mobileinit", function () {  
 $.mobile.autoInitializePage = false;       
 }
 </script>
 <script src="jquery.mobile-1.3.0-beta.1.min.js"></script>
 </head>
 <body>
 ....... dynamically add your content ..........

 <script type='javascript'>
 $.mobile.initializePage() 
 </script>
 </body>

    and my hole jqm config (which you put before jqm.js)

    $(document).on("mobileinit", function () {
  $.mobile.ajaxEnabled = false;
  $.mobile.hashListeningEnabled = false;
  $.mobile.pushStateEnabled = false;
  $.mobile.linkBindingEnabled = false; // delegating all the events to chaplin
  $.mobile.changePage.defaults.changeHash = false;

  $.mobile.defaultDialogTransition = "none";
  $.mobile.defaultPageTransition = "slidedown";
  $.mobile.page.prototype.options.degradeInputs.date = true;
  $.mobile.page.prototype.options.domCache = false;
  $.mobile.autoInitializePage = false;

  $.mobile.ignoreContentEnabled=true;
});

    So far Backbone and JQM been working fine.

    0 讨论(0)
  • 忘掉有多难
    2020-12-14 19:17

    It worked for me when I called .trigger('create') on the enclosing div element. See example below:

    In .html file:

    <div id="status-list" data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Choose as many snacks as you'd like:</legend>
            <input type="checkbox" name="checkbox-1a" id="checkbox-1a"/>
            <label for="checkbox-1a">Cheetos</label>
    </fieldset>
</div>

    in .js file:

    $("#status-list").trigger('create');
    0 讨论(0)
  • 悲&欢浪女
    2020-12-14 19:18

    Refreshing the whole page worked for me:

    $('#pageId').page('destroy').page();
    0 讨论(0)
  • 一向
    2020-12-14 19:18 
    $('#pageId').page('destroy').page();

    works for entire control groups that are generated, let alone radio input children.

    -Mike

    0 讨论(0)
 看不清?
提交回复
热议问题