Search jQuery

jQuery Forum

jQuery Mobile

Søren did..

Help with $.mobile.changePage(); not working as intended

in jQuery Mobile • 9 years ago

I've created a mobile app were i have about 6 diffrent html pages atm they are all linked by:

href="archive.html" rel="external" id="archive" data-role="button">Arkiv</a>

Later i found out that setting rel="external" is not the correct way to do links to other pages if the pages are all inside the same domain. Also if rel="external" is set then i cant do page transitions which i need. Then i found this:

$.mobile.changePage('#welcome.html',{transition:'slide'});

when i use the changePage it changes page to a white screen, where i can see text from my menu buttons and nothing ells^^.

So my question is why am i getting this whitescreen?

Replies(6)

watusiware

Re: Help with $.mobile.changePage(); not working as intended

9 years ago

Do you have each page in it's own document?

If so (and I recommend this way, not all pages in one document), then just give $.mobile.changePage() a URL in the first parameter, not an ID.

Søren did..

Re: Help with $.mobile.changePage(); not working as intended

9 years ago

Hi watusiware thx for the reply

Yes i do have each of my pages in there own doc's, you say i should do this instead?

$.mobile.changePage('welcome.html',{transition:'slide'});

Because i tried that to and that aint working either, or well it loads a new page but without any JS's or css's attached to it.

my structure atm is all pages got there own .html and they all got there own head's were i set .css's and JS's (all pages got the required Jquery JS's and css's + they each got there own JS were i got all functions for that specific page) etc

<script src="generalFunctionsJS.js" type="text/javascript"></script>

Is this the correct structure to have? if so what am i doing wrong?

watusiware

Re: Help with $.mobile.changePage(); not working as intended

9 years ago

Because i tried that to and that aint working either, or well it loads a new page but without any JS's or css's attached to it.

You're doing something wrong then. Anybody's guess without a concrete example.

my structure atm is all pages got there own .html and they all got there own head's were i set .css's and JS's (all pages got the required Jquery JS's and css's + they each got there own JS were i got all functions for that specific page) etc

All pages should have *identical* <head> sections, other than <title>. You *cannot*

load different JS/CSS in <head> of different pages.

If you do need to have different JS on different pages, it should be included at the end of the

<div data-role="page">. I don't particularly recommend this. In most cases, you are making

things less efficient by doing so, not more.

We can't show you want you are doing wrong if you don't show us what you did.

Søren did..

Re: Help with $.mobile.changePage(); not working as intended

9 years ago

Ok ill show you my first 3 html's.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
var checkUser="admin";
function onDeviceReady() {
/*if the stored username is = the correctusername, it loads the welcome page if not it loads the login*/
if(window.localStorage.getItem("user") === checkUser){
window.open("welcome.html", "_self");
} else {
window.open("login.html", "_self");
}
}
</script>
</head>
<body onload="onDeviceReady()">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile.theme-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-2.0-original.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-fa.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="buttonTapDelayJS.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="loginJS.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<link href="menuStyle.css" rel="stylesheet" type="text/css"/>
</head>
<body onload="loadLogin();">
<div data-role="page" id="login">
<div data-role="content">
<ul data-role="listview">
<div align="center" data-role="content">
<img src="icon.png" alt="">
</div>
<div data-role="content">
<label for="textinput">Indtast brugernavn</label>
<input type="text" name="textinput" id="textinput" value=""/>
</div>
<div data-role="content">
<label for="passwordinput">Indtast adgangskode</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</span> </div>
<div data-role="content">
<div><a href="#" data-role="button" onClick="saveLogin();myFunction();">Login</a></div>
</div>
<div data-role="content">
<div><a href="#" data-role="button" data-icon="info" data-theme="b" onClick="infoPopup();"></a></div>
</div>
</ul>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile.theme-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="buttonTapDelayJS.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="javaIndex.js" type="text/javascript"></script>
<script src="myJavaScript.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<link href="menuStyle.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div data-role="page" id="welcome" data-theme="b">
<script src="menuContent.js"></script>
<script src="menuButton.js"></script>
<div data-role="content">
<ul data-role="listview">
<div align="center" data-role="content">
<img src="icon.png" alt="sadf">
</div>
<div data-role="content" align="center">
<p>Pris Match er nu aktiv. Det betyder, at du nu kan sikre dig et billån. Til den bedste pris og på de bedste betingelser.</p>
</div>
<div data-role="content">
<div><a href="# data-role="button" rel="external" style="width:300px" onClick="prisMatch();">Gå til pris match</a></div>
</div>
</ul>
</div>
</div>
</body>
</html>

If you need more info to be able to help me then ask away

thx for the help you have given so far.

Søren did..

Re: Help with $.mobile.changePage(); not working as intended

9 years ago

Hi i now moved all javascripts and css's to my index page. Now i see a proper page transition + my pages loads, BUT without any javascripts/css's attached to it? how to fix this?

EIDT: now i started a new project and did was you instructed and now it works^^ BIG Thanks

watusiware

Re: Help with $.mobile.changePage(); not working as intended

9 years ago

I assume you changed some things since posting the above, since you say it now works. ;)

The first page you showed has NO JQM JS or CSS, and needs it.

On the other two pages, you're loading the CSS incorrectly. If you are using a theme, you need to load theme and then structure in that order. But you are also loading the normal, "combined" CSS. Do not load this if you are loading theme and structure.

Top Reply

Response title

Attachments

jQuery Forum

Help with $.mobile.changePage(); not working as intended

Replies(6)

Re: Help with $.mobile.changePage(); not working as intended

Re: Help with $.mobile.changePage(); not working as intended

Re: Help with $.mobile.changePage(); not working as intended

Re: Help with $.mobile.changePage(); not working as intended

Re: Help with $.mobile.changePage(); not working as intended

Re: Help with $.mobile.changePage(); not working as intended

Statistics

Tags

Actions