I am following dojo mobile tutorial for Part 2 - Developing a Dojo Mobile Application: FlickrView.
But when I tried examples in that tutorial, I found that //ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/mobile/deviceTheme.js and //ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js can not be loaded in my test html below, these two js file loaded successfully in demo page
Am I do something wrong?
<!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,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- prevent cache -->
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<title>Dojo Mobile tutorial | Flickrview | Part II | HTML Structure</title>
<!-- application stylesheet -->
<link rel="stylesheet" type="text/css" href="css/flickrview.css">
<!-- dynamically apply native visual theme according to the browser user agent -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/mobile/deviceTheme.js"></script>
<!-- dojo configuration options -->
<script type="text/javascript">
dojoConfig = {
async : true,
baseUrl : './',
parseOnLoad : false,
mblHideAddressBar : true,
packages : [{
name : "flickrview",
location : "js"
}]
};
</script>
<!-- dojo bootstrap -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
<!-- dojo application code -->
<script>
// Load the widget parser and mobile base
require(["dojox/mobile/parser", "dojox/mobile/compat", "dojo/domReady!"], function(parser) {
// Parse the page for widgets
parser.parse();
});
</script>
</head>
<body>
<!-- Feed view -->
<div id="feed" data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected: true">
<div id="feedHeading"
data-dojo-type="dojox/mobile/Heading"
data-dojo-props="fixed: 'top', label: 'Feeds'">
<span data-dojo-type="dojox/mobile/ToolBarButton"
data-dojo-props="icon: 'images/settings.png', moveTo:'settings', transitionDir:'-1', transition:'none'"
style="float:left;"></span>
<span id="refreshButton" data-dojo-type="dojox/mobile/ToolBarButton"
data-dojo-props="icon: 'images/refresh.png'"
style="float:right;"></span>
</div>
<div id="feedList" data-dojo-type="dojox/mobile/EdgeToEdgeList">
<div data-dojo-type="dojox/mobile/ListItem"
data-dojo-props="moveTo:'details', transition:'slide'" class="photoListItem">
<img src="images/photo1.png" width="80px" height="80px" alt="Title" style="float:left;"/>
<div class="photoSummary">
<div class="photoTitle">
Photo title here
</div>
<div class="publishedTime" data-dojo-time="2013-12-13">
published date here
</div>
<div class="author">
author here
</div>
</div>
<div class="summaryClear"></div>
</div>
<div data-dojo-type="dojox/mobile/ListItem"
data-dojo-props="moveTo:'details', transition:'slide'" class="photoListItem">
<img src="images/photo2.png" width="80px" height="80px" alt="Title" style="float:left;"/>
<div class="photoSummary">
<div class="photoTitle">
Another photo title here
</div>
<div class="publishedTime" data-dojo-time="2013-12-13">
published date here
</div>
<div class="author">
author here
</div>
</div>
<div class="summaryClear"></div>
</div>
</div>
</div>
</body>
</html>
Here's error message in Chrome.
To use the protocol-less version of the url (like //ajax.googleapis.com) you have to host your project somewhere (either on a local or a remote webserver).
You can not just open the file (using the file:// prefixed URL), because then it won't be able to find the specified libraries. What actually happens if you load such a URL is that the same protocol-prefix is used to load these pages. If you load a page just by opening the file, it will have a file:// prefix and not http:// or https://.
This is also the reason why it is working on the demo page (because it is hosted) and why you get these GET errors, it's trying to find ajax.googleapis.com on your local machine (due to the file:// protocol), which it obviously can't find.
To fix it you just use the full URL, for example:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
Or a better solution is to put your project on a webserver (nginx, apache2, ...), because I don't think you will be able to load asynchronous modules either.
Related
I have a web page where I am using javascript to redirect to another page. The second page displays correctly but I can't get javascript to run when the second page is loaded. Here are 3 ways I have tried to get my javascript function to load on the second page:
Put the function as onload parameter for html body
Tried calling it as inline javascript inside both the heading and body of the page
Used jquery $(document).ready to try and call the function when page loads
I simplified the function to be a simple alert to make sure the problem wasn't with the function code and also set break point on function to make sure it wasn't being called. The code won't fire when the page is loaded but if I do a refresh on the browser it will work.
The page I am trying to redirect to is generated by a 3rd party application we have so I am limited on how much I can modify it but I can make basic HTML/javascript changes to the page. The second page is also built with Angular.
Any ideas on how I can get this second page to always run my javascript code when I redirect to it? Below is code from second page with the myTest() the function I am trying to run. If I hit refresh on browser when this page loads, I get the myTest alert 3 times.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title ng-controller="TitleCtrl" ng-bind="title"></title>
<!-- third party stylesheets -->
<link rel="stylesheet" type="text/css" href="third-party/bootstrap-3.3.5/css/bootstrap.min.css" />
<link rel="styleSheet" type="text/css" href="third-party/angular-ui-grid-3.1.1/ui-grid.min.css" />
<link rel="stylesheet" type="text/css" href="third-party/font-awesome-4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="angular-1.5.0/angular.min.js"></script>
//editing out list of about 50 javascript files to make code example shorter
<script type="text/javascript">
function myTest() {
alert("My Test");
}
</script>
</head>
<body class="app-body" onload="myTest();">
<ng-include src="'components/property-pages/field-scripts.html'"></ng-include>
<ng-include src="'components/form-editor/form-editor-field-scripts.html'"></ng-include>
<ng-include src="'components/form-editor/field-properties-dialog-definition-scripts.html'"></ng-include>
<ng-include src="'components/form-editor/field-properties-scripts.html'"></ng-include>
<ng-include src="'components/lib/custom-handler/custom-handler-tooltip-script.html'"></ng-include>
<!-- alert notification -->
<div ng-include="'components/alerts/alert.html'"
ng-controller="AlertController as vm">
</div>
<!-- navigation bar -->
<navbar></navbar>
<!-- main container -->
<div id="main-container"
ng-controller="MainContainerController as vm"
ng-style="{ top: vm.getTop(), height: vm.getHeight() }">
<ng-view></ng-view>
</div>
<!-- loading status panel -->
<div ng-include="'components/loading/loading.html'"
ng-controller="LoadingController as vm">
</div>
<!-- pre-bootstrap loading status panel -->
<div class="startup-loading">
<span class="fa fa-spinner fa-pulse fa-3x fa-fw"></span>
</div>
<!-- pre-bootstrap error status panel -->
<div class="startup-error">
<span class="fa fa-exclamation-circle fa-3x fa-fw"></span>
<div id="startup-error"></div>
</div>
<script type="text/javascript">
myTest();
$( document ).ready(function() {
myTest();
});
</script>
</body>
</html>
What browser are you using?
I've seen something similar happen in Firefox, meanwhile the same is working in other browser.
$(document).ready() not firing after redirect with window.location
I have an HTML5 game built with NW.js that makes a GET request to my website to retrieve a static data file, file.json, hosted at www.example.com/file.json on Heroku.
One of my users can navigate to www.example.com/file.json and see the file properly, but when they open the game, this request returns HTML from a different site. After over 100,000 users, they are the first one to experience this.
The HTML response the user gets is this:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=980,user-scalable=yes,maximum-scale=2.0" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<link rel="stylesheet" href="/steal-built/production.css" />
<script src="/js/thirdParty/jquery-1.8.3.min.js"></script>
<script src="/gui/js/jquery-utils.js"></script>
<script src="/gui/js/gui-core.js"></script>
<script src="/gui/js/gui-api.js"></script>
<script src="/js/thirdParty/modernizr.custom.js"></script>
<script src="/js/thirdParty/yepnope.1.5.4-min.js"></script>
<script src="/js/thirdParty/cssua.js"></script>
<script src="/js/thirdParty/moment.js"></script>
<!--noUI slider plugin: http://refreshless.com/nouislider/ -->
<script src="/js/thirdParty/jquery.nouislider.min.js"></script>
<!--jquery sort elements plugin: http://james.padolsey.com/javascript/sorting-elements-with-jquery/ -->
<script src="/js/thirdParty/jquery.sortElements.js"></script>
<!-- datepicker plugin: http://amsul.ca/pickadate.js/ -->
<![if gte IE 9]>
<script src="/js/thirdParty/pickadate.min.js"></script>
<![endif]>
<!-- datepicker: legacy for older browsers -->
<!--[if lte IE 8]>
<script src="/js/thirdParty/pickadate.legacy.js"></script>
<![endif]-->
<!-- jQuery plugin for parsing CSV file format: https://code.google.com/p/jquery-csv/ -->
<script src="/js/thirdParty/jquery.csv-0.71.min.js"></script>
<!-- MD5 encryption library -->
<script src="/js/thirdParty/md5.js"></script>
<!--ie polyfill for console.log and related -->
<script src="/js/modemUI/console-polyfill.js"></script>
<script src="/js/thirdParty/dust-full-0.3.0.js"></script>
<script src="/js/thirdParty/dust-helpers-1.1.1.js"></script>
<script src="/js/thirdParty/raphael.js"></script>
<!-- For calculating subnet masks https://github.com/franksrevenge/IPSubnetCalculator -->
<script src="/js/thirdParty/IPSubnetCalculator.js"></script>
</head>
<body>
<!--div that is used to identify if the user's browser is (likely) a mobile device. Will be hidden by css, then examined with js-->
<div id="div-is-smartphone"></div>
<div id="root-view"></div>
<!-- IE6 specific style here in case javascript disabled -->
<!--[if lte IE 6]><style type="text/css">#init-screen {position: absolute; height: 480px;}</style><![endif]-->
<!-- if we have no javascript, hide activity-indicator -->
<noscript><style type="text/css">#init-screen .activity-indicator{display: none}</style></noscript>
<div id="init-screen">
<div class="middle">
<div class="icon"></div>
<div class="title"></div>
<div class="activity-indicator"></div>
<div class="error-message">
<noscript>No javascript / Javascript absent</noscript>
</div>
</div>
<div class="logo"></div>
</div>
<div id="init-log" style="display: none;">
<div class="header">
<span class="close">x</span>
<span class="title">Initialization Log</span>
</div>
<div class="content">
<table></table>
</div>
</div>
<script src="/steal/steal.production.js?steal-built/production.js"></script>
</body>
</html>
Again, there is no chance that this is being served from my site. Could the user be affected by malware? They said they didn't mess with any configuration files in Windows, but I have my doubts. I checked their request headers, and everything looked completely normal.
I'm using JQuery Mobile, and now I would like to navigate through pages with the minimum of loading amount of scripts everytime a page is being loaded, I mean that I would like to import only ONCE all the general scripts of all the pages (JQuery.js, jquery_mobile.js, main.js etc...) and
So I have an index.html with the following code :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title>Hybrid App</title>
<link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.4.4.css" />
<link rel="stylesheet" href="jqueryMobile/jquery.mobile.icons-1.4.4.css" />
<link rel="stylesheet" href="css/jquery.mmenu.css" />
<link rel="stylesheet" href="css/main.css" />
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="jqueryMobile/jquery.mobile-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.mmenu.min.js"></script>
<script type="text/javascript" src="js/initOptions.js"></script>
<script type="text/javascript" src="sharedResources/customersObject.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/messages.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="page">
<link rel="stylesheet" href="css/pages/splash-view.css" />
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="splash-wrapper">
<div class="splash-content">
Login
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/splash-view.js"></script>
</div>
</body>
so when clicking on the link I go to an external HTML file located in : pages/faqs-view.html with the following code :
<div data-role="page" id="page" data-url="pages/faqs-view.html">
<link rel="stylesheet" href="css/pages/faqs-view.css">
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="faqs-wrapper">
<div class="faqs-content">
<div data-role="collapsible-set" data-corners="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" id="faq-set">
</div>
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<p class="employee-name">Welcome, Ali</p>
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/faqs-view.js"></script>
The problem is that when loading the faqs-view.html page, I can see that none of the scripts included in the <head> are being executed, I have tried to put them after the <body> tag, but it's the same, BUT the CSS files are being interpreted.
How can I achieve that ? Thank you.
Worklight-based applications are Single Page Applications. This means you should never navigate away from the index.html. Doing so will cause the app to lose its context to the Worklight framework, thus it will begin to fail.
If you'd like to add multi-page navigation to the application, you can do so using the API provided by 3rd-party frameworks. Here you are using jQuery Mobile.
You've changed the loading order of scripts. You shouldn't.
Use the Worklight Studio wizard in order to create an app template with jQuery Mobile (new project > new hybrid application (click on "configure javascript libraries" > select the library you would like to add))
Keep initOptions.js, main.js and messages.js where they are by default, at the bottom
The index.html you get is your template with jQuery Mobile
If you want to replace the bundled jQuery, you need to comment out (slide #6) the following script tag: <script>window.$ = window.jQuery = WLJQ;</script>. Worklight is bundled with jQuery 1.9.x.
For a bare-bones example of multi-page navigation in a Worklight-based application, using jQuery Mobile, take a look at this project.
As you navigate between pages, you only replace the contents of the data-role="page". The scripts have already been loaded. You can load additional scripts per where required when loading a specific page.
They are executed in the order you put them on the page.
window.$ = window.jQuery = WLJQ;
Cannot be executed before jQuery is included.
Edit:
When you load a new page without the header it's clear that it won't be excecuted because it is not there.
When you replace html in your page you should look at the "on" function for events.
I am developing a jquery mobile website and i have some problems running javascript code.
I have a home page , index.html , which is basically a listview to navigate to various html pages. I use the single-page structure for my pages , that means every 1 html file contains 1 page. Now from the home page , i navigate to another page where i am using a persistent NavBar with a horizontal button with 2 options. One is photos and the other is multimedia.
For the photos i am using the Javascript FB API , to download the photos from a FB Page and then with the PhotoSwipe Plugin i present them to the user.
The problem..
If i run the photos.html page , it will work well and load the albums. There are 2 things that my javascript does. 1) Use FB API to get albums, photos , cover photos etc.. 2) Dynamically create a listview with this albums and their photos. In this case both work great!
However when i am in my index.html and i navigate through the listview to the photos.html (photos is the default chosen button from the persisent NavBar) the Javascript code doesnt work. Like is not called at all..
The index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
<link rel="stylesheet" href="themes/EspacioJoven.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="themes/custom.css" />
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<!--
<div data-role="header">
<h1>Application Title</h1>
</div>
-->
<div data-role="content">
<h2 id="banner">Joven Mobile</h2>
<div class="main_menu">
<ul data-inset="true" data-role="listview">
<li><img src="themes/icons/news.png" alt="Information" class="ui-li-icon">Esen</li>
<li><img src="themes/icons/research.png" alt="Information" class="ui-li-icon">Laen</li>
<li><img src="themes/icons/staff.png" alt="Information" class="ui-li-icon">Multimedia</li>
<li><img src="themes/icons/students.png" alt="Information" class="ui-li-icon">Sanen</li>
</ul>
</div>
</div>
<!--
<div data-role="footer">
<h4>Page Footer</h4>
</div>
-->
</div>
</body>
</html>
The photos.html looks like :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
<link rel="stylesheet" href="themes/EspacioJoven.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="themes/custom.css" />
<!-- Needed from PhotoSwipe Plugin -->
<link href="photoSwipe/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="photoSwipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoSwipe/klass.min.js"></script>
<script type="text/javascript" src="photoSwipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<script type='text/javascript' src='photoSwipe/photoSwipeCall.js'></script>
<!-- Needed from PhotoSwipe Plugin -->
</head>
<body>
<div data-role="page" id="photos" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
<div data-role="header" data-id="fixedNav" data-position="fixed">
<h1>Application Title</h1>
Back
<div data-role="navbar">
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" class="albums">
<!-- Here the albums are created through javascript (createAlbums.js) -->
</ul>
<button type="button" id="loadMoreAlbums">More Albums...</button>
</div><!-- /content -->
</div><!-- /page -->
<div id="fb-root"></div>
<script type='text/javascript' src='javascript/createAlbums3.js'></script>
</body>
</html>
As you see i call my javascript in the end. Any ideas why its never called? If i refresh the page , that means run the photos.html , it will load normally.
Actually i also look at the "elements" table from the debugger. When im in the index.html page the html elements seem all correct. When i do the transition though to the photos.html page , by looking at the elements table i see that they dont change! The title does change but the rest stays the same which is incredible?! How on earth can that happen? It looks like is the same page , with the same css and javascript sources , but should be different! As you see i use photoSwipe javascript , css etc! Only if i reload the page the elements are correct. Please any ideas? I have no idea what is happening here.
Also for some reason i get a 304 Status , Not Modified through the transition , from one page to another.
The reason for this is because when you navigate to a page in jQuery Mobile it by defaults will try and pull the JQM page (data-role="page" (if there is no data-role='page' then it will pull the body)) via ajax and attaches it to the current page's DOM, the thing is it will only pull the JQM page (or body if there isn't any) and ignore everything (aside from the title) outside of it meaning your JavaScript is not going to get called.
When you refresh the page then a normal HTTP call is made and the entire page is loaded so your code is executed.
In order to have your JavaScript called you need to either have the relevant script's on your first page or you can have it withing your JQM page wrapper and it will then be pulled along with it.
<div data-role="page" id="photos" data-theme="a"
data-add-back-btn="true" data-back-btn-text="Back">
....
<script type='text/javascript' src='javascript/createAlbums3.js'></script>
</div><!-- /page -->
Have a look at the following Q&A from the official docs for more details.
Cant get this code to work in chrome, which is essential since I'm developing for android. Can anyone see the error?
I just want to load 'page1.html' into '#container1'. Should be easy and it was working before. But I have tried rebuilding the code from scratch and I can't see what the error is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TheTutorialBlog.com : jQuery Deep Linking</title>
<link href="css_elIndex.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="bbq-1.2.js"></script>
<script type="text/javascript">
$("document").ready(function(){
alert('doc ready');
$('#container1').load('page1.html');
});
</script>
</head>
<body>
<div class ="topBar">
<div class = "backButton">Home</div>
</div>
<div id="pageContainer">
<div class="pageViewer" id="container1">
</div>
<div class="pageViewer" id="container2">
</div>
<div class="pageViewer" id="container3">
</div>
</div>
</body>
</html>
Page1.html:
<ul class="tabs">
HEi
</ul>
When accessing files via the local file system (file:// URLs) you cannot load any local AJAX resources in Chrome and Opera for security reasons.
When using HTTP there is the "same origin policy" to prevent sites from accessing data they shouldn't have access to. However, on the local file system there is no way to know what's safe to access and what not. So AJAX requests to local files are generally blocked.