Okay, before I get buried in sea of red tape for asking a frequently asked question, please hear me out. I am using Phonegap to develop a mobile web app and jQuery for swiping between different pages. By different pages, I mean different HTML files and not divs within one html file. For illustrative purposes, let us take two html files out of the lot I have in the app.
index.html
test.html
Assume that the control is in test.html and I do the following
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script>
$(function(){
$("#home").bind('swipeleft',function(event, ui){
$.mobile.changePage("../index.html", "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Main Page</h1>
</div>
<div data-role="content">
<p>Slide finger left</p>
</div>
</div>
</body>
</html>
I read the discussion here and tried adding "&callback=?" to the end of index.html. That removed the error "Origin null is not allowed by Access-Control-Allow-Origin", but it propped up a new one "Resource not found". The following errors were obtained in Webkit based browsers (Mobile Safari, Chrome). I ran the file in Firefox and got a plain "Error Loading Page" alert on the screen.
Please help me out with this situation. A million thanks in advance!
Related
I'm trying to make use of the really cool Jquery Modal framework, which can be found here. I've done the first step and nothing happens. Maybe I'm just stupid, but the jquerymodal.com site says it's as easy as the following:
<!DOCTYPE html>
<html>
<head>
</style>
<!-- Don't forget to include jQuery ;) -->
<script src="jquery.modal.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- Modal HTML embedded directly into document -->
<div id="ex1" style="display:none;">
<p>Thanks for clicking. That felt good. Close or press ESC</p>
</div>
<!-- Link to open the modal -->
<p>Open Modal</p>
</body>
When I launch my HTML page and click the "Open Modal" link, it does nothing. Nothing happens in any browser. Even if I host it in IIS and run it from VS as an admin. And yes, of course, I have placed the JqueryModal js and project zip files into the same directory as my HTML file. But, that said... there's no WAY the developer of this framework was negligent enough to publish his files without testing them. So what in the world am I doing wrong??? Can someone please slap me in the face and spell it out for me?
The below works fine for me. I included jQuery library and the CSS file for jQuery modal to make it work.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.2/jquery.modal.min.css" />
<!-- Modal HTML embedded directly into document -->
<div id="ex1" style="display:none;">
<p>Thanks for clicking. That felt good. Close or press ESC</p>
</div>
<!-- Link to open the modal -->
<p>Open Modal</p>
Now I see the comment in the sample code "Don't forget to include jquery". LOL. I blew it :)
I spent a few hours over the last few days reworking some of my javascript files so they could all be loaded toward the end of my source code (or, if they must be placed earlier, they would wait for jQuery to be defined, which is loaded in the footer but is required by most of my scripts). I then moved all scripts that could be moved to end of the source code.
So a rough example of the change..
Original:
<html>
<head>
<title>This is still an awesome web page</title>
<script type="text/javascript" src="/path/to/script.js"></script>
<script type="text/javascript" src="//www.example.com/path/to/another/script.js"></script>
<script type="text/javascript" src="/path/to/jQuery/or/some/other/important/library.js"></script>
</head>
<body>
<p>lots of great content</p>
<script type="text/javascript" src="/this/script/must/be/located/in/the/body.js"></script>
<p>more great content</p>
</body>
</html>
Updated:
<html>
<head>
<title>This is an awesome web page</title>
</head>
<body>
<p>lots of great content and maybe lots of images too</p>
<script type="text/javascript" src="/this/script/must/be/located/in/the/body.js"></script>
<p>more great content</p>
<script type="text/javascript" src="/path/to/script.js"></script>
<script type="text/javascript" src="//www.example.com/path/to/another/script.js"></script>
<script type="text/javascript" src="/path/to/jQuery/or/some/other/important/library.js"></script>
</body>
</html>
So I made that change and looked at Chrome's Network traffic when I reloaded some pages. I was surprised to discover that Chrome still loads my javascripts before loading images and such.
I did some reading and it seems like this is due to Chrome's preloader (https://plus.google.com/+IlyaGrigorik/posts/8AwRUE7wqAE) scanning ahead and loading important files sooner.
If Chrome (and other modern browsers I assume) are going to do this, then is there any reason to continue placing javascripts toward the end of the source code?
You'll want to place your scripts at the end of your HTML if;
1 - Your scripts need access to DOM/CSSOM nodes, therefore they have to be parsed prior to your JS.
2 - You want to display the page while the JS is still downloading and executing against the page.
I am testing iUI for mobile web apps. Instead of putting all content into a single HTML page, I am using the Ajax hyperlink technique described by Joe Hewitt here. However I cannot get this to work in Chrome, although Joe Hewitt's own Digg demo, which uses the same technique, seems to work correctly.
Here is the simplified source code:
main.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="stylesheet" href="iui/iui.css" type="text/css" />
<link rel="stylesheet" href="iui/t/default/default-theme.css" type="text/css"/>
<script type="application/x-javascript" src="iui/iui.js"></script>
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul id="main" title="Main" selected="true">
<li>Go to Screen #1</li>
<li>Go to Screen #2</li>
</ul>
</body>
</html>
screen1.html:
<div class="panel" title="Screen 1">
<ul><li>Hello 1</li></ul>
</div>
screen2.html:
<div title="Screen 2">
Hello 2
</div>
This works fine on Firefox (minus styling issue in screen2.html) but the links do not work on Chrome.
Any pointers?
The AJAX-based navigation used may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, try a different browser. When I'm using jQuery Mobile, sometimes the Ajax hyperlink technique works, sometimes it doesn't. Although the same code works fine on Opera.
Looks like does not have anything to do with iUI, rather it is a Chrome issue that affects loading any local files via Ajax.
Here is another SO question related to this issue, this time showing up with JQuery:
Problems with jQuery getJSON using local files in Chrome
The accepted answer includes a link to the bug in the Chromium bug tracker.
I'm trying to make a simple jQuery popup on an existing page. The page itself will have the first part of some articles, with a more button following the intro. I would like the more button to display a jQuery popup with the rest of the article.
So far, I've been following the tutorial: http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/
However once it's up on share point, it doesn't work. I click the button and nothing happens. I even modified the JS so all it does it display an alert, but that doesn't work ether. The link between the page and JS seems to be broken. However I even viewed the src (using my web browser) and sure enough the script tag is in there, but nothing JS is working. Any ideas?
Here's the html page I copy into share point (the java script file is exactly the same as in the tutorial):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/articles/.../popup.js" type="text/javascript"></script>
<style type="text/css">
/* CSS goes here, same as in the tutorial */
</style>
</head>
<body>
<div>
<div class="backgroundmain" style="margin-left:-75px; margin-top:-35px; margin-right:-32px;">
<!-- HTML FOR THE ARTICLES-->
</div>
<center>
<div id="button"><input type="submit" value="Press me please!" /></div>
</center>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Title of our cool popup, yay!</h1>
<p id="contactArea">
Here we have a simple but interesting sample of our new stuning and smooth popup...
</p>
</div>
</div>
</body>
</html>
Thanks for all your help, I really appreciate it.
EDITS:
Here's the results from Chrome's dev tools:
jsFailed to load resource: the server responded with a status of 404 (NOT FOUND)
Refused to execute a JavaScript script. Source code of script found within request.
popup.js:147Uncaught ReferenceError: $ is not defined
However I first tried this in firebug and discovered the alert actually works in firefox.
This line looks suspect:
<script src="/articles/.../popup.js" type="text/javascript"></script>
Where exactly is popup.js? If you have it locally, make sure the path is correct. If not you will need to specify the URL to the file and not a relative path.
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