1

我有一个用于网络应用程序 POS 的 iphone 样式菜单，当我按下客户端按钮时，它会显示一个包含所有客户端的页面，这是对 java servlet 进行 ajax 调用，我在主页中使用 load() 函数将 GetCustomers.html 文件与包含带有 ajax 和 UL 标记的 jquery 代码的脚本一起引入，当我在我的主页中调用它（加载它）时，它仅在我使用带有 with 的 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>

我认为它在第二页执行了两次脚本，我试图修复它，命名函数，然后只调用一次，但它仍然不起作用......如果你需要示例图像，我可以发送它通过邮件，这是我在这里的第一个问题，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');，看看会发生什么

如果您怀疑该服务被调用了两次，那么更好的解决方法是使用.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 回答