In jQuery mobile I want to load pagecontainers from external files. I can add the markup to my DOM, but the problem I am facing afterwards is that as soon as I navigate to #page2, the entire #page1-div disappears from the DOM and thus I cannot navigate back (Please see screenshots below).
DOM before clicking "Go To Page 2"
DOM after clicking "Go To Page 2"
As you can see, the entire #page1-div is gone for good. Why is that? Any thoughts? Please see my markup and code below:
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">
<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" class="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
Go Back To Page 1
</div>
</div>
Remarks: This is a follow up question to this one: jQuery mobile - Splitting up pages to different files
jQuery Mobile removes external pages when you navigate away of them. You should leave a base page cached in DOM rather than loading all pages.
Solution one: in test.html, add html markup of page1.html and load page2.html externally.
Solution two: add data-dom-cache="true" to page1 div to keep it cached even if it's loaded externally.
<div data-role="page" id="page1" data-dom-cache="true">
Update
You can cache all external pages at once without the need to add data-dom-cache to each and every page div. All you need to do is to globally set domCache option of page widget to true on mobileinit event. The code should be placed after jQuery.js and before jQuery-Mobile.js.
<script src="jquery.js" />
<script>
$(document).on("mobileinit", function () {
$.mobile.page.prototype.options.domCache = true;
});
</script>
<script src="jquery-mobile.js" />
For this case, you should try to init the page manually
In page1:
$(document).bind("mobileinit", function () {
...
$.mobile.autoInitializePage = false;
$.mobile.initializePage();
});
In page2:
$(function () {
$.mobile.activePage = null;
$.mobile.initializePage();
});
This is my solution for switch 2 pages not in same HTML.
Related
Just wondering if anyone knows of a decent jQuery plugin (Or Javascript) that would allow me to load "view" (NOT PARTIAL VIEW) into a <div> when a user clicks on a link.
Here's where it may be tricky, I have 8 pages.I have a Homepage in that, there is 3 divisions. First division for Header and second one have picture and third one for footer. I want to load view into second division. I have been searching Google and have not been able to find anything that seems stable.
Thanks in advance Shiyas :)
I have tried below code. It's not working.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("http://localhost:56708/Home/Books");
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
</body>
This code is from my HomePage. In here I am rendering Header(Partial view) into the first divison. When i click on a link in Header, the book view should load into middle division. Well, It's not loading.
You can use jquery load function.
Load data from the server and place the returned HTML into the matched element.
$('#divId').load('url');
jQuery .load() documentation
Place the piece of your script that loads the view at the bottom of your page just before </body>. You should also use a relative URL, so when you release to production you will not have to change this. Try the below.
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("/Home/Books");
});
</script>
</body>
I have working javascript mobile app which I have been trying to restructure (correctly or incorrectly). The index.html file contained one page (using data-role="page") with various <div> elements that I hide and show depending what the user wants to do. I thought I could improve the structure by putting each of these <div> elements each in their own page (still in the index.html file) using data-role again. However, the subsequent pages lose their javascript functionality. I have created a very simple index.html file to demonstrate:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"/></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="mainPage">
<INPUT type="button" id="showPageTwo" value="Show Next Page" />
</div>
<div data-role="page" id="secondPage">
<INPUT type="button" id="showMainPage" value="Show Main Page" />
</div>
<script>
$(document).on("pageshow", "#mainPage", function(e) {
alert("Main page");
$("#showPageTwo").click(function()
{
$("#secondPage").show();
$("#mainPage").hide();
});
});
$(document).on("pageshow", "#secondPage", function(e) {
alert("Second page");
$("#showMainPage").click(function()
{
$("#mainPage").show();
$("#secondPage").hide();
});
});
</script>
</body>
</html>
Main page displays correctly, the alert is displayed $("#showPageTwo").click(function() works. But none of the javascript runs when secondPage loads.
Additionally when secondPage is shown it does not have the styling from jquery.mobile-1.3.2.min.css that mainPage has.
What am I doing wrong or misunderstanding? (This is when running the app in the Eclipse AVD)
Additionally, I would like to know:
Is the way I am trying to restructure my code using data-role="page" good or bad practice? Is there a recommended way to structure "pages" in a mobile app?
I also want to put my custom script(s) in their own .js file(s). Can I only load the script shown in the above code before the </body> tag? Is there any way to load it in the header along with all the other scripts?
I have a simple jquery mobile page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="MyContainer">
<!-- ##################### Raw Part ##################### -->
<div data-role="page">
<div data-role="header">
<h1> Hello World </h1>
</div>
</div>
</div>
</body>
</html>
when I execute that page it renders fine with a black header and title.
The reason why that page loads correctly is because jquery-mobile placed new attributes where needed in fact the innerHTML of MyContainer after the page loads is:
<!-- ##################### Parsed Part ##################### -->
<div data-role="page" data-url="/jqueryMobile/TC_Page/main2.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 1464px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">
Hello World
</h1>
</div>
</div>
In other words the Raw Part turn into the Parsed Part .
I will like to know what jquery.mobile function made the conversion from the Raw Part to the Parsed Part!
The functions $.mobile.changePage(), $.mobile.loadPage() enables me to do that For example I could do:
// place response from SomeUrl inside the div MyContainer and convert it from raw to parsed!
$.mobile.loadPage('SomeUrl', { pageContainer: $('#MyContainer') });
// later then get the child child (note second child) of MyContainer and make that the child of MyContainer
The problem now is:
All those functions: loadPage, ChangePage etc make an ajax call. What if I already have the html that I want to inject ( I have it in webBrowser local storage or in a Cookie)! In other words how can I make this work:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="MyContainer">
</div>
<script>
function SomeFunction(){
var someHTML = localStorate.html1; // html1 = raw part = <div data-role="page"><div data-role="header"><h1> Hello World </h1></div></div>
$("#MyContainer").html(someHTML);
// now here I am stuck!!!!!!!!!!!!!!!
// how can I make the content of MyContainer go from the raw part to the Parsed Part!
// I am looking for something like:
$JqueryMobile.ParseHTML($("#MyContainer"));
}
</script>
</body>
</html>
Solution
jQuery Mobile provides numerous functions for widget restyling but only one of them will restyle whole page.
$('#index').trigger('pagecreate');
Where #index should be an id of your page DIV.
There is also on other function that can be used here, but unlike trigger('pagecreat'); this function will style only DIV wit data-role="content" attribute. To test this, jsFiddle example trigger('pagecreate'); should be replaced with trigger('create');
$('#index').trigger('create');
If possible SCRIPT tag should not be used inside a BODY tag, while it will work it can cause additional problems. If you want to find more about this topic and how jQuery Mobile handles dynamically added content take a look at this ARTICLE which is a part of my personal blog.
Example
Working example: jsFiddle
This part of code should interest you:
$('#index').append('<div data-role="footer" data-position="fixed"><h1>Dynamicaly added footer</h1></div> ');
$('#index [data-role="content"]').append('<fieldset data-role="controlgroup"><legend>Choose:</legend><input type="radio" name="radio" id="radio1" value="1" checked="checked" /><label for="radio1">option 1</label></fieldset>');
$('#index').trigger('pagecreate');
This code is used to dynamically append page footer and a radio button to page content.
page1.html
<!DOCTYPE html>
<html>
<head>
<script src="common_script.js"></script>
</head>
<body onload="init()">
<h1>My First Page</h1>
<p id="demo">This is a paragraph.</p>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<script src="common_script.js"></script>
</head>
<body>
<h1>My second Page</h1>
<div id="nextpageId">I want to access my div</div>
</body>
</html>
common_script.js
function init() {
alert($("#nextpageId").text());
}
In the following code I have two pages i.e. page1.html & page2.html and these contain the common JavaScript file.
My problem is to access page2.html div#id when page1.html is loading.
use this in your javascript
$('body').attr('unique_id')
and give unique id for your page in body tag
<body id='unique_id'>
or you can also pass in url
or use this code
function init() {
alert( $('div').attr('id') == "nextpageId" )
}
You don't explicitly state that you are using jQuery Mobile but you have tagged your question as such and are using PhoneGap so I will assume so...
Your pages don't conform to a standard jQuery Mobile layout. They are missing the required data-roles. Specifically data-role="page" along with child data-role="content" declarations.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
Your second page will be loaded via Ajax and the <script> tag on the second page will be ignored. In fact, only the contents of the nested <div data-role="page"> section will be loaded.
To pull that markup, you can simply access the <div> given its ID and that ID should be unique. You can use the pageinit or pageshow events to control your timing on the Ajax load.
http://jquerymobile.com/demos/1.2.0/docs/api/events.html
I am using android 2.2, phonegap 1.3, and jquery-mobile 1.0
I have a list view in which there is an element in the list that I want to use to create a dialog. I would like my dialog to be defined in a separate file so I can reuse it and I would like it to set the title according to the value I pass.
My dialog looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title"></h1>
</div>
<div data-role="content">
...
</div>
</div>
</body>
</html>
I have tried using a #href with the title parameter (as defined below), dialog is opened but the title param isn't present.
<ul data-role="listview" data-theme="a">
...
<li><a href="dialog.html?title=blah" data-rel="dialog"/></li>
...
</ul>
I have read that I could use a data-url but in this case it is not clear where I define it (in the <a> or in a <div> which wraps it) and how I extract this in the dialog page.
EDIT
For the record the mechanism works in a standard browser but without the styling.
I created the script inside the <script> tags below which listens for page show events and updates the title and placeholder for the input.
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title">
</h1>
</div>
<div data-role="content">
<input placeholder="Type here..." id="configtext">
</input>
...
<script type="text/javascript">
$("div.ui-page-z").live("pageshow", function(event, ui) {
var dataUrl = $(".ui-page-active").attr("data-url");
$("#title").empty();
$("#title").append(SMSPLUS.getValue("title", dataUrl));
$("#configtext").attr("placeholder", SMSPLUS.getValue("placeholder", dataUrl));
});
</script>
</div>
The script wasn't detected when placed in the header (presumably because the framework takes no notice of headers for dialogs)
You might try removing the
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
</body>
and only return the body html & javascript in your ajax call. Having two DOMS in one might confuse the browser.