i have an issue with a form on a jquery mobile site with two or more pages.
one page contains a form and when clicking the submit button of this form, i want to submit the form data and then stay right on this page. so i added the id of that page to the form's action attribute. (<form action="#two">).
but unfortunately this doesn't seem to work. when submitting the form data, always the first page of the actual file is loaded, even if the browser's url seems right (the correct id was appended to it).
and it's getting even worse. because i added the id to the form's action attribute, jqm loads the first page of the file but apparently thinks to be on the second page, so the link pointing to the page with the form won't work anymore.
one thing resolved this issue: adding data-ajax="false" to the form element forces jqm to stop ajax-based page handling for this form and when clicking the submit button i end up on the right page, but i do not want to reload the entire page so that's no solution.
does anyone know what's going on here and has encountered the same issue? feel free to try the appended example, i hope someone can solve this.
<!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.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" id="one">
<div data-role="header">
<h1>First page</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
<p>Link to second page</p>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="two">
<div data-role="header">
<h1>Second page</h1>
</div><!-- /header -->
<div data-role="content">
<form action="#two">
<button type="submit">Submit</button>
</form>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Change your input submit tag to call a function.
<input type="submit" onclick="submitThis()" />
Add this logic to your submit function which will call the submit url through ajax and return false to avoid physically submitting form.
var submitThis = function() {
// get form data using jQuery, and call the link using $.ajax()
return false; // This will avoid submitting the page
}
--EDIT--
Instead or returning false, you can also use preventDefault() method
$("#submit").submit( function (e) {
e.preventDefault();
// do your task
});
Related
I have a site built on jQuery Mobile and am trying to get our Terms of Service to open in a dialog.
TOS page is a full page itself (separate URL) and when I link with the dialog reference it simply opens as a new page.
My footer is
<div data-role="footer" data-theme="<?php echo $dataTheme ?>">
<div data-role="navbar">
<ul>
<li>Home</li>
<li><a rel="external" href="http://www.trackmaster.com">Full Site</a></li>
<li>Terms</li>
<li>My Account</li>
</ul>
</div>
</div>
and my tos.php page is (content stripped for convenience)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="AXCIS Information Network">
<title>TrackMaster Terms of Service</title>
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/themes/TrackMasterMobile.min.css" />
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://mobiletest.trackmaster.com/javascript/frameworks/jquery-current.min.js"></script>
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/mobileStyle.css" />
<!-- Make sure there is a back button on each page -->
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
$.mobile.page.prototype.options.addBackBtn= true;
});
</script>
<script src="http://mobiletest.trackmaster.com/javascript/frameworks/jquery.mobile-current.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="main">
<div data-role="header">
<h1 class="headerLink"><span class="tmFirst">Track</span><span class="tmSecond">Master</span> </h1>
Home
</div>
<div data-role="content" data-theme="a">
<div data-role="content" class="informationText">
Blah, Blah, Blah
</div>
</div> <!-- this one closes out the content div set in the section header template -->
<div data-role="footer" data-theme="a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li><a rel="external" href="http://www.trackmaster.com">Full Site</a></li>
<li>Terms</li>
<li>My Account</li>
</ul>
</div>
<h5 class="copyrightText">© 2013 Axcis Information Network, Inc.</h5>
<div class="ads">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7303976721498796";
/* Mobile Bottom */
google_ad_slot = "5684536575";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div> <!-- this one closes out the page div set in the header template -->
</body>
</html>
I have tried changing the data role of the TOS page to a dialog but that made no difference.
Am I not understanding the way dialog links can be used (from the docs I thought I could open one from any URL simply by defining the link as a dialog)
Site itself is http://mobiletest.trackmaster.com and it is the Terms link in the footer I am trying to get as a dialog (I don't want to include the content on every page, only when the user asks for it)
Any help appreciated (even pointing out the dumb things I am missing)
You are either missing a <div> or they don't match up; you've got two "content" divs.
EDIT: It's probably OK to have one within another, just noting that the <div data-role="page"> is never closed. Don't know if that makes any difference.
Found the issue.
The line in the header
$.mobile.ajaxEnabled = false;
I commented it out and the dialog link works as expected.
was the problem, I am testing it to see what else gets broken when I pull it out :-).
Data role for the TOS page is NOT relevant as loading it as a dialog automatically assigns the dialog data role
I'm trying to understand how $.mobile.changePage works. I placed the method $.mobile.changePage in an anonymous function after the last element in the DOM and it didnt work but if I was to place it in document.ready it works fine. How come? any advice much appreciated
<!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.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>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called bar</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="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 data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<script>
(function(){
$.mobile.changePage($("#bar"), { transition: "slideup"} );
})();// this doesn't work
$(document).ready(function(){
$.mobile.changePage($("#bar"), { transition: "slideup"} );
})//this works
</script>
document ready dont work correctly with jQuery Mobile. Usually it will trigger before pages are loaded inside the DOM.
If you want to find more about this take a look at this ARTICLE, to be transparent it is my personal blog. Or find it HERE.
To make it work you need to use correct page event, like this:
$(document).on('pagebeforeshow', '#foo', function(){
$.mobile.changePage($("#bar"), { transition: "slideup"} );
});
At the same time this is not a good solution. You should not change page while first page is loading, mainly because it will cause jQuery Mobile to misbehave. Ether do it after first page is successfully loaded (page #foo) or change page order and let page #bar be the first page.
I looked through all the similar questions that showed up before typing this, but I can't find an answer for my issue.
I'm using jQuery Mobile (1.1) and jQuery (1.7.1) to develop a small portal. As such, I have it all on one page, and use data-role="page" to handle the process transitions.
The flow is currently like this:
User visits main URL
User clicks on an action ("do this" or "do that")
When a user clicks on the action (both are just tags with a href to another file with data-role="button"), it takes them to that page just fine.
However, when first visiting the page (either by manually typing in the URL or clicking on the action button/link), the form is empty and clicking the submit button does nothing. After refreshing the page though everything works as it should.
So, say for example someone clicks on action link #1 ("make a payment"):
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<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>
<title>Credit Card Payments</title>
<style>
.ui-dialog .ui-header a[data-icon=delete] { display: none; }
</style>
<script>
$(document).bind("mobileinit", function(){
});
</script>
</head>
<body>
<div data-role="dialog" id="popup">
<div data-role="header" data-theme="b" data-content-theme="b">
<h1>Destination</h1>
</div>
<div data-role="content" data-theme="b" data-content-theme="b">
Please choose what you would like to do:
Make A Payment
Add Credit Card To Account
</div>
</div>
</body>
</html>
It takes them to "payment.php" and displays page id "step1", which is a simple log in form:
<div data-role="page" id="step1">
<div data-role="header">
<h2>Log In</h2>
</div>
<form id="step1frm">
<div data-role="fieldcontain">
<label for="mail">Blesta e-mail: </label>
<input type="text" name="mail" id="mail" />
</div>
<div data-role="fieldcontain">
<label for="pw">Blesta password: </label>
<input type="password" name="pw" id="pw" />
</div>
<input type="button" id="step1frmsub" value="Log In" />
</form>
</div>
The log in form page also has a lot of jQM stuff but after I commented all the code out it didn't change anything so that isn't the cause. I also verified the HTML via W3.org and it came back valid.
A better representation of what's going on can be found in the screen shots I took of Chrome's Inspector:
First Visit - after clicking "make a payment"
After Refreshing Page - after refreshing the login for "make a payment"
Edit - As a small follow up, I noticed "data-external-page="true"" is being set on the div page on load, and then on refresh it's not there anymore. From my understanding of what I've read this is done because it's coming from a dialog basically, but I'm not sure if there's a way to disable that from being set.
Answer - Well, the solution to this, after initially thinking it wasn't what I was looking for, was actually to add this to my links:
rel="external"
So that they look like this:
Make A Payment
Well, the solution to this, after initially thinking it wasn't what I was looking for, was actually to add this to my links:
rel="external"
So that they look like this:
Make A Payment
I've developed an app for ios and android using phonegap. It's a dictionary app and it will display result in multiple tab (the tab is a div, every div will display different content). I use my own code so that only one div is shown at any time. Now I want to include jquerymobile so that I can apply a animation/transition when switching to other div.
So I add the data-role="page" to each div, which I assume will work immediately(like sample code below). But something is not right.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<table id="headergroup">
<tr><td>
<input>.........
<img>.......
</table>
<wrapper>
<div data-role="page" id="tab1">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page1 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
.........other div......
<div data-role="page" id="tabN">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>PageN content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</wrapper>
<div id="footer>
<img .......>
</div>
</body>
</html>
Supposely, my app should display the div(s) in the wrapper only. But the problem is, now my app will display the div with data-role=page in full screen and on top of other element (my app header and footer were not shown).
Is my implementation correct? How do I overcome this problem? Thanks.
You may get by with this on the first page, but on all other pages you are loading in via JQM-Ajax (default), you will only grab what's inside your first(!) div-data-role="page" from the page you are loading. Everything else (table, 2nd, 3rd page-div will not be loaded, because it's outside the page-div.
Have a look at the JQM docs on page anatomy and linking pages.
JQM is based on page-divs, so also in your code the page-div will get most "JQM attention" being set to fullscreen size and of cource hovering above everything else.
To use JQM you will either go with
Single page layout = page by page
Multi pape layout = multiple pages contained in one document.
Since you are using Phonegap, which I think bundles everything into a single file eventually, you may be better off with multipage. There is also a subpage widget or multiview, if you need to load documents with multiple "nested pages" from your initial page.
I'm building an app utilizing JQuery Mobile in which I'm showing a progress bar to indicate to the user their progress based on the steps completed.
For the progress bar I'm utilizing JQuery UI which is simple to implement
<script>
$(document).ready(function(){
var currentStep = $("#formNumber").val(); //get the the current step from form
var totalSteps = 8;
var formProgress = 0;
// determine overall form progress after step is completed
if (currentStep >1) {
formProgress = (currentStep-1)/totalSteps*100;
}
// Set progress value
$("#progressbar").progressbar({value: formProgress});
$('#percentage').text(formProgress);
});// End function
</script>
However since the pages in JQuery Mobile are loaded via Ajax the progress bar does not show. I'm guessing it's because the "#progressbar" div is empty.
if the pages loads without Ajax it will show the progress bar. Any one knows how i can solve this by allowing the progress bar to show when the page loads via Ajax
Bind to pageinit not dom ready or in this case i bind to pageshow. In a JQM ajax app dom ready only happens once on the first page. So any new content brought into the dom doesn't get the benefit of the code you wrote. Also when the second page is brought into the dom. The first page doesn't go anywhere its just hidden. Because of this using the same id in every page causes problems. Get used to using classes instead. If you need to pick something out of the current page use the .ui-page-active class to help you select the appropriate element.
Something like $('.ui-page-active .formNumber') will select the correct input for you. So here is my revised first step according to the info you gave me.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Step 1</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
function getProgress(){
var currentStep = $(".ui-page-active .formNumber").val(); //get the the current step from form
var totalSteps = 4;
var formProgress = 0;
// determine overall form progress after step is completed
if (currentStep >1) {
formProgress = (currentStep-1)/totalSteps*100;
}
$(".ui-page-active .progressbar").progressbar({value: formProgress});
}
$(document).on('pageshow',function(){
getProgress();
});
</script>
</head>
<body>
<div data-role="page" id="step1">
<div data-role="header">
<h1>Step 1</h1>
</div><!-- /header -->
<div data-role="content">
<input type="hidden" class="formNumber" value="1" />
<div class="progressbar"></div>
Step 2
</div><!-- /content -->
</div>
</body>
</html>
step2.html
<div data-role="page" id="step2">
<div data-role="header">
<h1>Step 2</h1>
</div><!-- /header -->
<div data-role="content">
<input type="hidden" class="formNumber" value="2" />
<div class="progressbar"></div>
Step 3
</div><!-- /content -->
</div>
step3.html
<div data-role="page" id="step3">
<div data-role="header">
<h1>Step 3</h1>
</div><!-- /header -->
<div data-role="content">
<input type="hidden" class="formNumber" value="3" />
<div class="progressbar"></div>
Step 4
</div><!-- /content -->
</div>
...... and on and so forth
If you interested I made a sample for you to look at. http://starwebservices.net/so/