Home/ Questions/Q 9124317
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T06:32:41+00:00

I am trying to Create pages with DIVs dynamically for my phonegap app from

  • 0

I am trying to Create pages with DIVs dynamically for my phonegap app from the database with the query below.
To keep it simple for this the database will have only 2 columns, “ID” and “Data”:

function querySuccessOrders(tx, results) {
console.log("Successful QUERY of the Table");
var len = results.rows.length;

for (var i=0; i<len; i++){ 
    $('#body').append('<div data-role="page" id="coi'+results.rows.item(i).ID+'" data-theme="b"></div>');
}

for (var i=0; i<len; i++){  
    $('#coi'+results.rows.item(i).ID+'').append('<div data-role="header" data-theme="b" id="coi_header'+results.rows.item(i).ID+'"></div>');
}

for (var i=0; i<len; i++){  
    $('#coi'+results.rows.item(i).ID+'').append('<div data-role="content" data-theme="b" id="infoGuts'+results.rows.item(i).ID+'"></div>');
}

for (var i=0; i<len; i++){  
    $('#coi'+results.rows.item(i).ID+'').append('<div data-role="footer" data-position="fixed" class="footer-docs" data-theme="b" id="coi_footer'+results.rows.item(i).ID+'"></div>');
}

for (var i=0; i<len; i++){  
    $('#coi_header'+results.rows.item(i).ID+'').append('<h1>ID #'+results.rows.item(i).ID+'</h1>');
    $('#coi_header'+results.rows.item(i).ID+'').append('<a href="#page" data-icon="home" data-iconpos="notext" id="intro" class="ui-btn-right"></a>');  
}

for (var i=0; i<len; i++){  
    $('#coi_header'+results.rows.item(i).ID+'').append('<div data-role="navbar" data-theme="b" id="coi_navbar'+results.rows.item(i).ID+'"></div>');
}

  for (var i=0; i<len; i++){  
    $('#coi_header'+results.rows.item(i).ID+'').append('<div data-role="navbar" data-theme="b" id="coi_navbar'+results.rows.item(i).ID+'"></div>');
}

for (var i=0; i<len; i++){  
    $('#coi_navbar'+results.rows.item(i).ID+'').append('<ul>');
    $('#coi_navbar'+results.rows.item(i).ID+'').append('<li><a href="#COI'+results.rows.item(i).ID+'">COI</a></li>');
    $('#coi_navbar'+results.rows.item(i).ID+'').append('<li><a href="#COP'+results.rows.item(i).ID+'">COP</a></li>');
    $('#coi_navbar'+results.rows.item(i).ID+'').append('<li><a href="#COQ'+results.rows.item(i).ID+'">COQ</a></li>');
    $('#coi_navbar'+results.rows.item(i).ID+'').append('</ul>');
}

for (var i=0; i<len; i++){  
    $('#coi_footer'+results.rows.item(i).ID+'').append('<p>footer</p>');     
}

for (var i=0; i<len; i++){
    $('#info'+results.rows.item(i).ID+'').append('ID:'+results.rows.item(i).ID+'<br />');
    $('#info'+results.rows.item(i).ID+'').append('Data:'+results.rows.item(i).Data+'<br />');
}

}

Essentially I am trying to get the body to look like this dynamically:

    <body id="body">

<div data-role="page" id="coi1" data-theme="b">
    <div data-role="header" data-theme="b" id="coi_header1">
        <h1>ID #1</h1>
        <a href="#page" data-icon="home" data-iconpos="notext" id="intro" class="ui-btn-right"></a>
            <div data-role="navbar" data-theme="b" id="coi_navbar1">

                         <ul>
                           <li><a href="#COI1">COI</a></li>
                           <li><a href="#COP1">COP</a></li>
                           <li><a href="#COQ1">COQ</a></li>
                         </ul>
            </div>
    </div>
    <div data-role="content" data-theme="b" id="infoGuts1">
           ID:1<br />
           Data: asd <br />
    </div>
    <div data-role="footer" data-position="fixed" class="footer-docs" data-theme="b" id="coi_footer1">
     <p>footer</p>  
    </div>
</div>

<div data-role="page" id="coi2" data-theme="b">
    <div data-role="header" data-theme="b" id="coi_header2">
        <h1>ID #2</h1>
        <a href="#page" data-icon="home" data-iconpos="notext" id="intro" class="ui-btn-right"></a>
            <div data-role="navbar" data-theme="b" id="coi_navbar2">
                          <ul>
                           <li><a href="#COI2">COI</a></li>
                           <li><a href="#COP2">COP</a></li>
                           <li><a href="#COQ2">COQ</a></li>
                         </ul>              
            </div>
    </div>
    <div data-role="content" data-theme="b" id="infoGuts2">
            ID:2<br />
           Data: asd <br />
    </div>
    <div data-role="footer" data-position="fixed" class="footer-docs" data-theme="b" id="coi_footer2">
     <p>footer</p>  
    </div>
</div>

Doing this for each ID

</body>

The following are problems I am experiencing and after a while of goggling around cant find solutions to:

The Divs that are created loose there formatting(they lack the css)

The new divs seem to be mashed together (almost like I am creating the incorrectly) like the divs are not going into the correct spots like I have layed out in the body example.

Thanks for any help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    jQuery Mobile documentation is really bad regarding this case. If I understood you correctly you want to refresh a css on a fully dynamically generated page. jQM documentation states to use this syntax .trigger(‘create’) but unfortunately it is not working in jQM.

    In your case you should use this syntax:

    $("#index").trigger("pagecreate");

    And here’s an example for this solution: http://jsfiddle.net/Gajotres/mpFJn/

    • 0