Detect changepage on jquery mobile - javascript

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>

Related

Jquery mobile fails to load styles after change page

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>

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');
});

jQuery mobile css and js not applied to the content loaded with .load()

so..here is the scenario
i have a page with data-role="page" and one header container and footer divs - normal jquery mobile page structure.
Now in my content div i have two divs. out of which in one of the div i'm loading some other content dynamically having buttons and textboxes with data-role specified.
now the problem:
while loading new page in the div the controls are not displayed as mobile controls instead they look like normal html controls. This may be due to as they are loading after the dom is ready they are not getting the jqm js and css.
following is the page structure.
<html>
<head>
<link rel="stylesheet" href="styles/jquerymobile.css" type="text/css" />
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
</div>
<div data-role="content">
<div id="static_content"></div> // no problem to this.
<div id="dynamic_content"></div> // dynamic content used .load() - no jqm css loaded :(
</div>
</div>
</body>
</html>
any help will be appreciated.
You will have to put your content loading into the jQuery mobile event structure. See here for details:
http://jquerymobile.com/demos/1.1.0/docs/api/events.html
I used the 'pagecreate' event to modify the content before it is enhanced by jquery, like this:
obj_out.add "$('div').live('pagecreate',function(event){" & vbNewLine
obj_out.add " $('.jsvisible').show();" & vbNewline
obj_out.add " $('.jshidden').hide();" & vbNewline
obj_out.add " $('.nojs').removeClass('nojs');" & vbNewline
obj_out.add "});" & vbNewline
You can call the page widget constructor after you have loaded your dynamic content
$("div[data-role='page']").page('destroy').page();

jQuery stops working after loading content into a div

For example I have the following HTML named index.html:
<html>
<head>
<style>
#content { float:left; }
#sub { float:right; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">
Sub content
</div>
</body>
</html>
And a simple JS file named action.js:
$(document).ready(function(){
$('button.loadSub').click(function(){
$('#sub').load('test.html');
});
$('button.hide').click(function(){
$('#sub').fadeOut('slow');
});
});
As you can see, when I click the button .loadSub the div #sub will be loaded with the new content from test.html:
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
I got two problems here:
Firstly, the .loadSub button did successfully load the the div of id subcontent, but the .hide button did not work.
Secondly, after I had tried inserting
script type="text/javascript" src="action.js"
inside test.html, the hide button worked and faded out its content. But then in turn, I found out that the button loadSub no longer functioned. I couldn't load the subcontent again.
Is there any other way around to just once declare source of js file and make my button.loadSub work whenever I click it? Could anybody please explain the problem and give me a hint to fix it.
You're loading dynamic HTML into your page. This means that at the time you called $('button.hide').click(), the button.hide element did not exist in your page yet, so the click handler could not be attached.
You might want to try doing a delegate attachment instead.
$('#sub').on('click', 'button.hide', function () {
$('#sub').fadeOut('slow');
});
On the first page, put this. You can insert my JQQuery code into your action.js file. On the second page, the one you are loading into your div, put the second Jquery code I added.
On First page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
#content{float:left;}
#sub{float:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">Sub content</div>
</body>
</html>
On the second page (the page that's loaded into the div, add this:
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
The hide button isn't on the page when you try to bind the event so it is never registered.
Change it to use on like this (assuming version 1.7+)
$(document).on('click', 'button.hide', function(){
$('#sub').fadeOut('slow');
});
or delegate if an older version:
$(document).delegate('button.hide', 'click', function(){
$('#sub').fadeOut('slow');
});
This attaches the event handler at the document level so will work for any new content added to the page.

Categories