0

以下のクエリを使用して、データベースから phonegap アプリ用に DIV を含むページを動的に作成しようとしています。これを簡単にするために、データベースには「ID」と「データ」の 2 つの列しかありません。

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 />');
}

}

基本的に、私は体を動的に次のように見せようとしています:

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

以下は私が経験している問題であり、しばらくの間ゴーグリングした後、解決策が見つかりません。

そこに緩いフォーマットで作成されたDivs（cssがありません）

body の例で示したように、div が正しい場所に入らないように、新しい div は一緒にマッシュアップされているようです (私が間違って作成しているように)。

助けてくれてありがとう。

4

1 に答える 1

1

jQuery Mobile のドキュメントは、このケースに関して非常に悪いです。私があなたを正しく理解していれば、完全に動的に生成されたページで css を更新したいと考えています。jQM のドキュメントには、この構文.trigger('create')を使用するよう記載されていますが、残念ながら jQM では機能しません。

あなたの場合、次の構文を使用する必要があります。

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

このソリューションの例を次に示します: http://jsfiddle.net/Gajotres/mpFJn/

于 2013-01-12T22:25:13.497 に答える