CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
BlinkyBill
BlinkyBill

Reputation: 397

JQuery mobile form loses formatting after first view

I have a page in JQuery mobile, which contains a form. The form has both static elements (defined in the html) and dynamic elements (created through script at runtime). The first time I go to my page, it renders correctly, with the JQuery mobile formatting. If I go back, then open the form again, all formatting of dynamic elements is lost. I have to reload the page to get my elements looking correct again.

My suspicion is that the DOM is being messed up somehow. I'm calling empty() on the parent element holding the dymanic content, so there shouldn't be duplicate elements in the DOM.

Have reproduced this on both Chrome (windows) and the Andriod 2.3 browser.

Below is a simplified version of what I'm doing. In the real application, the elements come from a database, so most form views may contain different elements. Hence, they need to be re-created each time.

To see the behavior,

  1. click the "Show form" link,
  2. click the back button,
  3. then click the "Show form" link again. You will notice the formatting is gone.

Any ideas would be greatly appreciated

Fiddle: http://jsfiddle.net/tj4yF/1/

Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <meta content=" initial-scale=1.0; maximum-scale=1.0;user-scalable=0;" />
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
             <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
                <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
                <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

                <script>
                    var g_aElementList = [];
                        g_aElementList.push( "<label for='ta'>General comment</label><textarea name='ta' id='ta' rows='3'></textarea>" );
                        g_aElementList.push( "<label for='num'>My Number</label><input type='number' name='num' id='num'/>");
                        g_aElementList.push( "<label for='chk'>My Checkbox</label><input type='checkbox' name='chk' id='chk' value='true'/>");

                    $("#pnlPage2").live("pagebeforeshow", function(event, ui) {

                        var jContainer = $("#elementContainer");

                        for( var cI=0; cI<g_aElementList.length; cI++ ) {
                            jContainer.append( "<li data-role='fieldcontain'>" + g_aElementList[cI] + "</li>" );    
                        }

                        jContainer.page();


                    });

                    $("#pnlPage2").live("pagehide", function(event, ui) {
                        $("#elementContainer").empty();
                    });

                </script>
        </head>
        <body>
            <div data-role="page" id="pnlPage1">
                <div data-role="header"> 
                  <h1>Page1</h1> 
                </div>
                <div data-role="content">
                    <a id="pnlTest" class="panel" href="#pnlPage2">Show form</a>
                </div>
                <div data-role="footer"> 
               </div>
            </div>
             <div data-role="page" id="pnlPage2">
                <div data-role="header"> 
                  <h1>Page2</h1> 
                </div>
                <div data-role="content">
                    <form id="frmTest">
                        <ul data-role="listview" data-inset="true" data-theme="c">
                            <div id="elementContainer"></div>
                        </ul>   
                    </form>
                </div>
                <div data-role="footer"> 
               </div>
            </div> 

        </body>
    </html>

Upvotes: 2

Views: 1900

Answers (1)

Arend
Arend

Reputation: 3761

Not sure what's going wrong. But I do feel that perhaps deleting and adding new dom elements is not really nescesairy. Also you may place everything in the document.ready wrapper to prevent errors.

Somehow there's a problem with #elementContainer being emptied. A workaround is do dynamically create it and afterwards delete it.

Edit: Now it should be working without the hide/show

Fiddle: http://jsfiddle.net/kkyWg/1/

Code:

$(document).ready(function () {
    var g_aElementList = [];
    g_aElementList.push( "<label for='ta'>General comment</label><textarea name='ta' id='ta' rows='3'></textarea>" );
    g_aElementList.push( "<label for='num'>My Number</label><input type='number' name='num' id='num'/>");
    g_aElementList.push( "<label for='chk'>My Checkbox</label><input type='checkbox' name='chk' id='chk' value='true'/>");



    $("#pnlPage2").live("pagebeforeshow", function(event, ui) {
        $('<div id="elementContainer"></div>').appendTo("#list");

        var jContainer = $("#elementContainer");
        for( var cI=0; cI<g_aElementList.length; cI++ ) {
            jContainer.append( "<li data-role='fieldcontain'>" + g_aElementList[cI] + "</li>" );
        }
        jContainer.page();

    });

    $("#pnlPage2").live("pagehide", function(event, ui) {
        $("#elementContainer").remove();
    });
});

Upvotes: 1

Related Questions