I know there are similar kind of questions asked and answered as well. But my problem is different. Here is code sample that I am using to load and stylize my content.
$("body").on("click","[data-view]",function(){
var view=$(this).attr("data-view");
$("#mainView").load("pageRouter.php?view="+view).trigger("create");
});
I searched forums and found .trigger("create") is the way to stylize the dynamically loaded content.But it is not helping.
Solution
You are doing it incorrectly, load is asynchronous function so you need to wait for it to load the content before you can enhance the content.
You will need to do this:
$("#mainView").load("pageRouter.php?view="+view, function() {
$(this).trigger("create");
});
This will work if you are only loading content but if you are loading a full page, with header and footer then use this:
$("#mainView").load("pageRouter.php?view="+view, function() {
$(this).trigger("pagecreate");
});
Read more about lead and its callback here.
Working example:
index.php
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<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; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-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>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$("#index").load("load.php", function() {
$(this).trigger("pagecreate");
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
</div>
</body>
</html>
load.php
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<a data-role="button">Button</a>
</div>
Related
Hi i am new for jquery mobile. I gt three page inside my apps. page1.html->page2.html->page3.html.
I need to preserve page1's textbox value when page2.html back to page1.html.
After i googling, i get the answer
$(document).bind("mobileinit", function () {
$.mobile.page.prototype.options.domCache = true;
});
How i back my page
history.go(-1);
go to next page
$.mobile.pageContainer.pagecontainer("change", url, {
allowSamePageTransition: true,
transition: 'none',
showLoadMsg: false,
changeHash: true
})
But nw is my problem when page2 back to page1, then page1 go to page2 , page2 textbox value will keep preserved also. Is it possible that when i click back button then textbox value will be preserved, but when i click next button then pages will be refresh?
You are doing it all wrong, you should have read everything about cashing.
When page cashing is turned on you still have a option to decide which page will have it turned on and which one will not get cashed.
All you need to do to prevent second page cashing is to add attribute data-dom-cache="false" to your second page data-role="page" div container, and that is that.
Working example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<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; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).bind("mobileinit", function () {
$.mobile.page.prototype.options.domCache = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<input type="text" value="" id="sdfsd"/>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>collapsible demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-dom-cache="false">
<div data-role="header">
Back
<h1>jQuery Mobile Example</h1>
</div>
<div data-role="content" class="ui-content">
<input type="text" value="" id="dffsd"/>
</div>
</div>
</body>
</html>
I'm using JQM 1.4.2 and have this JS:
$.mobile.changePage( "page.html", { reloadPage: true} );
and it works fine. Problem is, this will be deprecated in 1.5.0
now I try to use this:
$.mobile.pageContainer.pagecontainer("change", "page.html", { reload:true } );
and it does not work (page is not reloaded).
How to force page to reload?
Thank you.
First are you sure you are using correct jQuery Mobile 1.4 version? Beta versions of jQuery Mobile 1.4 didn't have pagecontainer widget.
This functionality works just fine.
I even made you a working example:
HTML1 - index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo 1</title>
<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; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).on('pageinit', '#index', function(){
$(document).on('click', '#changePage', function(){
$.mobile.pageContainer.pagecontainer( "change", "second.html", { reload: "true" } );
});
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<input type="button" value="Button" id="changePage">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
HTML2 - second.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo 2</title>
<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; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Update:
From what I can see this is a bug. I have reported it here: https://github.com/jquery/jquery-mobile/issues/7406
In my HTML file:
<div data-role="content" id="termsContent">
<div id="termDiv"></div>
</div>
in my js file:
$(function () {
$("#termsPage").live('pagecreate', function(event,ui){
$("#termDiv").load("tnc.html").trigger('create');
});
});
Then, in my tnc.html file:
<a href="http://www.xxx.com/usage-terms.html">
I seem can't find any solution in Google on how to load the local html page correctly. Does anyone have suggestion/experience on this? I want to show the clicked link directly.
You were close but not enough.
.trigger('create') can not be used after a load function. Load function is asynchronous so we need to wait for success state to trigger pagecreate.
Button example is not going to be shown, it needs to be closed.
Do not use pagecreate, in this case pagebeforeshow
Here's a working example:
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<div id="termDiv">
</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
load.html :
Onen link
index.js :
$(document).on('pagebeforeshow', '#index', function(){
$("#termDiv").load("load.html", function(){
$('#index').trigger('create');
});
});
I hope this was what you wanted all along.
I am trying to create a very simple phone gap application for iOS. I am using query mobile. the problem is, that i can't get javascript event to fire on button click.
Code i have now:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function showAlert() {
navigator.notification.alert("Cordova is working");
}
</script>
</head>
<body>
<div data-role="page" id="options" data-add-back-btn="true" data-back-btn-text="Atgal">
<div data-role="header" data-position="fixed">
<h1>Title</h1>
</div>
<div data-role="content">
<h1>Alert</h1>
<p>Show alert</p>
</div>
</div>
</body>
</html>
I tried multiple solutions to fix my problem, but none of them works. When have button with # in href, it doesn't event change the color on click. When i add url, it changes color. But it never call javascript function.
Another problem is, that document.addEventListener("deviceready", onDeviceReady, false); works only in the index page. If i press button in initial page which redirects to another page, OnDeviceReady function is never called.
Anybody has any ideas?
onDeviceReady() is only called once (when the device (ie Cordova) is ready). You'll want $(document).on('pageinit', '#pageid', function() { }); for something to fire every time the page is navigated to.
In the body tag you need to add tag and the onBodyLoad() function in the javascript should be like:
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
I am a total noob with phone gap and query mobile, so i made a stupid mistake. Problem is, that it loads not whole page, when i click on button, but only body part. This means, that it uses only javascript which is in the first page. And that was my problem. Now i have putted all javascript into separate file (all javascript for both files) and it works.
Try the following with jQuery:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function showAlert() {
navigator.notification.alert("Cordova is working");
}
$(function() {
$("#my_link").click(function() {
showAlert();
});
});
</script>
</head>
<body>
<div data-role="page" id="options" data-add-back-btn="true" data-back-btn-text="Atgal">
<div data-role="header" data-position="fixed">
<h1>Title</h1>
</div>
<div data-role="content">
<h1>Alert</h1>
<p><a id="my_link" href="#" data-role="button">Show alert</a></p>
</div>
</div>
</body>
</html>
Hope this helps. Let me know about your results.
Even though i had z-index set higher for the md-button it still wouldn't click on iOS. It clicked fine on Android. I had to set a parent container in my case the <md-subheader> to z-index: -1; then it worked.
I am a fresher in jquery mobile. I using the code get from stackoverflow. My problem is, this solution works well in samsung and other but not works in iphone and sonyericsson. Please help anyone...
I want to go back at the top of the page while scroll-down at bottom of the page by clicking link..
Here is my code:
<a id="uptotop" class="ui-btn-right" data-icon="arrow-u" data-theme="a">▲TOPにもどる </a>
<script type="text/javascript">
$('div').live('pagebeforecreate',function(event, ui){
$('#uptotop').live('click',function() {
$('html, body').animate({scrollTop: '0px'}, 800);
});
});
</script>
what about using a simple anchor? example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1><a name="top"></a>Header</h1>
</div> <!-- /header -->
<div data-role="content">
<p>lots of content here...<br>scroll down to find the button...
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Back to top of page ...
</p>
</div> <!-- /content -->
</div> <!-- /page -->
</body>
</html>