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.
Related
I have a simple two page website developed using jQuery mobile framework. I had the need to use Datebox plugin for selection of times. Both pages of my website are in the same .php file separated by divs with data-role="page" appropriately.
My only problem is that if the datebox exists in the first page of the webpage, it loads properly, but in any other page, its icons are messed up.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.css" rel="stylesheet" type="text/css">
<script src="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="index">
<header data-role="header" data-position="fixed">
<h1>Home</h1>
</header>
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
<footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ON/OFF</li>
<li>Timer</li>
<li>Scheduler</li>
</ul>
</div>
</footer>
</div>
<div data-role="page" id="onoff">
<header data-role="header" data-position="fixed">
<h1>ONOFF</h1>
</header>
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
<footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ON/OFF</li>
<li>Timer</li>
<li>Scheduler</li>
</ul>
</div>
</footer>
</div>
</body>
</html>
The following images show the issue. On page load, the first div with page-role="page" and id="index" is loaded and the datebox icon works as intended:
But if I navigate to the second page using the footer navbar ON/OFF tab, I get this weird icon placement:
Please help me figure out what is going wrong here.
Hmm, I'm not sure why this is but using local files instead of the CDN links in the head enabled me to use the datebox plugin across pages. The files were generated using the download builder found here:
http://dev.jtsage.com/DateBox/builder/
user3889963 hit the nail on the head.
Download the source files for JQM for Datebox and then call them directly within your head.
<script src="../jtsage-datebox.min.js" type="text/javascript"></script>
<link href="../jtsage-datebox.min.css" rel="stylesheet">
This previous question shows there is a problem with using the plugin via the CDN Jquery Mobile DateBox plugin only working when linked directly to page
Here is it working with the files installed directly.
Unique Naming is the problem.
Within both pages you are calling the datebox item by the same name, so only the first one gets styled correctly.
Just rename the second page as datebox2 this should fix the problem. As the label for searches for the first unique ID of "datebox" and styles that one.
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox2">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
I need to be able to choose when the jquery dialog opens up but nothing i seem to do works.
so far ive tried this
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="main" class="ui-content">
Open Dialog Popup
Test
<div data-role="popup" id="myPopupDialog">
<div data-role="header">
<h1>But wait theres more!</h1>
</div>
<div data-role="main" class="ui-content">
<h2 style="text-align: center;">Would you like an exclusive offer?</h2>
Sounds Good!
No Thanks, Take me back..
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</div>
<script>
$(document).ready(function(){
console.log(document.body.scrollTop);
if(document.body.scrollTop === 0)
{
$.mobile.changePage('#myPopupDialog', 'pop', true, true);
}
});
</script>
</body>
</html>
which works but when i change the if statement in the javascript it breaks also if i remove the anchor tag at the top it just doesnt show... jQuery mobile has me confused.
So anyway my question is how do manually make a dialog box show on the page, i would prefer it to show on the same page and not another page.
use this:
$("#myPopupDialog").addClass("ui-page-active ui-page ui-page-theme-a")
I am developing a web app based on jQuery and jQuery mobile. I want to show different pages, but since the corresponding html-markup might become quite large I would like to split up the html into different files, i.e.:
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" id="page1">
<!-- import markup for page1 here -->
</div>
<div data-role="page" id="page2">
<!-- import markup for page2 here -->
</div>
<script src="js/libs/jquery-2.1.1.min.js"></script>
<script src="js/libs/jquery.mobile-1.4.3.min.js"></script>
</body>
</html>
What can I do to import my markup where it says <!-- import markup for page<x> -->? Is there any way to achieve that?
I tried using <script>$("#page1").load("page1.html");</script> but this messes the entire page up! Since the web app should be packed as a native app for smartphones later php is not an option.
Thanks to Omar's comments above and his answer to this question I was able to come up with a working solution.
1.) Add external pages to the DOM by using $.mobile.pageContainer.pagecontainer("load", "<externalResName>.html");
2.) Navigate to the newly loaded page by adding a listener to the document (i.e. $(document).on( "pagecontainerload", function( event, ui ) { //... } );)
3.) Make sure that the external ressource stays in the DOM by adding data-dom-cache="true" to the page's div-tag.
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<title>Hello jqm</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$(document).on( "pagecontainerload", function( event, ui ) {
console.log('navigating to page1...');
$.mobile.pageContainer.pagecontainer("change", "#page1");
console.log('navigating done!');
} );
console.log('loading pagecontainers...');
$.mobile.pageContainer.pagecontainer("load", "page1.html");
$.mobile.pageContainer.pagecontainer("load", "page2.html");
console.log('pagecontainer-load done!');
});
</script>
</body>
</html>
page1.html
<div data-role="page" id="page1" data-dom-cache="true">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
Go To Page 2
</div>
</div>
page2.html
<div data-role="page" id="page2" data-dom-cache="true">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
Go Back To Page 1
</div>
</div>
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.
I have an initial init page in my application that acts as an entry point and loads my login page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile- 1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- initialse and load the application -->
<div data-role="page" id="init">
<script type="text/javascript">
$('#init').live( 'pageinit', function() {
window.location.href="views/login.html";
});
</script>
</div>
</body>
</html>
When my login page loads there is a button which loads a dialog. This button initially doesn't work and only loads the dialog when the page is manually refreshed. Why does this happen and what can I do to enable the button/dialog immediately upon page load.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- login page -->
<div data-role="page" id="login">
<!-- css -->
<link rel="stylesheet" href="../css/global.css" />
<link rel="stylesheet" href="../css/login.css" />
<!-- page markup -->
<div data-role="header">
Settings
</div>
</div>
<!-- end of page -->
<!-- settings dialog page -->
<div data-role="dialog" id="settings_dialog">
<!-- page markup -->
<div data-role="header" style="text-align: left;">
</div>
<div data-role="content">
</div>
</div>
<!-- end of page -->
</body>
</html>
Not sure if you've fixed this but it seems to be something to do with the DOM cache & AJAX.
I'm not sure how you'd do it, but try setting the ajax: false when you do the window reload. Alternatively you could redirect via server side (I'd recommend this as it'll still work if the user has JS turned off.
Why I figured this out was because I had a page with a list on it, the list items sent me to a new page which has a jump link on it (#settings_dialog). Setting the data-ajax="false" on each list item somehow 'refreshed' the DOM and forced the second page to load 'fresh' and voila - my dialog works 100% now.
So, in short, turn off the AJAX feature or (better) redirect from serverside & be happy!