Jquery mobile fails to load styles after change page - javascript

Am creating a mobile application using jquery mobile but after loading an external page(loggedin.html) via changePage the javascript file in the external page arent loaded but only do so after refreshing the page(loggedin.html...loaded via changePage).How can the external script be loaded without page refresh
I have two sets of file:
index.html and loggedin.html.
CODE:
1.index.html
<body>
<div data-role="page" id="indexpage">
<div data-role="content">
Load page 2
</div>
</div>
<script src="custom/scripts/index.js" type="text/javascript" ></script>
</body>
The script (index.js)
$('document').ready(function(){
$('#next').click(function(){
$.mobile.changePage('loggedin.html')
});
});
2.Loggedin.html
<body>
<div data-role="page" id="loggedin">
<div data-role="content">
You are in
</div>
</div>
<script src="custom/scripts/loggedin.js" type="text/javascript" ></script>
</body>
Script(loggedin.js)
$('document').ready(function(){
$('document').on("pageshow","#loggedin",function(){
console.log('loaded');
});
});

Base on this source : http://demos.jquerymobile.com/1.3.2/faq/scripts-and-styles-not-loading.html
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways).

The solution to this problem is : on the next page that is (loggedin.html)..That is placing the script on the page after the (data-role content/footer)
<body>
<div data-role="page" id="loggedin">
<div data-role="content">
You are in
</div>
<script type="text/javascript">
$('#loggedin').on("pagecreate",function(){
console.log('loaded');
......{Continue with stuff}
});
</script>
</div>
</body>

Related

Adding a class to an element on another page [duplicate]

Hello i would like to change the DOM of an html page but from another page i tried sharing the same script between the 2 pages but it didnt work here is an illustration for what i am trying to do
1-First page
<div>
<p id="simpletext">Hello world</p>
<script src="jquery.min.js"></script>
<script src="script.js" type ="text/javascript"></script> <!-- same script file is present in the second page -->
</div>
2-Second page
<div>
<button>Click me </button>
<script src="jquery.min.js"></script>
<script src="script.js" type ="text/javascript"></script><!-- same script file is present in the first page -->
</div>
script.js
$("button").on("click",function(){
$("simpletext").css("color","blue");
});
i am trying to when i click on the button wish is located on the second page to change the color of the text on the first page
You can send messages from one page to another. At the buttons side send a message:
$("button").on("click",function(){
wondow.postMessage("show","*");
});
Then at the other page, wait for a message:
window.addEventListener("message",function(event){
if(event.data === "show") {
$("simpletext").css("color","blue");
}
});
I assume that both windows are opened on the same machine, if not, you need ajax or websockets instead and do serverside proxying.

Javascript isn't executing when including html-template

Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.

Detect changepage on jquery mobile

How can I execute code when I change page with the .changePage() function?
For example I use this code:
$.mobile.changePage( "index.html#pageTwo" );
And when pageTwo is loaded I want to do this:
alert("Test");
In your <head> .. </head> put this:
// Jquery loaded here
<script>
$(document).on("pageshow","#pageTwo", function() {
alert("Test");
}
</script>
// jquery mobile loaded here
Notes:
The code above must be placed AFTER Jquery is loaded and BEFORE jquery mobile is loaded.
The code example above assumes that your index.html page contains a div with at least the attributes of data-role="page" and id="pageTwo":
<div data-role="page" id="pageTwo"> This is page two content </div>
Jquery mobile only parses/uses anything in the <head>..</head> section of the FIRST PAGE THAT IS LOADED! To ensure that all of the code required for all pages in your mobile site are loaded, regardless of which page the user lands on first, you should structure all your pages like this:
<html>
<head>
<script src="path/to/jquery.js"> // load jquery
<script src="path/to/common.js"> // all jquery mobile page event bindings are placed in here
<script src="path/to/jquery_mobile.js"> // load jquery mobile
</head>
<body>
<div data-role="page" id="pageOne"> This is page one content </div>
<div data-role="page" id="pageTwo"> This is page two content </div>
</body>
</html>

how to refresh/reload only once after the page is loaded in jquery mobile

how to refresh/reload only once after the page is loaded in jquery mobile. because am using wow slider and when it is loaded the data is getting dynamically but the ui is not correctly getting once the page is refreshed it is getting. Can someone help me for this thanks.
I found this... This works for me. May be it will work for you also. Just include this script in your 'data-role="page" div' available in your mobile jquery page.
Below is test1.html:
<body>
test <!--This link redirects to test.html but you will see 'test.html#' at address bar that means you page is reloaded once -->
</body>
test.html:
<body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(location.hash != 'test1.html'){
location = 'test.html#';
}
});
</script>
</body>

Run script in document load

I have a dialog in jQuery and I want to show the dialog when the document loads. But I don't want to put code in <body onload="showdialog();">. I want to put javascript in the main div or the footer div that works like onload in the body event. Any way to do this?
<body onload="$('#dialog').slideDown('slow');">
<div id="dialog">Dialog</div>
<footer></footer>
</body>
I want this:
<body>
<div id="dialog">Dialog</div>
<script> show dialog code in load page </script>
<footer>
// or this place =>
<script> show dialog code in load page </script>
</footer>
</body>
You want to take a look at the ready function, like so:
$(document).ready(function() {
$('#dialog').slideDown('slow');
});

Categories