Question

我发现很多关于如何将页面内容动态加载到div中的问题/答案，但是，我无法加载我的内容。

基本上我正在创建一个webapp，点击主页上的按钮（索引），它会调用第二页（check.html）。在加载该页面之前，我正在对服务器执行ajax调用，该服务器返回一个json对象，然后我正在生成一个包含该对象的表。（请参阅下面的代码。

然后问题是，当我点击时，我到达页面（check.html）但内容未加载，然后当我进行刷新时，所有内容都会被加载。

我知道这是在显示页面之前加载数据，但我无法让它工作。我已经尝试了很多jquery函数（在文档就绪，加载时，没有任何工作）。

任何帮助都应该受到赞赏。

$(document).on('pagebeforeshow', '#checkPage', function(){ 

    //validate if the user has entered/save his email address
    if (localStorage.getItem("email") === null){
      $('#noEmail').show();
      $('#issues').hide();
    }else{
      $('#noEmail').hide();
      $('#issues').show();

      var email = localStorage.getItem("email");

        //ajax call to a server to get the json data
        $.ajax({
            url: 'http://landlord.tenantconnectapp.co.uk/webapp/issues.php',
            type: 'POST',
            data: {email: email},

            beforeSend: function() {
                $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
            },
            complete: function() {
                $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
            },
            success: function (result) {
                var data = $.parseJSON(result)
                var count = data.length;
                $("#count").append(count);

                var tbl_body = "";
                $.each(data, function (index, issue) {
                  var tbl_row = "";
                  tbl_row += '<th><a href="issue.html" onclick="sessionStorage.ID='+issue['id']+'">'+issue['id']+'</a></th>';
                  tbl_row += "<td>"+issue['createdDate']+"</td>";
                  tbl_row += "<td>"+issue['status']+"</td>";
                  tbl_row += "<td>"+issue['reason']+"</td>";
                  tbl_row += "<td>"+issue['summary']+"</td>";
                  tbl_body += "<tr>"+tbl_row+"</tr>";
                });  
                $("#issuesTable tbody").append(tbl_body);
                $("#issuesTable").trigger("create");
                $("#issuesTable").table("refresh");
                },
            error: function (request,error) {            
                toast('Network error has occurred please try again!');
            }
        });

    }
  });

Answer 1

这是一个疯狂的镜头，但我认为我是对的。

你没有提到这一点，但我敢打赌你的第二页的AJAX调用是放在HEAD中还是放在文件的末尾？

如果这两个中的任何一个是正确的，那么你是以错误的方式做到这一点。

简而言之，当jQuery Mobile启动时，它会将初始HTML页面加载到DOM。因为AJAX用于页面处理，所以当打开后续页面时，jQuery Mobile将仅加载data-role =＆＃34; page＆＃34; div内容，其他一切都将被丢弃，包括HEAD。最后一件事，只会加载一页。如果您有多个数据角色=＆＃34;页面＆＃34;在你的后续页面中，除了第一页之外的每一页都会像HEAD一样被丢弃。

当您启动刷新时，该页面将无法完全加载到DOM中，从而从页面HEAD初始化JavaScript。

详细了解 here +您会找到多种解决方案。

在页面加载页面内容加载JQUERY Mobile之前

1 个答案: