I am having trouble getting jQuery-mobile load page to load my next page into the "content" div.
I have cut my page down to the basics and here is the code.
index.html:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery Mobile Load Page Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div id="containerTest" data-role="content">
<input type="button" id="nextPage" data-inline="true" value="Load Second Page"/>
</div> <!-- /content -->
</div> <!-- /page -->
<script>
$( "#nextPage" ).on( "click", function()
{
$.mobile.loadPage("nextPage.html",
{
pageContainer: $('#containerTest')
});
});
</script>
</body>
</html>
and nextPage.html
<div data-role="page">
<p>this is the next page</p>
</div> <!-- /page -->
I don't think You can load a page inside another page, you could try something like this though:
$(document).on('pageinit', function(){
$( "#nextPage" ).on( "click", function(){
$('#containerTest').load('nextPage.html [data-role="content"]',function(){
$('.ui-page-active').trigger('create');
});
});
});
This will load the content (<div data-role="content">) from page 2 inside the container, then it will trigger the create event on the original page to enhance the loaded content
Related
I'm having a tough time with something that I think is pretty simple. I hope you folks can help me.
I'm using a jquery plugin called zoomtoo.
I need to have the plugin function (zoomToo()) applied on a child div (modal-img-wrap) inside its parent div (modal).
The JS script:
<script type="text/javascript">
$(function() {
$(".modal").zoomToo({
magnify: 1
});
});
</script>
The HTML code:
<body>
<div id="ex2" class="modal">
<div class="modal-img-wrap">
<img class="modal-img" src="homedrive.jpg" />
</div>
</div>
</body>
Here is a working example. Notice the attributes in the divs. And bind the jquery.zoomtoo.min.js script, because it's minified, e.g. smaller. If you already have a css class on the image containing div (modal-img-wrap), then you can also directly reference it inside js. So, instead of .modal .modal-img-wrap you can write .modal-img-wrap in js script.
Good luck.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="dist/jquery.zoomtoo.min.js"></script>
<script type="text/javascript">
$(function () {
$(".modal-img-wrap").zoomToo({
magnify: 1
});
});
</script>
</head>
<body>
<div id="ex2" class="modal"><!-- Not this div -->
<div class="modal-img-wrap" data-src="homedrive_big.jpg"><!-- I need this div selected by the plugin. -->
<img class="modal-img" src="homedrive_normal.jpg" />
</div>
</div>
</body>
</html>
I'm confused, you can select the div by name $( "#MyDiv" ). Set the name property of the div.
$(function() {
$("#MyDiv").zoomToo({
magnify: 1
});
});
</script>
I'm trying to pass an object from a page in page1.html to page2.html using jquery. The existing solution has a 100s of pages so having a div for each page in the same file is not a practical option.
Content of Page1.html
<!DOCTYPE html>
<html>
<head>
<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>
<script>
$(document).on("pagebeforeshow", function (event) {
alert("pagebeforeshow event fired - pageOne is about to be shown");
});
function switchPage() {
$(":mobile-pagecontainer").pagecontainer("change", "second.html", { role: "page", stuff: "456", reloadPage: true });
}
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Header Text</h1>
</div>
<div data-role="main" class="ui-content">
<p>Page One</p>
Go to Page Two
<input id="Button1" type="button" value="button" onclick="switchPage()" />
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
This is the contents of page2.html
<!DOCTYPE html>
<html>
<head>
<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>
<script>
$(document).on("pagebeforeshow", function (event) {
alert("pagebeforeshow event fired - pageTwo is about to be shown");
});
$(document).on('pagebeforeshow', 'second.html', function (e, data) {
alert("pageTwo alert"); // + data.prevPage.find('#test-input').val());
});
</script>
</head>
<body>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Header Text</h1>
</div>
<div data-role="main" class="ui-content">
<p>Page Two</p>
Go to Page One
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
Neither of the alerts in page2.html fire when the page is changed from the button click event and the pageOne message shows when clicking on the "a link"on page 1.
How can i make page2.html display its own alerts and grab the data being passed from page1 as I need to catch the data object being passed from page1 and react to its contents in page2.
Links i've looked at include:
http://jsfiddle.net/Gajotres/XyqvS/
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_event_pagebeforeshow2
The pagebeforeshow event is deprecated as of jQuery Mobile 1.4 (therefor you really shouldn't use it).
If you must use it - the general idea of the event is to trigger before the transitioning to the new virtual page (inside the same DOM layout), and not before switching between two real different html pages.
The event gets only 1 parameter (a function), so you can't do .on('pagebeforeshow', 'second.html', function
You can use cookies/localstorage to share data between two pages on the same domain, but your question is not so clear - what exactly you are trying to do?
My phonegap project is having multiple html's(more than 4) with some single-paged and multi-paged.
When I move around pages, sometimes javascript breaks. maybe I am linking pages wrong... i've been googling..and got so many different answers.
some say to include all the same heads' because .js won't load by ajax-type page loads
some talk about app.initialize(); some talk about 'pageinit'. some recommends to use onload(); in body tag. some say pageshow: function(){}.
some talk about .Deferred()/ $.when(deviceReadyDeferred,jqmReadyDeferred).then(doWhenBothFrameworksLoaded);
so many ways to initialize!
WHAT IS THE BEST PRACTICE IN INCLUDING JS FILES?
Also, there are so many ways to link pages.
i guess if an anchor leads to multi-paged html, use data-rel='external' is good practice. but some say data-dom-cache="true". some say $.mobile.changePage();
WHAT IS THE BEST PRACTICE IN LINKING PAGES?
from single-paged .html --> multi-paged .html
from multi-paged .html --> single-paged .html
from single-paged .html --> single-paged .html
from multi-paged .html --> multi-paged .html
can you give me a good foundation tutorial? or links to one of them?
thank you in advance.
You can try my method.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include the compiled Ratchet CSS -->
<link href="css/ratchet.css" rel="stylesheet">
<script src="cordova.js" type="text/javascript"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/ratchet.js"></script>
<script src="js/main.js"></script>
</head>
<body onload="init()">
</body>
</html>
main.js
var pagesHistory = [];
var currentPage = {};
var path = "";
function init(){
$("body").load(path + "pages/ListPage.html", function(){
$.getScript(path + "js/ListPage.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
ListPage.js
currentPage = {};
currentPage.init = function(){
console.log("ListPage :: init");
};
currentPage.loadPage = function(pageIndex){
console.log("ListPage :: loadPage :: pageIndex: " + pageIndex);
$("body").load(path + "pages/" + pageIndex + ".html");
$.getScript(path + "js/" + pageIndex +".js", function() {
if (currentPage.init) {
currentPage.init();
}
});
};
ListPage.html
<script>
$.getScript(path + "js/ListPage.js");
</script>
<header class="bar bar-nav">
<button id="LoadAddButton" class="btn pull-right" onclick="currentPage.loadPage('AddPage');">Load Add.html</button>
<h1 class="title">ListPage</h1>
</header>
<div class="content">
<div class="content-padded">
<button id="LoadDetailButton" class="btn btn-positive btn-block" onclick="currentPage.loadPage('DetailPage');">Load Detail.html</button>
</div>
</div>
Let me know if you need more clarification about this navigation.
Reference: http://blog.revivalx.com/2014/07/15/simple-hybrid-mobile-app-using-cordova-and-ratchet-2-complete/
Not important when you load your pages. Because all of your html files are included your app package.
I've used jQuery Mobile like the following;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery.css">
<script src="js/dependencies/jquery.js"></script>
<script src="js/dependencies/jquery.mobile.js"></script>
<script src="js/dependencies/ejs.js"></script>
</head>
<body>
<div data-role="page" id="page-homepage" class="my-page" data-theme="b">
<div data-role="header" class="div-header">
// some header contents
</div>
<div role="main" class="ui-content">
// some contents
</div>
</div>
.
.
<div data-role="page" id="page-login" class="my-page" data-theme="b">
<div role="main" class="ui-content">
// login contents
</div>
</div>
.
.
<script>
/* jQuery Mobile pagecontainer change function's options */
var changePageOptions = {
transition: 'none',
changeHash: true,
reverse: true,
showLoadMsg: true
};
$("#btn-page-login").on("tap", function() {
$(':mobile-pagecontainer').pagecontainer('change', '#page-login', changePageOptions);
});
</script>
</body>
</html>
This question already has answers here:
java script append to <li/> does not work [closed]
(3 answers)
Closed 8 years ago.
I am trying to click one button to load a page into a div block dynamically. To test it, I try to append a list item with text "abc" into the loaded page. However, I always get a blank page. load function works fine because if I try to load a static page, it works. Following is my main html page code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LoadPageTest</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="./css/customizedstyle.css">
<link rel="stylesheet" href="./css/themes/default/jquery.mobile-1.4.3.min.css">
<link rel="stylesheet" href="./css/jqm-demos.css">
<script src="./js/jquery.js"></script>
<script scr="./js/customizedjs.js"></script>
<script src="./js/jquery.mobile-1.4.3.min.js"></script>
<script>
$( document ).on( "pagecreate", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
}
}
});
});
</script>
<style type="text/css">
body {
overflow:hidden;
}
</style>
</head>
<body style= "overflow:hidden" scrolling="no">
<style type="text/css">
body {
overflow:hidden;
}
</style>
<div data-role="page" id="main-page" style= "overflow:hidden" scrolling="no">
<div role="main" class="ui-content" id ="maindiv" style= "overflow: auto">
Will load diff pages here.
</div><!-- /content -->
<div data-role="panel" id="left-panel" data-theme="b">
<ul data-role="listview" data-icon="false" id="menu">
<li>
<a href="#" id = "btnA" data-rel="close">Go Page A <img src="./images/icona.png" class="ui-li-thumb"/>
</li>
<li>
<a href="#" id = "btnB" data-rel="close">Go Page B <img src="./images/iconb.png" class="ui-li-thumb"/>
</li>
</ul>
</div><!-- /panel -->
<script type="text/javascript">
$("#btnA").on("click", function(){
$("#maindiv").empty();
$("#maindiv").load("pageA.html");
});
$("#btnB").on("click", function(){
$("#maindiv").empty();
$("#maindiv").load("pageB.html");
});
</script>
</div><!-- /page -->
</body>
</html>
Next is code for the page I try to load dynamically.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page should be loaded</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="./css/customizedstyle.css">
<link rel="stylesheet" href="./css/themes/default/jquery.mobile-1.4.3.min.css">
<link rel="stylesheet" href="./css/jqm-demos.css">
<script src="./js/jquery.js"></script>
<script scr="./js/customizedjs.js"></script>
<script src="./js/jquery.mobile-1.4.3.min.js"></script>
<script>
$(document).on('pagebeforeshow', function () {
$('#postlist').append('<li> abc </li>');
$('#postlist').listview('refresh');
});
</script>
</head>
<body >
<div data-role="page" id="posthome">
<div data-role = "content">
<ul data-role='listview' id = "postlist">
</ul>
</div>
</div>
</body>
</html>
I doubt if it is because my javascript in the page doesn't work, cause the swipe js code in the main page seems not work either. Is that possible? I have enabled javascript in the onCreate() function of the activity file as below.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_message);
new LongRunningGetIO().execute();
mWebView = (WebView) findViewById(R.id.webview);
mWebView.setWebViewClient(new AppClient());
mWebView.setVerticalScrollBarEnabled(false);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.loadUrl("file:///android_asset/index.html");
}
I noticed there is a warning for statement to enable javascript "Using setJavaScriptEnabled can introduce XSS vulnerabilities into you application, review carefully". Will that maybe the reason? Then, I added #SuppressLint("SetJavaScriptEnabled") on top of the activity. The warning is gone, but the js code in pages seem still not work.
I had the same problem, i could solve it adding the line
myWebView.setWebChromeClient(new WebChromeClient());
My goal is to have the method onClickLogin called when I press the submit button in a form. But only the method initialize (for loginPageController) is called. This code works fine, when every methods is in app object, but when I add loginPageController script has stopped working properly. How do I fix that?
I have this HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.4.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/index.js"></script>
<title>Example</title>
</head>
<body>
<!-- Start of login page -->
<div data-role="page" id="login-page">
<!-- Start of page header -->
<div data-role="header" style="overflow: hidden;">
<h1>Login</h1>
</div>
<!-- /header -->
<!-- Start of page content -->
<div role="main" class="ui-content">
<form id="login-form">
<label for="login-username" class="ui-hidden-accessible">User Name</label>
<input name="login-username" id="login-username" placeholder="User Name" value="" type="text">
<label for="login-password" class="ui-hidden-accessible">Password</label>
<input name="login-password" id="login-password" placeholder="Password" value="" type="password">
<div class="ui-grid-a">
<div class="ui-block-a"></div>
<div class="ui-block-b">
<button type="submit" name="login-submit" value="login-submit">Login</button>
</div>
</div>
</form>
</div>
<!-- /content -->
</div>
<!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<!-- Start of page content -->
<div role="main" class="ui-content">
<p>I'm the second in the source order so I'm hidden when the page
loads. I'm just shown if a link that references my id is beeing
clicked.</p>
<p>
Back to foo
</p>
</div>
<!-- /content -->
</div>
<!-- /page -->
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And I have this JavaScript:
var app = {
initialize: function() {
console.log("app.initialize");
this.bindEvents();
},
bindEvents: function() {
console.log("app.bindEvents");
$(document).on("pageinit", "#login-page", loginPageController.initialize);
}
};
var loginPageController = {
initialize: function() {
console.log("loginPageController.initialize");
$("#login-form").on("submit", this.onClickLogin);
},
onClickLogin: function() {
console.log("loginPageController.onClickLogin");
}
};
See this working fiddle: http://jsfiddle.net/THWZU/7/
1: jQuery Mobile needs to initialize itself first.
Your code is not being run in the proper order. It needs to be run after jQuery and jQuery Mobile do all their own initialization. You need the entire page to load before you call your initialization.
This is all you need, for pure jQuery:
$( document ).ready( function() {
app.initialize();
});
This also works for you, with jQuery Mobile:
$( document ).on( "pagebeforeshow", function() {
app.initialize();
});
Keep these events in mind: http://api.jquerymobile.com/category/events/
Especially these:
http://api.jquerymobile.com/pagebeforecreate/
http://api.jquerymobile.com/pagebeforeshow/
2: Bind to the button itself and return false after that.
New loginPageController code:
var loginPageController = {
initialize: function() {
console.log("loginPageController.initialize");
$("[name='login-submit']").on("click", this.onClickLogin);
},
onClickLogin: function() {
console.log("loginPageController.onClickLogin");
return false
}
};
See this working fiddle: http://jsfiddle.net/THWZU/7/