Response title
This is preview!
Move this topic
Error loading page while data parameter passed
in jQuery Mobile
•
9 years ago
Hello,
I'm trying to pass data parameter to another page in $.mobile.changePage method. But when I invoke:
$.mobile.changePage("listItems.html", { data: { items: "example data"}});
I got "Error loading page". I also tried print any helpful logs in "onpageloadfailed":
$(document).on("pageloadfailed", function (event, data) { console.log(data.errorThrown); console.log(data.xhr.responseText); console.log(data.url); event.preventDefault(); });But I've got nothing... Any tips? I would appreciate any help!
1
Replies(9)
How to ask for jQuery Mobile help
Give a complete example. Little snippets like this do not help us solve problems.
I'm guessing you might be using a multi-page document. You cannot pass parameters on links in a multi-page document.
But have to guess, because you've given us so little to go on.
Leave a comment on watusiware's reply
I'm new in jQuery Mobile. Below is my index.html site. For test purpose I wanted to load another page after some time:
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/run/cordova.js"></script>
<title></title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<script>
setTimeout(function () {
$.mobile.changePage("listItems.html", { data: { items: "example data" } });
}, 1500);
</script>
</div>
</div>
</body>
</html>
In the listItems.html i defined another page (I don't know how to read passed parameter):
listItems.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title></title>
</head>
<body>
<div data-role="page" id="items">
<div data-role="content">
</div>
</div>
</body>
</html>
Leave a comment on jaaakub's reply
I'm confused. What is the problem you are experiencing?
1. You get "Error Loading Page" when the $.mobile.changePage is run?
2. You don't know how to retrieve the page parameter?
3. Both?
If you get "error loading page" the problem is simple. The page isn't there. Maybe you mis-spelled the URL, or if you are using a server, maybe there is a problem with the server.
I notice you don't have CSS/script links in your second page. You need to have them on every page. The above should work, but only until the user tries to refresh the second page or save a bookmark. Those will not work. You need to repeat the same CSS/script links in every page. But that is not the problem above.
Leave a comment on watusiware's reply
Sorry, I haven't explained my problem more clearly.
The problem arises only if I pass data parameter - without that parameter, everything works fine. I'm not using server. I've change my example a little bit. In the code above, after button was clicked (in index.html site) I want to make transition to another page (hello.html) trying to pass some data.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/purl.js"></script>
<title>Index Site</title>
</head>
<body>
<script type="text/javascript">
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
}
</script>
<div data-role="page" id="indexPage">
<div data-role="content">
<a href="#" id="changePage" data-role="button">Change page</a>
<script type="text/javascript">
$("#changePage").click(function (e) {
e.preventDefault();
$.mobile.changePage("hello.html", {
data: { param : "value" }
});
});
</script>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
hello.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" id="helloPage">
<div data-role="content">
<!-- TODO: read passed parameterss -->
Hello!
</div>
</div>
</body>
</html>
I just wonder if that issue may be related with platform - I use jQuery Mobile to develop my PhoneGap application on Windows Phone, but I couldn't find any related problems. Without passing parameters between pages I have to keep them in storage in order to read them after the destination page is loaded. That's not the most convenient way to pass parameters for me. Or maybe there's no better way?
Leave a comment on jaaakub's reply
You still haven't stated just what the problem is. What doesn't work as you expect?
And, we know that you think it fails in some way if you do include the parameter.
You need to tell us what it does wrong.
- What do you expect to happen?
- What happens instead?
I note that you are not supplying the same JS/CSS files in the <head> of both pages. This will not work. You need to give exactly the same content for <head> on every file. (Other than <title>, which, of course, can vary.)
Don't include href="#" if you are using a .click() function. It's unnecessary, and it tells the browser to reload the current page. That's almost certainly not what you want to do. If you are using a callback, don't include an href.
OK, so if you don't include the parameter, "everything works fine".The problem arises only if I pass data parameter - without that parameter, everything works fine.
And, we know that you think it fails in some way if you do include the parameter.
You need to tell us what it does wrong.
- What do you expect to happen?
- What happens instead?
I note that you are not supplying the same JS/CSS files in the <head> of both pages. This will not work. You need to give exactly the same content for <head> on every file. (Other than <title>, which, of course, can vary.)
Don't include href="#" if you are using a .click() function. It's unnecessary, and it tells the browser to reload the current page. That's almost certainly not what you want to do. If you are using a callback, don't include an href.
Leave a comment on watusiware's reply
Ok, I've changed my content in the <head> tag. Now it looks exactly the same (except content between <title>).
My first goal is to make transition from page defined in index.html to page defined in hello.html with some data. I expect to see Hello! string from destination page. But when I try to pass that data (stored under param key) I got "Error loading page" message.
My second goal is to read passed data after page in hello.html file is loaded.
Leave a comment on jaaakub's reply
Well, as I stated earlier, if you are getting "error loading page" you have a problem with your server. You are asking for the page, and the server is giving an error response.
Can you load the page if you just go directly to the second page?
Actually, I see you are using PhoneGap, so there is no server. It is local files on the device. So, you must have the file name/path wrong.
Can you load the page if you just go directly to the second page?
Actually, I see you are using PhoneGap, so there is no server. It is local files on the device. So, you must have the file name/path wrong.
Leave a comment on watusiware's reply
Hmm, that's very strange because page is loaded correctly without that parameter, so filename must be correct. I just want to ask you one more thing - how to retrieve passed items via data parameter on the second page? Let's suppose that page is loaded correctly. I'll try to check my example on the other platform to ensure that problem may be related with Windows Phone.
Leave a comment on jaaakub's reply
It would seem this is a PhoneGap problem. You will have to check PhoneGap documentation, forums, etc. to see if there is a solution.
I'd guess that PhoneGap considers the parameter to be a part of the file name and, of course, is not finding the file once you've added the parameter.
I'd guess that PhoneGap considers the parameter to be a part of the file name and, of course, is not finding the file once you've added the parameter.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to jaaakub's question
Statistics
- 9 Replies
- 4051 Views
- 1 Followers