Load url with parameters via ajax in jQuery Mobile
Problem
I cannot load linked pages with parameters via Ajax in jQuery mobile.
Like: http://www.sampleurl.com/tool.dll?name=first&more=parameters
Details
I'm using jQuery Mobile 1.0b3
I don't refer to in-page navigation with hashtags. I intend to load another webpage (separate html file). So as far as I know there shouldn't be a problem with JQM searching the linked website within the current page.
In som开发者_C百科e cases I have to reference a DLL which is returning the HTML document as response. Unfortunately I cannot access these pages with jQuery Mobile using Ajax.
To give an example: I am on the following website
http://www.sampleurl.com/tool.dll?name=first&more=parameters
and I want to access another website like this:
<a href="/tool.dll?name=second&more=parameters"> Link </a>
This is not working with Ajax enabled. I have to force non-ajax with the attribute rel="external".
Is it not possible to access liks with parameters in JQM this way? I'd like to use the built-in loading notification for pages. What am I missing?
Unfortunately I haven't found a solution in similiar questions.
Code samples
<!-- 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>
New insights (edit)
For some reason JQM is stuck at loading the page because of this line within the website:
<input type="date" name="date" id="date" value="" />
The issue is the attribute type="date"! With an text-field the page loads fine via ajax.
The page itself is working fine with jQuery Mobile. The date-input just prevents the page from loading via ajax. I haven't found a solution for this problem, yet. The empty value attribute is not the problem.
Explanation
This issue is not related to GET parameters and the ajax request. The problem is caused by the datepicker plugin for jQuery Mobile, when included in the landing page.
If you have to include the script always, you will need to disabled the use of ajax via:
rel="external" data-ajax="false"
Solution
Landing page
<!-- 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>
Calendar page
<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>
yes you can but into 2 steps: First by dividing your url into two parts first till and before the ? and the other part which is the data which comes after the ? and to do this you have to use javascript reg-expression, do some research. Second using ajax in jquery mobile in the url (attribute) part you will put the first part you got it using javascript reg-expression and the second part in the data (attribute) part
did you try with $.mobile.loadPage?
you can find the documentation about this method here
jquerymobile api methods $.mobile.loadPage
so, you can try to do somethig like this:
<a href="#" onclick="loadNewContain();"> Link </a>
<script>
function loadNewContain()
{
$.mobile.loadPage('http://www.sampleurl.com/tool.dll?&name=first&more=parameters');
}
</script>
:)
I think you should try:
<a href="/tool.dll?name=second&more=parameters"> Link </a>
Without the ?&... that should do the trick. HTML doesn't recognize ?& as a valid parameter.
加载中,请稍侯......
精彩评论