Is there any method to call/show Dialog or popup before page load using jquery Mobile?
I want to get some input before page load and according to that input next page will be loaded
To load a dialog or a popup before showing a page, you need to use seTimeout. if you call it without a delay, it will open and close at once.
$(document).on('pagebeforeshow', '#pageID', function() {
setTimeout(function () {
$('#popupID').popup('open');
}, 100); // delay above zero
});
Similar issue.
There's a very simple solution to your question, only thing you need to do is make your first page to be a dialog.
Working example: http://jsfiddle.net/Gajotres/dj3UP/1/
As you can see it in my example this is a pure HTML solution. First page data-role attribute was changed to dialog.
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://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="dialog" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<input type="text" value="" id="some-input"/>
<a data-role="button" id="some-button" href="#second">Next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Try Following:
$.mobile.loading( 'show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: ""
});
Refere Link:
http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html
Related
The following code creates a dialog page in jQuery Mobile:
<div data-role="page" id="dialogPage" data-dialog="true" data-theme="b" data-close-btn="right">
<div data-role="header">
<h2> replace html </h2>
</div>
<div role="main" class="ui-content">
<p> replace html </p>
close dialog page
</div>
</div>
The page is currently called with:
open dialog page
How can I make this dialog page dynamic so that I can replace the html in the "header" and "main" content areas when the user clicks on a unique anchor element. I need to be able to create multiple anchor tags that can each dynamically alter the content of the same dialog page. For example:
button1
button2
You just need to use the pagecontainerbeforeshow trigger:
var data = {
"dialog-1": {
title: "Choose one:",
content: [
'<fieldset data-role="controlgroup" data-type="horizontal">',
'<legend>Horizontal controlgroup, checkbox:</legend>',
'<input name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">',
'<label for="checkbox-h-2a">One</label>',
'<input name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox">',
'<label for="checkbox-h-2b">Two</label>',
'<input name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox">',
'<label for="checkbox-h-2c">Three</label>',
'</fieldset>'
].join("")
},
"dialog-2": {
title: "Search:",
content: [
'<label for="search-2">Search Input:</label>',
'<input name="search-2" id="search-2" value="" type="search">'
].join("")
}
},
calle = "";
$(document).on("vclick", "a[data-dialog]", function(e) {
calle = $(this).data("dialog");
});
$(document).on("pagecontainerbeforeshow", function(e, ui) {
var pageId = ui.toPage.attr("id");
if (pageId == "dialogPage") {
$("#dialogPage .ui-title").text(data[calle].title);
$("#dialogContent").html(data[calle].content);
$("#dialogPage").enhanceWithin();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-theme="a" data-role="header" data-position="fixed">
<h2>List Page</h2>
</div>
<div data-role="content">
<a class="ui-btn ui-btn-inline" href="#dialogPage" data-dialog="dialog-1" data-transition="none">Callee 1</a>
<a class="ui-btn ui-btn-inline" href="#dialogPage" data-dialog="dialog-2" data-transition="none">Callee 2</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>Footer</h3>
</div>
</div>
<div data-role="page" id="dialogPage" data-dialog="true" data-theme="b" data-close-btn="right">
<div data-role="header">
<h2> replace html </h2>
</div>
<div role="main" class="ui-content ui-page-theme-b">
<div id="dialogContent"> replace html </div>
close dialog page
</div>
</div>
</body>
</html>
I have this slide out panel with a comment form in it, after user submitted the comment form, a "THANK YOU" will appear, the problem is, after I close the panel, and slide it out again for a second comment, the "THANK YOU" is still there! I was hoping to see a new unfilled comment form.
How do I have a fresh new original comment form to show up instead of the leftover from previous session?
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("comment.pl", {
comment:$("#comment").val(),
},
function(data,status){
document.getElementById('div2').innerHTML = "THANK YOU";
});
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<p>Click on the link to see the slide effect.</p>
Slide to Dialog Page
</div>
</div> <!-- pageone -->
<div data-role="popup" data-dialog="true" id="pagetwo" >
<div data-role="main" class="ui-content">
<div id="div2">
<b>Enter Comment</b>
<br>
<textarea name="comment" id="comment" data-role="none" rows=5 cols=30 onkeypress="if(event.keyCode==13){return false;}" onKeyDown="limitText2(this,100);" onKeyUp="limitText2(this,100);" style="resize:none;"></textarea>
<br>
<button data-inline="true"><font size=+2 color=#333333>Enter</font></button>
Go to Page One
</div> <!-- div2 -->
</div> <!-- ui-content -->
</div> <!-- pagetwo -->
</body>
</html>
Instead of changing the content of the div2, it would be better to .append or .show an element. If we recreate the contents of div2 at runtime, we would need to reapply all the JS over this new code, in order to refresh it and make it able to post the data properly.
So, create a #success div that appears when the button is clicked:
...
function(data,status){
$('#success').show();
});
...
There is an event that runs when an page transition animation is complete:
$( document ).bind( "mobileinit", function() {
$('div[data-role="main"]').live('pagehide',function(event, ui){
//the 'pageHide' happens when the main is hidden
$('#success').hide();
});
});
I am new to jquery and jquery mobile. I am currently trying to create a simple mobile application that, once a page is loaded, displays an alert message.
I have added in the head section of the html file, as suggested, the following code:
<link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$('#chart').live('pageinit', function() {
alert('jQuery Mobile: pageinit for Config page');
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>
In the body section I have added, as expected, the code for the chart page:
<div data-role="page" data-theme="b" id="chart">
<div data-role="header" data-position="fixed">
Back
<h1>Year Chart</h1>
</div>
<div data-role="content">
<div id="container"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
</div>
</div>
</div>
However, when the chart page is loaded in the browser of my computer (not the phone), no alert message is displayed. Does anyone know where the problem may lie? Thanks in advance!
Here is the full HTML and code that I can success alert in my all browser(IE, chrome, firefox). I guess some of your javascript are not exist or typo. Try to use CDN.
<html>
<head>
<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>
<script type="text/javascript">
$( '#chart' ).live( 'pageinit',function(event){
alert( 'This page was just enhanced by jQuery Mobile!' );
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="chart">
<div data-role="header" data-position="fixed">
Back
<h1>Year Chart</h1>
</div>
<div data-role="content">
<div id="container"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
</div>
</div>
</div>
</body>
</html>
UPDATED:
If you are using jquery 1.9+, we should use .on instead of .live. It is because .live has been removed from 1.9. http://api.jquery.com/live/
So, the code should change like this if you are using 1.9
$( document ).on( 'pageinit','#chart', function(event){
alert( 'This page was just enhanced by jQuery Mobile!' );
});
I think that jQuery Mobile page events (like pageInit) don't bubble outside the page. Try to insert the script tag inside the the page div like this
<div data-role="page" data-theme="b" id="chart">
<div data-role="header" data-position="fixed">
Back
<h1>Year Chart</h1>
</div>
<div data-role="content">
<div id="container"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
</div>
</div>
<script type="text/javascript">
$('#chart').live('pageinit', function() {
alert('jQuery Mobile: pageinit for Config page');
});
</script>
</div>
Alternatively you can bind the pageInit function to the document element like this:
$(document).live('pageinit', function() {
alert('jQuery Mobile: pageinit for Config page');
});
But I think the first solution is more inline with the best practices
Edit: I see the issue is with using live instead of on. I fixed that however, can't get the second timer to fire..
Error: Object [object Object] has no method "popup"
I am trying to implement a client side session time out using jquery mobile. My code is at: http://jsfiddle.net/83BSW/5
Appreciate any insights..
Here is the code for convenience:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<!-- Application specific -->
<script>
var first_timer = 2 * 1000;
var second_timer = 3 * 1000;
var down = -1;
function initTimer() {
down = setTimeout(processTimeout, first_timer)
}
function processTimeout() {
down = setTimeout(logout, second_timer);
$.mobile.changePage('#timeout1',{transition:'slide', role:'dialog'});
//alert ("Timeout of first timer, timerid:" + down );
}
function logout() {
$("#timeout").popup('close');
$.mobile.changePage('#timeout2',{transition:'slide', role:'dialog'});
alert("You are logged out");
// window.location = "http://www.google.com"
}
function resetMyTimer() {
if ( -1 != down )
clearTimeout(down);
alert("Restarting timer");
initTimer();
}
$("#loadingpage").on(function() {
resetMyTimer();
});
initTimer();
</script>
</head>
<body>
<div data-role="page" id="loadingpage">
<div data-role="header" data-position="fixed">
<div class="headerlogo"> </div>
<h1> Test </h1>
</div>
<div data-role="content" >
<div id="ssagov">
<h1> Hi there </h1>
</div>
<input type="button" data-shadow="false" data-corners="false" value="Next" />
</div><!-- /content -->
</div><!-- /launch page -->
<div data-role="page" id="timeout1" data-role="popup">
<div data-role="header" data-backbtn="false">
<h1>Timeout1</h1>
</div>
<div data-role="content">
Your session will timeout in 2 mins.
</div>
</div>
<div data-role="page" id="timeout2" data-role="popup">
<div data-role="header" data-backbtn="false">
<h1>Timeout2</h1>
</div>
<div data-role="content">
Your session has timed out
</div>
</div>
</body>
</html>
Finally I fixed the issue, instead of popup, I should be using dialog. Here is the working version: http://jsfiddle.net/83BSW/6
I'm using the "DynamicPage" jQuery plugin to make my pages not reload when navigating. On the index page is a image slider plugin called "Coin-Slider". The dynamic page works fine, except when I click to go back to the index page where the image slider is. For some reason (from what I can tell) the Coin-Slider ready function isn't activating when it goes back to the index. May be something to do with the URL, as host.com/index.php works but host.com/#index.php does not. Any reason why it's doing this? I've tried including the ready function in the DynamicPage function in the js file to execute whenever the page changes, but it didn't help. Page is included below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Liberty Design, Scarborough</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
</head>
<body>
<div id="nav-back"></div>
<div id="wraps">
<div id="left-wrap"></div>
<div id="right-wrap"></div>
</div>
<div style="background:url(images/layout/shadow-bottom.png) no-repeat bottom center; width:900px; margin:0 auto; padding-bottom: 26px;">
<div id="page-wrap">
<div id="header">
<div id="banner">
<div id="social"><img src="images/layout/facebook.png" alt="Like us on Facebook!" /></div>
</div>
</div>
<navbar>
<div id="nav">
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px; z-index:999;"></div>
<ul id="navbar">
<li>Home</li>
<li>Facilities</li>
<li>Staff</li>
<li>Where are we?</li>
<li>Contact</li>
</ul>
</div>
</navbar>
<section id="main-content">
<div id="guts">
<!-- Content Start -->
<div style="background:url(images/layout/sides.png) center center no-repeat; height:373px;">
<div id="gamesHolder">
<div id="games">
<img src="images/banner_img/1335800583.png" alt="Welcome" />
<span>
<b>Welcome</b><br/>
Welcome to Liberty
</span>
<img src="images/banner_img/1335800633.png" alt="shop front" />
<span>
<b>shop front</b><br/>
this is the front of the shop
</span>
<img src="images/banner_img/" alt="staff #3" />
<span>
<b>staff #3</b>
<br/>this is the description for staff #3
</span>
<img src="images/banner_img/" alt="staff #1" />
<span>
<b>staff #1</b><br/>
this is staff #1
</span>
<img src="images/banner_img/" alt="asdas" />
<span>
<b>asdas</b><br/>
sdasdas
</span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
});
</script>
</div>
</section>
<div id="footer">
<!-- Cosmetics for the footer -->
<div id="footer-back"></div>
<div id="footer-wraps">
<div id="footer-left-wrap"></div>
<div id="footer-right-wrap"></div>
</div>
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px;"></div>
<center style="position:relative; top:-8px; color:#999;">Liberty Design, Scarborough - Website by Chain.</center>
</div>
</div>
</div>
</body>
</html>
Ok, mydomain.com and mydomain.com/#anything are the same, they point to your default file which can be index.php, index.html or whatever. The browser doesn't refresh while it navigates to the same file but diffrent hash tags like: from file#hashA to file#hashB or from file to file#hashRandom or from file#index.php to file. Since the page doesn't refresh (gets loaaded) the document ready doesn't gets fired either (it already got fired the first time the page got loaded).
First fix to your problem:
instead of linking to mydomain.com/#index.php link to mydomain.com or mydomain.com/index.php
Second fix is:
<script>
$(document).ready(function() {
var sliderInit = false;
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
// Adding fix
$('#idOfLinkThatGetsClicked').click(function () {
if (!sliderInit) {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
sliderInit = true;
}
});
});
</script>