So I have 2 pages example page1.html and page2.html. there is a href link in from page1 to page2. But it seems that the javascript in page2.html are ignored and not called. (tried document ready, body onload did not work)
So does jquery mobile only accept the javascripts on the first page?
How do you run the javascript after the page2.html is called?
New to jquery mobile thanks.
sample code on page2.html similar to page 1:
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/imageresize.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.min.css" type="text/css" />
<script src="js/jquery.-1.10.1.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
defaultPageTransition:'none'
});
});
</script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<body>
HELLO WORLD
</body>
<script>
$(function() {
alert('testing js');
});
</script>
Everything you need to know about this problem can be found here: Why I have to put all the script to index.html in jquery mobile
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
That's why your button is show successfully but click event is not working. Same click event whose parent HEAD was disregarded during the page transition.
Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
Unfortunately you are not going to find this described in their documentation. Ether they think this is a common knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).
Based on the code you have posted:
Make sure you include:
<script src="js/jquery.mobile-1.3.1.min.js"></script>
Before:
<script>
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
defaultPageTransition:'none'
});
});
</script>
As I am sure mobileinit is part of the jquery-mobile framework.
Secondly I would strongly suggest using the directed page structure as per the jquery-mobile documentation.
One added advantage of using multiple divs(pages) in one document is that the user will not have to reload all the javascript/css on each page request which minimizes the amount of bandwidth used as well as the performance of your page.
Make sure you include required jquery lib and also u can also try another jquery mobile events..
Page transitions are used to animate the change from the current active page (fromPage) to a new page (toPage). Events are triggered before and after these transitions so that observers can be notified whenever pages are shown or hidden. The events triggered are as follows:
pagebeforeshow
You should include the jquery file in each html file using script tag as follows
<script type="text/javascript" language="javascript" src="jquery-1.6.3.min.js"></script>
Related
I have a problem with loading JavaScript in Google Chrome.
I've created the separate js file with a simple alert message and then linked it before the end of the body tag.
Google Chrome shows the alert box first then when I click 'ok' the content is loaded.
In other browsers it works fine, I mean the alert box shows at the same time as the content of the web page.
In short, Google Chrome loads the javascript first even when I put the script tag before the end of the body tag.
alert("Hello World!");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Write Your First Program</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="text-vertical-center">
<h1>Write Your First Program</h1>
<h3>JavaScript Essentials</h3>
<br>
</div>
</header>
<script src="js/scripts.js"></script>
</body>
</html>
Do you have any idea how to fix this problem?
Thanks a lot
Your problem is that your script have the tag async, which let it execute whitout taking care of the web page loading state. Remove the async tag, or replace it with defer, which execute the script after the page loading.
In order to prevent any problem with script and html/css loading times conflict, you should encapsulate your Javascript's scripts with window.onload = function() { //code here }. This will guarantee that your whole page is loaded before executing your code.
That is a problem with Chrome. The developers of chrome for some reason have still not corrected that. If you have alert or a prompt pop-up, which is the first thing that user has to interact with in your website, chrome will not load HTML until after the pop-up has been closed.
Try including jquery cdn just above your script tag in body.
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous">
</script>
This will work fine!!
I also had this problem and realized that my Google chrome was just loading the cached version of page(the one before putting my script tag near bottom).
Closing the window and reopening the page worked fine.
async and defer boolean attributes are only helpful when the script is inserted in the head portion of the page. They are useless if you put the script in the body footer like we saw above.
(Refer following article: https://flaviocopes.com/javascript-async-defer/).
I am also facing similar issue and using window.onload = funcRef; with cleared cache also does not work on my google chrome. I have tried all of this with disabling all my browser extensions but in vain.
I was finally able to, not solve, but agree upon a way around - which was - to include a
jQuery CDN
before my javascript script in the body. Hope this helps.
I have several HTML pages running Javascript and JQuery Mobile, and I want to link to them from another HTML page. My link is setup as:
Hours
and the linking page and the pages being linked to are in the same directory. However, when I access the page through this link, the JQuery Mobile theme is loaded, but any additional CSS changes or any Javascript code doesn't execute. I have several methods set to run on startup, but none execute, not even a simple alert.
When I attempt to access the page directly, everything applies properly and my code executes, but when I try to access it through my HTML link, none of it works. Is there something I am forgetting?
Thanks!
Edit: None of the code is working for any link I link to. Even a simple:
$(document).ready(function(){
alert("Hello world");
});
does not work. I have this added into the other HTML page as:
<head>
<meta charset="utf-8">
<title>Hours</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" rel="stylesheet">
<script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
alert("Hello world");
});
</script>
<style type="text/css">
* {
font-family: "Celeste Mobi Pro", Celeste, serif;
}
</style>
</head>
Neither the CSS font change nor the startup alert works. I've tried this on other HTML pages, so I think it might be the server I'm hosting it on, but I'm not sure.
Second Edit: I just tested it locally, and it works. I'm fairly certain it's the server right now, is there anything I should check?
Third Edit: I've been using the Chrome console to look at the javascript source on the pages being linked to. I have all scripts added through script tags in the head, but for some reason, none of those appear. Rather, the contents of the script tags are those from the page linking to them (and yes, I'm making sure that I'm checking the for the new page, not the old page). When I refresh the page, however, it updates and it seems to work.
According to every data that you provide us, what you are telling us should work. There's no flaw in it.
The only possible error that you may encounter may be that you are using two differents hours.html, and accessing the wrong one through your link.
This question already has answers here:
Where should I put <script> tags in HTML markup?
(21 answers)
Closed 9 years ago.
An IBM website talking about rapid web development here mentioned a useful skeleton HTML. In the template, the script inclusion is inside body rather than head. Is it a good practice? Isn't it better to put any library inside head instead?
<html>
<head>
<title>Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
<!-- The main HTML will go here -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
VS
<html>
<head>
<title>Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- The main HTML will go here -->
</body>
</html>
It is now standard for script tags to be included just before the closing of the body tag so that the script loading does not block the rest of the page loading.
<script src="myScript.js"></script>
</body>
With this, the user will not have to wait as long to see something on the page, then the javascript functionality is added.
However, there are more and more sites and "web apps" that are javascript/ajax heavy and may require the scripts to be loaded before anything is shown on the page anyway. That is less common, but that is a case where the script could be included in either location, since the visual result would be the same if javascript is responsible for creating/loading the content.
To verify: here is Google's recommendation: https://developers.google.com/apps-script/guides/html/best-practices#load_javascript_last
Also consider loading libraries from a CDN, so that you can take advantage of browser caching.
Yes / No
Yes it is good practice as the page will load faster if the code is in the ending...
It waits for the whole page to load and then loads the scripts.
Here's how:
There was this site i visited, which quickly responded to my browser's request. but when i got the response, it was some white page with some boxes and some text. and it was taking ages for the page to load. After some time some images appeared in the boxes and the text got styled.
Why?
When the page loaded the script was placed in the head. So, the script was loading and the images and the styles were in the queue. So i had to witness an ugly page while the script loads.
Alternative:
If the script was placed in the ending of the page, just before the </body> tag, the styles and images would have loaded faster so i wouldn't have to see an ugly site, then the page would load.
References:
http://developer.yahoo.com/performance/rules.html#js_bottom
http://stevesouders.com/docs/googleio-20080529.ppt
Does Google Analytics have performance overhead?
http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/
thanks for this website ;)
I am developing an iPhone app using phonegap and jquery mobile.
On my first page I make a redirection to the login.html page.
I only put this in my index_bis.js file : window.location.href ='login.html';
The redirection works, but there is no style on my page. The style works when I don't redirect! :(
An idea ? Thanks a lot!
This is part of my index.html :
<head>
<title>...</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.css" />
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script src="js/login.js"></script>
<script src="js/index_bis.js"></script>
</body>
When you do window.location, the current page is replaced with the called page and so all ur styles references are lost.
You should be looking at a single page application architecture using JQM. The first html page loads and all other pages are loaded asynchronously using ajax added to the DOM. Please carefully read this documentation and you will get an idea.
Multi-page link is how you need to link pages.
if you wanna navigate programmatically, you need to use the $.mobile.changePage() method
Maybe stupid question, but do you have in the login.html thae same style and libraries included?
And have they correct paths?
Just try to point to possible problems :)
Should be a really quick one for you pro's:
I'm learning to use JS, in particular a plugin called (embarassingly) 'Easy Image'.
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
Here's my code:
http://jsfiddle.net/tomperkins/LnES6/
JS files are from here:
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
And obviously jQuery (1.5)
I've stripped it down to the basics and can't figure out why it's not working.
Any tips are much appreciated!
Thanks in advance,
Tom
jquery.js and easySlider.js gets an Server error 500 when the browser tries to load them from
http://customstudiodevelopment.co.uk/jquery-test/
Verify that the files are there and that they can be loaded
http://customstudiodevelopment.co.uk/js/jquery.js
http://customstudiodevelopment.co.uk/js/easySlider.js
Unless both these urls load the right JS files your code will not work ...
As a general tip, get FireBug addon to firefox, with the Net panel I found this error in less than 30 seconds ;)
In menu on the left you have to set your framework to JQuery and in Add resources box add 'Easy Image' script. Then comment out first two <script> tags (you will need them on your site but not on jsFiddle). Also change src attributes in <img> tags to absolute path because there is no images folder nor any images on jsFiddle site.
Edit
This is what you get with <script> tags on your site:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
2<html><head>
3<title>500 Internal Server Error</title>
4</head><body>
5<h1>Internal Server Error</h1>
6<p>The server encountered an internal error
Script doesn't work because there are no scripts on your site (both links are dead).
This is working:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<base href="http://customstudiodevelopment.co.uk"/>
<script type="text/javascript" src="/jquery-test/js/jquery.js"></script>
<script type="text/javascript" src="/jquery-test/js/easySlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
<meta charset="utf-8">
<title>jQuery Gallery Test</title>
<link href="/jquery-test/css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="slider">
<ul>
<li><img src="/jquery-test/images/Website-Strip_Future.png"></li>
<li><img src="/jquery-test/images/SR-Toomer_small.png"></li>
</ul>
</div>
<!-- /end #slider -->
</body>
</html>
Note, I put the base element in there to test on my desktop. It's not required for it to work on your server, but if it's on your desktop computer, it should work (so you can copy the html into a Notepad file and save with filetype .html and run it locally to test).
It appears as if your file includes (js/css/image) are not pointing to where you want them to be.
Use Firebug to test these types of things. When you open the console, you can inspect the scripts included, including open each included file. In this way, you can doublecheck to make sure the browser is able to get to your included files.
http://getfirebug.com/
http://getfirebug.com/wiki/index.php/Script_Panel
http://getfirebug.com/wiki/index.php/File:Script_Panel.png <<< see del-linkrolls.js close to top, right; that's where you select which file to inspect
When I loaded the page I got an ".ready() is not a function" which would mean you are not loading jQuery. Then again I've never fooled around with jsfiddle