In multipage $.mobile.changePage("#test") not working - javascript

Hi all I have html file in that there are various different pages in div. Now I want to navigate from one page to another I am using $.mobile.changePage("#test") for this but navigation to test.html is not take place. If I use different html file for test.html and call it as $.mobile.changePage(("test.html")); then navigation takes place.
I also tried with loadPage, but it also does not solve my issue. Any suggestion will be appreciated, Thanks in advance.
Here is my code:
<body>
<div data-role="page" id="firstPage" onclick=callSecondPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="firstPage" id="firstPage">
</div>
<script type="text/javascript">
function callSecondPage()
{
alert ("Inside callPage");
$.mobile.changePage('#secondPage');
}
</script>
</div>
<div data-role="page" id="secondPage" onclick=callThirdPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="secondPage" id="secondPage">
</div>
<script type="text/javascript">
function callThirdPage()
{
alert ("Inside callPage");
$.mobile.changePage('#thirdPage');
}
</script>
</div>
<div data-role="page" id="thirdPage" onclick=callFourthPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="thirdPage" id="thirdPage">
</div>
<script type="text/javascript">
function callFourthPage()
{
alert ("Inside callPage");
$.mobile.changePage('#fourthPage');
}
</script>
</div>
<div data-role="page" id="fourthPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fourthPage" id="fourthPage">
</div>
</div>
<div data-role="page" id="fifthPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fifthPage" id="fifthPage">
</div>
</div>
<div data-role="page" id="sixthPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="sixthPage" id="sixthPage">
</div>
</div>
before comes to above html file navigate to other pages, And now $.mobile.changePage('#secondPage'); secondPage is not navigated from firstPage. But if same code I placed in index.html (i.e entry point of application then proper navigation takes place.

You should write
$.mobile.changePage($("#test"))
Is the call to $.mobile.changePage waiting for page load? You need to let us see some code here...

Related

Jquery stops working after page change

I'm having this issue that I haven't had before. Once page changes to a different page it seems like the Jquery just stops working. I've looked around and the only promising solution seemed to be the $(window).load() solution but that didn't fix it either. I have no idea why this is happening. I've tested it by redirecting it to the very same page and nothing break then but once I go to a different page, it all stops working
Code:
$(document).ready(function(e) {
$("#goToNewPage").on('click', function()
{
alert("New Page 1");
$.mobile.pageContainer.pagecontainer("change", "#NewPage");
});
$("#goToNewPage2").on('click', function()
{
alert("New Page 2");
$.mobile.pageContainer.pagecontainer("change", "#NewPage2");
});
$("#goToLastPage").on('click', function()
{
alert("Last Page");
$.mobile.pageContainer.pagecontainer("change", "#LastPage");
});
});
HTML:
<body>
<div data-role="page" id="main" class="background">
<div id="logo">
</div>
<div data-role="content" id="content">
<div align="center">
<p>MAIN</p>
</div>
</div>
<div data-role="navbar" class="ui-footer-fixed">
<ul>
<li><input type="button" value="New Page" id="goToNewPage"/></li>
<li><input type="button" value="New Page 2" id="goToNewPage2"/></li>
<li><input type="button" value="Last Page" id="goToLastPage"/></li>
</ul>
</div>
</div>
<div data-role="page" id="NewPage" class="background">
<div id="logo">
</div>
<div data-role="content" id="content">
<div align="center">
<p>New Page 2</p>
</div>
</div>
<div data-role="navbar" class="ui-footer-fixed">
<ul>
<li><input type="button" value="New Page" id="goToNewPage"/></li>
<li><input type="button" value="New Page 2" id="goToNewPage2"/></li>
<li><input type="button" value="Last Page" id="goToLastPage"/></li>
</ul>
</div>
</div>
<div data-role="page" id="NewPage2" class="background">
<div id="logo">
</div>
<div data-role="content" id="content">
<div align="center">
<p><b>New Page 2</b></p>
</div>
</div>
<div data-role="navbar" class="ui-footer-fixed">
<ul>
<li><input type="button" value="New Page" id="goToNewPage"/></li>
<li><input type="button" value="New Page 2" id="goToNewPage2"/></li>
<li><input type="button" value="Last Page" id="goToLastPage"/></li>
</ul>
</div>
</div>
</body>

jqm popup is not opening

I added a popup to a div-container. Opening the popup doesn't work.
This is my container-structure:
<div data-role="page" id="mainPage">
<div id="myContent"> <!--div id="myContent" data-role="content/main"> dosn't work either -->
<div id="template" style="display:none;">
<a class="select-Button">
...
</a>
</div>
<ul data-role="list-view"></ul>
<div data-role="popup" id="myPopup">
<p>My Popup</p>
</div>
</div>
</div>
I'd like to open the popup by javascript:
...clone the template and add clones to the list-view before.
$('#mainPage').find('.select-Button').on('click', function(){
$('#myPopup').popup("open");
});
But it's not working
This works:
Java-Script:
var $popUp = $('#myPopup').popup({
dismissible: false,
theme: "c",
overlyaTheme: "d",
transition: "pop"
});
$popUp.popup('open').trigger("create");
HTML:
<div id="myPopup"> <!-- removed data-role="popup" here-->
<p>My Popup</p>
</div>
page div should be direct parent of popup div. If you place it inside any other div, it won't open, or malfunction.
<div data-role="page">
<div data-role="popup" id="myPopup">
<p>My Popup</p>
</div>
<div id="myContent">
<div id="template" style="display:none;">
</div>
<ul data-role="list-view"></ul>
</div>
To open it using HTML
Popup
To open programatically
$("#popupID").popup("open");
You need to delegate click event to dynamically added elements.
$(document).on("click", ".select-button", function () {
$('#myPopup').popup("open");
});
Demo
Try this out:- http://jsfiddle.net/adiioo7/rF873/
JS:-
$('#myPopup').popup();
$('#myPopup').popup("open");
HTML:-
<div data-role="page">
<div id="myContent"> <!--div id="myContent" data-role="content/main"> dosn't work either -->
<div id="template" style="display:none;">
</div>
<ul data-role="list-view"></ul>
<div dara-role="popup" id="myPopup">
<p>My Popup</p>
</div>
</div>
</div>
Issue with your approach is that you cannot call methods on popup prior to initialization.

Can't Get Dialog to show programmatically in JQuery Mobile

I'm trying to get a div with data-type 'dialog' to display in JQuery Mobile, fired by a Javascript event. The button click in the example below is purely to fire the event.
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//$.mobile.changePage('#addCatForm');
$('#createEvent').click (function () {
console.log('Prove event fired');
$.mobile.changePage('#addCatForm', {
transition: 'pop',
changeHash: false,
role: 'dialog'
});
});
});
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<button id="createEvent">Create Event</button>
<div data-role="dialog" id="addCatForm" data-theme="c">
<p>here is some text</p>
<div data-role="content">
<input type="text" id="catText" data-theme="c"/>
<input data-role="button" data-mini="true" data-theme="b" data-inline="true" type="submit" id="addCat" value="Add Category">
<button data-role="button" data-mini="true" data-theme="c" data-inline="true" id="canCat">Cancel</button>
</div>
</div>
</div>
</body>
The console.log output correctly fires, but nothing I can do seems to get the dialog to display.
Any help appreciated.
Thank you,
Working example: http://jsfiddle.net/Gajotres/Jx9xM/
$(document).ready(function() {
$('#createEvent').click (function () {
console.log('Prove event fired');
$.mobile.changePage('#addCatForm', {
transition: 'pop',
changeHash: true,
role: 'dialog'
});
});
});
Dialog must be on a same level as a page and not a part of the page. I this case I have moved dialog outside of a page.
Your structure should look like this, data-role=dialog outside data-role=page.
<!-- Page -->
<div data-role="page" id="mainPage">
<button id="createEvent">Create Event</button>
</div>
<!-- /Page -->
<!-- Dialog -->
<div data-role="dialog" id="addCatForm" data-theme="c">
<p>here is some text</p>
<div data-role="content">
<input type="text" id="catText" data-theme="c"/>
<input data-role="button" data-mini="true" data-theme="b" data-inline="true" type="submit" id="addCat" value="Add Category">
<button data-role="button" data-mini="true" data-theme="c" data-inline="true" id="canCat">Cancel</button>
</div>
</div>
<!-- /Dialog -->

jQuery AJAX reloading data into a DOM or refreshing the DOM with new data

I have a piece of code using jQuery to load content from an internal webpage onto a new page DOM after the user has selected a button from another page. The problem I got is no matter what option button I click the same result shows in the DOM. I was told to change the Var to .live but it hasn't made any difference. I cant really explain it more apart from some one looking at my code. What is the best way to deal with this?
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="../jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="../jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="../jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Options</li>
<li>results</li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="options">
<div data-role="header">
<h1>Options</h1>
</div>
<div data-role="content">
<div id="page-wrap">
<div id="header">
<h1>Call a webpage in a DOM</h1>
</div>
<div id="load-div" class="functions">
<span>Value 1</span>
<input type="submit" value="300GB" id="load" />
<div id="load-div" class="functions">
<span>Value 2</span>
<input type="submit" value="500Gb" id="load2" />
</div>
results
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</div>
<div data-role="page" id="results">
<div data-role="header">
<h1>Results</h1>
</div>
<div data-role="content">
<div id="result" class="functions">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
// load() functions
var loadUrl = "load.html";
$("#load").live("click",function(){
$("#result").html(ajax_load).load(loadUrl);
});
</script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
// load() functions
var loadUrl = "load2.html";
$("#load_2").live("click",function(){
$("#result").html(ajax_load).load(loadUrl);
});
</script>
Options
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Basically you overwrite every script you have here. Don't use loadUrl.
For #load:
$("#load").live("click",function(){
$('#result').html(ajax_load).load('load.html');
});
And for #load2:
$("#load_2").live("click",function(){
$("#result").html(ajax_load).load(`load2.html`);
});
Separate script tags are not independent. The code in one can interact with the code in another.
You have declared var ajax_load and loadUrl in both blocks. The ones in the second block overwrite those in the first. Either give them different names, or eliminate them and put the string values directly in your function.

JQuery Mobile Submit Form

I am trying to submit a form via JQuery Mobile.
I have:
<form action="#pagetwo" method="post" name="myform">
<input type="text" name="myname">
<input type="submit" value="submit" />
... then I have....
<div data-role="page" id="pagetwo">
...
<?php echo $_GET["myname"]; ?>
The first problem is that it's not doing anything when I hit the submit button. It should go to #pagetwo
What I'm I doing wrong please?
UPDATE:
Here is more code as requested:
<div data-role="page" id="home">
<div data-role="header">
<h1>Page 1</h1>
</div><!-- /header -->
<div data-role="content">
<form action="#page2" method="post" name="myform">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Check Property Elements:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /><label for="checkbox-1">Yes or No</label>
</fieldset>
</div>
</form>
...
<div data-role="page" data-theme="a" id="page2">
<div data-role="header">
<h1>This is page 2</h1>
</div><!-- /header -->
<div data-role="navbar">
<ul>
<li>Home</li>
</ul>
</div><!-- /navbar -->
<div data-role="content" data-theme="d">
<?php if (isset($_POST['checkbox-1'])) {
// do something with $_POST['value']
echo 'yessss';
var_dump($_POST);
} ?>
First, It is possible that is visible when You hit submit and browser do not scrolls You here (because it is visible).
Try to put some big chunk of something before #pagetwo and see how it goes.
<!doctype html>
<html>
<head>
</head>
<body>
<form action="#foo" method="get" accept-charset="utf-8">
<p><input type="submit" value="Continue →"></p>
</form>
<div style="height: 3000px; background-color: #000;">
</div>
<div id="foo">Foo</div>
</body>
</html>
Second, I think You should post you data to different page (or url) not just different anchor.
Third, I see another problem with Your code. Your form says <form method="post" but afterwards You are outputting from get <?php echo $_GET["myname"]; ?>. It should be <?php echo $_POST["myname"]; ?>

Categories