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

【问题标题】：Load Page content before page Load JQUERY Mobile在页面加载 JQUERY Mobile 之前加载页面内容
【发布时间】：2014-07-21 23:02:52
【问题描述】：

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

基本上，我正在创建一个 web 应用程序，在单击主页（索引）上的按钮时，它会调用第二个页面（check.html）。在加载该页面之前，我正在对返回 json 对象的服务器进行 ajax 调用，然后使用该对象生成一个表。（请看下面的代码。

然后问题是，当我点击时，我进入页面（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!');
            }
        });

    }
  });

【问题讨论】：

标签： jquery ajax html jquery-mobile

【解决方案1】：

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

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

如果这两个中的任何一个是正确的，那么您就是以错误的方式执行此操作。

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

当您启动刷新时，该页面不会完全加载到 DOM 中，因此会从页面 HEAD 初始化 JavaScript。

阅读更多关于这个here + 你会发现几个解决方案。

【讨论】：