Question

问题

我无法在jQuery mobile中通过Ajax加载带参数的链接页面。喜欢：http://www.sampleurl.com/tool.dll?name=first&more=parameters

详细

我正在使用jQuery Mobile 1.0b3

我没有提到带有主题标签的页内导航。我打算加载另一个网页（单独的html文件）。据我所知，JQM在当前页面内搜索链接网站时应该没有问题。

在某些情况下，我必须引用一个将HTML文档作为响应返回的DLL。不幸的是，我无法使用Ajax使用jQuery Mobile访问这些页面。

举个例子：我在以下网站上 http://www.sampleurl.com/tool.dll?name=first&more=parameters

我想访问另一个这样的网站：

<a href="/tool.dll?name=second&more=parameters"> Link </a>

这不适用于启用Ajax。我必须使用属性rel="external"强制非ajax。是不是可以这样在JQM中访问带有参数的liks？我想使用内置的页面加载通知。我错过了什么？

不幸的是，我没有找到类似问题的解决方案。

代码示例

<!-- This is working, but will not get me a loading notification on mobile devices -->
<a rel="external" data-ajax="false" href="/tool.dll?name=this%20one&more=parameters">
    Link
</a>

<!-- This is not working -->
<a href="/tool.dll?&name=second&more=parameters">
    Link
</a>

<!-- Neither is this working -->
<a href="http://www.sampleurl.com/tool.dll?name=this%20one&more=parameters">
    Link
</a>

新见解（编辑）

出于某种原因，由于网站内的这一行，JQM因加载页面而停滞不前：

<input type="date" name="date" id="date" value="" />

问题是属性type="date"！使用文本字段，页面可以通过ajax加载。

页面本身可以正常使用jQuery Mobile。日期输入只是阻止页面通过ajax加载。我还没有找到解决这个问题的方法。空值属性不是问题。

Answer 1

说明

此问题与GET参数和ajax请求无关。该问题是由jQuery Mobile的datepicker插件引起的，当它包含在登录页面中时。

如果必须始终包含脚本，则需要通过以下方式禁用ajax的使用： rel="external" data-ajax="false"

解决方案

登陆页面

<!-- Do not include the datepicker script in the landing page -->
<div data-role="page" id="pg_1"> 
    <div data-role="header">
        <h1>Ajax page test with date input field</h1>
    </div>

    <div id="content_div" data-role="content">
        <p>
            <a data-role="button" href="loadme.html">To the calendar</a>
        </p>
    </div>
</div>

日历页面

<head>
    <!-- include datepicker only on the target page -->
    <!-- renamed and modified version of the datepicker experiment from JQM -->
    <script type="text/javascript" src="jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="jquery-mobile-calendar.js"></script>
</head> 
<body> 
    <div data-role="page" id="pg_2"> 
        <div data-role="header">
            <h1>Ajax page test with date input field</h1>
        </div>

        <div id="content_div" data-role="content">
            <p>
                <input type="date" name="date" value="" />
                <a data-role="button" href="index.html">Back</a>
            </p>
        </div>
    </div>
</body>

Answer 2

是的，你可以分两步：首先将你的网址划分为两个部分，直到和之前？而另一部分是后来的数据？要做到这一点，你必须使用javascript reg-expression，做一些研究。第二个在url（属性）部分使用jquery mobile中的ajax，你将使用javascript reg-expression将第一部分放入数据（属性）部分中的第二部分

Answer 3

你试过$ .mobile.loadPage吗？

您可以在此处找到有关此方法的文档

jquerymobile api methods $.mobile.loadPage

所以，你可以尝试做这样的事情：

<a href="#" onclick="loadNewContain();"> Link </a>

<script>
function loadNewContain()
{
$.mobile.loadPage('http://www.sampleurl.com/tool.dll?&name=first&more=parameters');
}
</script>

：）

Answer 4

我认为你应该尝试：

<a href="/tool.dll?name=second&more=parameters"> Link </a>

没有？＆amp; ...应该做的伎俩。 HTML无法识别？＆amp;作为有效参数。

在jQuery Mobile中通过ajax加载带参数的url

问题

详细

代码示例

新见解（编辑）

4 个答案:

说明

解决方案

登陆页面

日历页面