1

Web アプリ POS 用の iPhone スタイルのメニューがあります。[クライアント] ボタンを押すと、すべてのクライアントを含むページが表示されます。これは、Java サーブレットへの ajax 呼び出しを行って作成されます。メイン ページで load() 関数を使用します。 ajax と UL タグを含む jquery コードを含むスクリプトを使用して GetCustomers.html ファイルを取得するには、メイン ページでそれを呼び出す (ロードする) と、firebug デバッガーを使用するときに UL とそれぞれ生成された LI のみをフォーマットしますトリガーのブレークポイント('create'); これは「pagebeforeshow」関数内の最後の命令です。しかし！デバッグせずに実行すると、フォーマットとスタイルが設定され、2ミリ秒表示され、jquery-mobile Listviewスタイルなしで表示されます。$(this).trigger('create'); を使用しています。と that.listview('refresh'); それでもうまくいきません...何か提案はありますか？

メインページのコードは次のとおりです。

$(document).on("pagebeforeshow", "#pagewelcomeclientes", function(){
  if( navigationInitialized == 'X'){
    var newItems = '<li data-role="list-divider">Page Options</li>';
    newItems += '<li><a href="#" class="time">Time</a></li>';
    newItems += '<li><a href="#pageclientenuevo" id="botonclientenuevo" data-icon="plus" class="clientenuevo" data-transition="fade">Agregar Cliente</a></li>';
    $(".pageOpts").empty();
    $(".pageOpts").append(newItems).listview("refresh");

    $.ajaxSetup ({  
        cache: false  
    });  

    var loadUrl = "GetCustomers.html";
    $("#contentwelcomeclientes").load(loadUrl,function(){
    BringClientes();

    $(this).trigger('create');



    });

    var list = $('ul[data-autodividers="true"][data-sort="true"]');

    list.each(function (i, item) {

      var that = $(item);

        // Gel all the list items into an array (excluding te dividers)
        var lis = that.find('li').not('.ui-li-divider').get();

        // Sort the list items alphabetically, descending
        lis.sort(function (a, b) {
            var valA = $(a).text(),
                valB = $(b).text();
            if (valA < valB) {
                return -1;
            }
            if (valA > valB) {
                return 1;
            }
            return 0;
        });

        // Remove all list items
        that.empty();

        // Rebuild the list with the ordered items
        $.each(lis, function (i, li) {
            that.append(li);
        });

        // Refresh/rebuild the listview
       that.listview('refresh');

    }); 

  $(this).trigger('create');

  }

});

呼び出された HTML は次のとおりです。

    <script type='text/javascript'>
        BringClientes = function() {

            $.ajax({
            type: "POST",
            url: "GetCustomers",
            dataType: "json",
            success: function (data) {
                if (data.Customers.length) {
                    $.each(data.Customers, function (i, data) {
                        var temp = null;    
                        var temp = "#cd-dropdown";
                        var temp = temp+data.msg_id;
                        var msg_data = 

                        '<li><a href="#">'+data.first_name+'</a><a href="#paginaclientesolo2"></a></li>';
                        $(msg_data).appendTo("#juntar");

                    });

                } else {
                    $("#content").html("No Results");
                }
            }
        });


    }

    </script>

  <ul   data-role="listview" 
        data-inset="true" 
        data-filter="true"
        data-autodividers="true" 
        data-sort="true" 
        data-theme="c"
        data-divider-theme="c"
        data-split-icon="grid" 
        data-split-theme="d"
        id="juntar"
        >

   </ul>

2ページ目でスクリプトを2回実行していると思います。修正しようとしているのは、関数に名前を付けてから1回だけ呼び出すことですが、それでも機能しません...サンプル画像が必要な場合は送信できますメールで、これは私の最初の質問であり、stacky では画像をアップロードできません...

前もって感謝します！！=)

4

1 に答える 1

0

次の行 $(document).on("pagebeforeshow", "#pagewelcomeclientes", function(){});を次のように変更しましょう

$('#pagewelcomeclientes').on('pagebeforeshow',function(event){
   // your code goes here
});

また$(this).trigger('create');、これをに変更して$('#pagewelcomeclientes').trigger('create');、何が起こるかを見てください

サービスが 2 回呼び出されていると思われる場合は、 を使用する.html()よりも を使用することをお勧めします.append()。

以下のようにスクリプトを変更できます

$.ajax({
        type: "POST",
        url: "GetCustomers",
        dataType: "json",
        success: function (data) {
            if (data.Customers.length) {
            var myListstring = "";
                $.each(data.Customers, function (i, data) {
                    var temp = null;    
                    var temp = "#cd-dropdown";
                    var temp = temp+data.msg_id;
                          myListstring += '<li><a href="#">'+data.first_name+'</a><a href="#paginaclientesolo2"></a></li>';
                  });
                  $("#juntar").html(myListstring);
                  $("#juntar").listview();

            } else {
                $("#content").html("No Results");
            }
        }
});

.load()代わりに、ページ自体でサービスを呼び出してリストビューをレンダリングすることができます。これにより、非常に読みやすいコードが生成されます。

これにより、どこかで修正に近づくことができることを願っています。

于 2013-03-06T04:34:48.567 に答える