1

ユーザーが正常にログインしたときに、Ajaxとjsonが動的に解析することで読み込まれた複数ページのテンプレートコンテンツを表示する必要があるjQueryモバイルアプリがあります。したがって、2つの問題があります

1.これらのアプローチは、動的コンテンツ生成のためのドキュメントレディ機能でajaxを正しく呼び出しますか？

2.コンテンツが動的に生成されているとき、jQuerymobileスタイルはそれを超えていません。

これが私のコードです

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://jquerymobile.com/demos/1.3.0-beta.1/css/themes/default/jquery.mobile-1.3.0-beta.1.css" />
<script src="cordova-2.4.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).ready(function() {
        $
                .ajax({
                    url : "demourl.com",
                    type : "GET",
                    success : function(data) {
                        var msgData = $.parseJSON(data);                

                            $("<div data-role='page'>").appendTo("#pageData")
                                    .trigger("create");
                            $("<div data-role='header'>").appendTo("#pageData")
                                    .trigger("create");
                            $("<h1>Page Title</h1>").appendTo("#pageData")
                                    .trigger("create");
                            $("<div>").appendTo("#pageData").trigger("create");
                            $("<div>").appendTo("#pageData").trigger("create");                     

                    }
                });

    });
</script>
<title>Message list</title>
</head>
<body>

    <div id="pageData"></div>
</body>
</html>
4

3 に答える 3

1

残念ながら、これはうまくいきません。

jQuery Mobile が正しく機能するには、少なくとも 1 つの定義済みページが必要です。

新しいページのマークアップを強化するために trigger('create') または trigger('pagecreate') を使用していても、少なくとも 1 つの通常の jQM ページがない限り、これらの関数は失敗します。

ただし、jQM で最初の動的ページを強化する代わりに、ごまかすことができます: http://jsfiddle.net/Gajotres/smsnP/

$(document).ready(function() {
    $('<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">First Page</h3></div></div>').appendTo("body");
});
于 2013-02-28T20:14:56.873 に答える
0

あなたのページでこれをやってみてください：

 $('#pageData').page('refresh', true);

jqueryモバイルスタイルをレンダリングする要素をトリガーする必要があります。

于 2013-02-28T10:49:30.823 に答える
0

これを試してみてください、それは私のために働いて い
ます :



<head>
  <link rel="stylesheet" href="css/jquery.mobile-1.2.0.css" />
  <link rel="stylesheet" href="css/jqm-docs.css" />
  <script src="js/jquery.js"></script>
  <script>
  $(document).ready(function() {
     $.post(url,
         {param: var},
         function(data){
            if( data.success )
            {
               $("#total_marcatges").append(data.total);
               $("#marcatges").append(data.marcatges);
               $.getScript('js/jquery.mobile-1.2.0.js', function() {
                   $("#sortir span span.ui-btn-text").append("&nbsp;&nbsp;");
               });
            }else
            {
               alert("error");
            }
        },
        "json"
);

その後、jquery モバイル スタイルが適用されます。

于 2013-03-14T10:25:45.767 に答える