Question

我必须在这里错过一个非常简单的事情，因为它看起来很明显......我无法相信我在网上找不到任何东西！

我正在尝试使用jQuery移动库来制作我的网站的移动视图。

我的页面中有三个页面（数据角色）。两个用静态内容，第二个用内容我希望用ajax加载。主页上有其他两个页面的链接：

<div data-role="page" id="home">
    <div data-role="header" id="header">
        <h1>the header</h1>
    </div>
    <div data-role="content">
        <a href="http://absolutepathtomyserver/homepage#highlights" data-role="button">highlights</a>
        <a href="http://absolutepathtomyserver/updatePlaylistTemplate#playlist" data-role="button" rel="external">playlist</a>
    </div>
</div>

<div data-role="page" id="highlights">
    <div data-role="content">
        <p class="center">My static content</p>
    </div>
</div>

<div data-role="page" id="playlist">
    <div data-role="content"><!-- TO BE FILLED FROM AJAX! --></div>
</div>

根据我对我阅读的许多教程的理解，默认情况下，除非另有说明，否则所有href链接都会执行ajax调用，但它无法正常工作。当我点击突出显示链接时，页面会像预期的那样滑动而不加载任何其他页面，因为它是同一页面。这里一切都很好。但是当我点击播放列表页面时，会执行幻灯片动画但是从不进行ajax调用，因此播放列表的内容永远不会被填充。请注意，我监视网络呼叫，但是当我点击链接时没有进行。

我错过了什么？

这是我的绝对电话吗？我使用标记基本URL来获取静态内容，因此链接在我的所有应用程序中都必须是绝对的。

我是否需要使用.bind方法？

我是否需要手动进行ajax调用？我可以做到，但从我看来它似乎是移动缓存中的href链接原生...

Answer 1

jQuery Mobile ajax-link处理适用于文档中尚未指定的伪页面。如果您想从home伪页面上的链接ajax加载页面，则忽略文档中的playlist伪页面。 jQuery Mobile将转到链接中指定的URL，获取data-role="page"元素中的所有内容，自动将其添加到dom，并转换到新添加的页面。

另一种方法是在显示playlist页面时通过ajax调用加载数据：

$('#playlist').bind('pageshow', function () {
    $.get('url_to/get.php', function (data) {
        $('#playlist').find('[data-role="content"]').html(data);
    });
});

上面的示例每次显示时都会在data-role="content"伪页面中的playlist元素中重新加载html。您可以使用pagecreate或其中一个jQuery Mobile events。

Answer 2

选项2有一点点tweeking。我不知道为什么但是原样，代码中的回调函数看起来太快了，因为没有内容被填充，尽管内容是从后端获取的。我可以在网络检查员看到这个电话。另外在第二个选择器中缺少“'”。

以下是工作代码：

$('#playlist').bind('pageshow', function () {
    $.ajax({
        url: 'updateplaylist.html',
        success:function(data, textStatus, jqXHR){$('#playlist').find('[data-role="content"]').html(data);}
    }); 
});

我仍然想知道为什么选项1没有采用正确的网址。我也害怕手动执行我的ajax调用我将跳过jquery移动框架的默认微调器。在当地它太快我无论如何都看不到它。

jQuery mobile ajax没有加载

2 个答案: