I have a dialog (not external html), which is displayed when I click on a button on the page, it works fine if the html containing the dialog is the first page to be accessed , but if that file is opened by clicking on an href from another page, the dialog doesn't show up when I click the button.
Here is the code for the page containing the dialog ... The alert in the click event of the button is showing up even when this is the not the first page to be accessed, but the dialog doesn't show up.
<!DOCTYPE html>
<html>
<head>
<title>Create Team</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<!-- Page starts here -->
<div data-role="page" data-theme="b" id="page1">
<div data-role="header" id="hdrMain" name="hdrMain"
data-nobackbtn="true">
<h1>Test screen</h1>
</div>
<div data-role="content" id="contentMain" name="contentMain">
<div id="fullnamediv" data-role="fieldcontain">
<label for="fullname" id="fullnameLabel" name="fullnameLabel">Team
Name*</label> <input id="fullname" name="fullname_r" type="text" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<a id="buttonSave" name="buttonSave" href="#" data-role="button"
data-inline="true">Save</a>
</div>
</div>
<!-- contentMain -->
<div data-role="footer" id="ftrMain" name="ftrMain"></div>
<script>
$("#page1").bind("pagecreate", function() {
$('#buttonSave').click(function() {
alert("aaaa");
$.mobile.changePage('#successdiv', {
transition: 'pop',
reverse: false,
changeHash: true
});
alert("after change");
return true;
});
});
</script>
</div>
<!-- page1 -->
<div data-role="dialog" data-theme="a" id="successdiv">
<div data-role="header" data-theme="f">
<h1>Error</h1>
</div>
<div data-role="content">
<p>This is Page 2</p>
<button type="submit" data-theme="e" name="successok"
value="submit-value" id="successbutton">Close Dialog</button>
</div>
</div>
<!-- Page ends here -->
</body>
</html>
You use jQuery Mobile v1.0 but at the same time you pass incorrect arguments to $.mobile.changePage like if it were say v1.0 alpha. Not sure if it solves your problem but worth trying:
$.mobile.changePage('#successdiv', {
transition: 'pop',
reverse: false,
changeHash: true
});
When I jump from one jquery mobile page to another via a hrefs, I have to set the rel attribute to external, like this:
page2
dfsq is right, only the div[data-role="page"] is loaded when you link to this page from another page. I'd suggest moving the dialog into its own html file and opening it either via
open dialog
or
$.mobile.changePage('your_dialog.htm', {role: 'dialog', transition: 'pop'});
Related
I have a mobile application which uses the multi-page template. In this application, I want to disable a select when the page is loaded and then enable it after a radio button is clicked. I've seen a strange thing: the disable/enable works (except its style) if the select is put on page 1 but it doesn't work if is put on other pages.
The following is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="mb.js" type="text/javascript" charset="utf-8" ></script>
</head>
<body>
<!-- Start of first page: #page1 -->
<div data-role="page" id="page1">
<div data-role="header">
<h1>Test </h1>
</div><!-- /header -->
<div data-role="content" >
<p>This is page One</p>
<form name="formC" id="formC" >
<label for="city">CITY: </label>
<select id="city" name="city" >
<option value="1">Sydney</option>
<option value="2">North Ryde</option>
<option value="others">Others</option>
</select>
Operations:
<input id="radioC1" name="city_type" type="radio" value="NO" >
<label for="radioC1"> 1 Disable city menu </label>
<input id="radioC2" name="city_type" type="radio" value="YES">
<label for="radioC2"> 2 Enable city menu </label>
</form>
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<a data-role="button" href="#page1" > Page 1 </a>
<a data-role="button" href="#page2" > Page 2 </a>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- Start of second page: #page2 -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Test</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is page Two</p>
</div><!-- /content -->
<div data-role="footer">
<a data-role="button" href="#page1" > Page 1 </a>
<a data-role="button" href="#page2" > Page 2 </a>
</div><!-- /footer -->
</div><!-- /page two -->
</body>
</html>
The code of the javaScript mb.js is shown below:
$(document).ready(function(){
$("#city").prop("disabled", true);
$('input:radio[name="city_type"]').change (
function(){
if ($(this).is(':checked') && $(this).val() == 'YES') {
// alert("Click city_type, Enable");
$("#city").removeAttr('disabled');
// append goes here
} else if ($(this).is(':checked') && $(this).val() == 'NO') {
// alert("Click city_type, Disable");
$("#city").prop("disabled", true);
// append goes here
}
});
});
As seen from the code, the form which contains a select with id 'city' is put on page 1. In this case, the select is disabled at the beginning although its style still looks like enabled. I can enable/disable it by clicking the radio buttons. However after I've moved the form into page 2 from page 1, the select doesn't work! Although it is disabled at the beginning, I am not able to enable/disable it by clicking the radio buttons.
Really I don't know why. I have tried to use different versions of jquery and css but could not fix the problem. Is it a bug in jquery mobile multi-pages? Appreciated if some one can help to fix the problem.
I have had similar problems - without looking extremely close at your code, I notice that you're using $(document).ready() but you should be using:
$(document).delegate("#MyPageId", "pagebeforecreate", function () {
});
and
$(document).delegate("#MyPageId", "pageshow", function () {
})
instead. ( http://forum.jquery.com/topic/jquery-mobile-equivalent-of-document-ready )
Try moving your code into those areas and you'll have some success :)
I'm working with jQueryMobile and I want to use a form to input some values in a database.
I have a form which works and uses the test123.php to submit data to a database this:
<form method="get" action="test123.php?test=1">
<input type="submit" value="spiegel" />
</form>
I get a button, but the new page is shown as a normal page.
With this solution:
<a data-role="button" data-rel="dialog" href="#test">
spiegel
</a>
I get a dialog with the same output (i get the message "spiegel").
But I want the confirmation site to appear as a dialog.
A link with data-rel"dialog" so i want to use my php site but i want to look it like a dialog after i submitted my data do a database. I'm not sure how to do this.
Thank you for your help
<!DOCTYPE html>
<html>
<head>
<!--add all your jquery,jquery mobile as well as its CSS refrences here-->
</head>
<body>
<div data-role = "page">
<div data-role="header">
opendialogpage
</div>
<div data-role="content">
<p>just for sample display</p></div>
</div>
<div data-role="dialog" id="login">
<div data-role="header" data-theme="e"></div>
<div data-role="content">
<form id="login_form">
<fieldset>
<div data-role="fieldcontain">
<label>USER NAME:</label>
<input type="text" id="name" value=""/>
</div>
<div data-role="fieldcontain">
<label>EMAIL ID:</label>
<input type="text" id="email" value=""/></div>
</fieldset>
</form>
</div>
</div>
</body>
Okay, so you want data from your PHP page to open in the dialog and not in the next page.
What your looking for is AJAX.
AJAX allows you to refresh and change part of your HTML page without changing the entire page.
$.ajax({
url: 'test123.php',
type: 'POST',
data: {spiegel : 'spiegel'}
error : function (){ document.title='error'; },
success: function (data) {
$('#ajax_content').html(data);
}
});
So this function will return into variable data whatever was generated by test123.php
Link to Docs: http://api.jquery.com/jQuery.ajax/
I struggled with this too for a while. Finally took a look at the html that jquery mobile creates for a dialog page. Just create a page with the structure below, and it will always open as a dialog page (as though it had been opened from a link with data-rel="dialog").
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- include your css, jquery, and jquery mobile files here -->
</head>
<body>
<div data-role="dialog">
<div data-role="content">
<!-- content goes here -->
</div><!-- /content -->
</div><!-- /dialog -->
</body>
</html>
All you are doing is changing data-role="page" to data-role="dialog".
I'm trying to create a simple widget using jQuery mobile. I have a button, and when I click on that button, I want a dialog to appear that will display a date submission form. I defined a div in my html like this:
<div data-role="dialog" id="DatePage" >
<div data-role="content">
<form>
<input type="date" name="date" />
<input type="submit"/>
</form>
</div>
</div>
Now, in order to make this dialog appear when I click a button, I've been trying to use the following line of code:
$.mobile.changePage("#DatePage");
However, when I do this, nothing happens. I've tried adding other arguments and using different variations, but nothing works. From what I've read elsewhere, and from the examples I've seen, this line should show me the dialog, but it simply doesn't. What am I doing wrong?
use this snippet
<button onClick="$.mobile.changePage('#DatePage', {transition: 'pop', role: 'dialog'});">Open Dialog</button>
to open your dialog with a button, see working 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>Header</h1>
</div><!-- /header -->
<div data-role="content">
<button onClick="$.mobile.changePage('#DatePage', {transition: 'pop', role: 'dialog'});">Open Dialog</button>
</div>
</div><!-- /page -->
<div data-role="page" id="DatePage">
<div data-role="content">
<h1>My Dialog</h1>
<form>
<input type="date" name="date" />
<input type="submit"/>
<button data-rel="back">Close Dialog</button>
</form>
</div>
</div><!-- /page -->
</body>
</html>
In my final solution the dialog was triggered by the following code snippet:
$.mobile.changePage('#DatePage', {transition: 'pop'});
The problem with the dialog being shown only on the first click on the button appeared because the front page was never shown again after the dialog was shown the first time and any of the two button was clicked the dialog disappeared. The page could be seen because it was the dialog's background, but it was actually never there. In order to avoid the problem, I used the following code snippet:
<!-- The popup dialog for date selection -->
<div data-role="page" id="DatePage">
<div data-role="content">
<form id="DateSubmissionForm">
<input type="date" name="date" />
Submit
Cancel
</form>
</div>
</div>
The 'submit' and 'cancel' buttons are actually links back to the front page. With this code, the front page is really shown again and the button is again clickable.
I'm trying to dynamically add a popup to my page, whith nice JQM content (buttons, etc). The popup is added, but no styles applied.
Here's the code (it's not so long, so I copied here):
<!DOCTYPE html>
<html>
<head>
<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 id='page' data-role='page'>
<div data-role='header'>
<h1> Header </h1>
</div>
<div data-role='content'>
<p>Code sample</p>
<a id='add' data-role='button'> Add popup </a>
<a href='#popup' data-role='button' data-rel='popup'> Show dynamic popup </a>
<a href='#popup2' data-role='button' data-rel='popup'> Show static popup </a>
</div>
<div id="popup2" data-role='popup'>
<div data-role="header">
<h1>Popup Header</h1>
</div>
<div data-role="content">
<p>Some content</p>
</div>
</div>
</div>
<script>
$(document).ready( function(){
$('#add').bind( 'click', function(ev){
var
page = $('#page');
var
popup = $('<div id="popup" data-role="popup"></div>').appendTo( page )
, header = $('<div data-role="header"> <h1>Popup Header</h1> </div>').appendTo( popup )
, content = $('<div data-role="content"> <p>Some content</p> </div>').appendTo( popup );
popup.popup();
});
});
</script>
</body>
</html>
there's a JsBin version, to play around with it.
So if I click to the Show static popup it displays the header nicely, but If I click Add popup, than show this newly added popup with Show dynamic popup the content of the popup looks differently.(using chrome)
So the question is: How can I enchanced the dynamically added popup content?
I found the solution, you can insert the popup in the same level as content, for ex.
<div data-role="page" >
<div data-role="content" ></div>
<div data-role="popup"></div>
</div>
Well with this way the popup function is good, but when you insert code for example from ajax request you have to insert the popup in the page and recall the method popup of the component.
ex .js file in the ajax call (the response is only the code of popup):
$('#page').append(response).trigger('create');
$("#popup").popup();
Remember that when you declare some popup in the principal page and it is not the same level as content. JQM automatically puts the popup in this place and it doesn't generate a problem.
You have to repaint the dynamically added content. To do this add page.page('destroy').page(); after popup.popup();.
working example: http://jsbin.com/orehuv/3/
I am very new to jquery-mobile. Could someone please help with the following problem regarding a multi-page app?
My app has two pages, split into two different files - index2_1.html and index2_2.html given below. When I use $.mobile.changePage("index2_2.html", "slide"); to change to the second page, none of the events in the second page get bound. Actually, none of the Javascript on the second page gets executed. However, if move to the second page using the link
Link to 2nd page that works1
it works fine.
Could someone please tell me what I am doing wrong here?
Thanks,
Dilip
index2_1.html
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
alert("Trying to register events on page 1.");
$(function() {
$(".category_item").bind("tap", function(event) {
selected_category = $(this).text();
$("#selected_category").text(selected_category);
$.mobile.changePage("index2_2.html", "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="select_category">
<div data-role="header" data-backbtn="false">
<h1>Select Category</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li class="category_item">Grocery</li>
<li class="category_item">Car</li>
<li class="category_item">Recreation</li>
<li class="category_item">Health</li>
</ul>
<div>
Link to 2nd page that works1
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
index2_2.html
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
alert("Trying to register events on page 2.");
$(function() {
$(".description_item").bind("tap", function(event) {
selected_description = $(this).text();
$("#expense_description").val(selected_description);
description = $("#expense_description").val();
$.mobile.changePage($("#enter_amount"), "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="enter_description">
<div data-role="header" data-backbtn="false">
<h1>Enter/Select Description</h1>
</div><!-- /header -->
<div data-role="content">
<label for="name">Description:</label>
<input type="text" name="expense_description" id="expense_description" value="" />
<a id="n_button" href="#" data-role="button" data-theme="b" data-inline="true" >Next</a>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Recent Expenses</li>
<li><a class="description_item" href="">Safeway</a></li>
<li><a class="description_item" href="">Gas</a></li>
<li><a class="description_item" href="">Cell phone bill</a></li>
<li><a class="description_item" href="">rent</a></li>
</ul>
<div data-role="controlgroup" data-type="horizontal">
<center>
<a class="cancel_button" href="index.html" data-role="button" rel="external">Cancel</a>
</center>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
In contrast to Pravat Maskey's answer, it's possible (and dependent on the use case also intended) to have seperate HTML files. Just imagine a huge application with lots of pages, it would be counterintuitive to load everything up front.
I think the problem you are having is the placement of the JavaScript code. I would try including the page specific code (the script tag and everything it contains) in the page section, just above the closing div of the page. For more details, take a look at this guide: http://jqx.ca/nav/, and check the section "Scripts in jQuery Mobile Pages".
By having the tag in the body, your code is executed once when the sub-page is created for the first time. For your case this should work, as you are binding an event to a DOM node, which only needs to run once.
You could also try registering your code with the pagebeforeshow event if you want to run it everytime the page is shown.