Jquery stops working after page change - javascript

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>

Related

Selected radio don't change the jquery color button

i have a form ho check a list of task, my idea is when a task is marked the button change the color, but instead the background is changed what is my problem?
part of the code:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(function() {
$('#popupDialog').click(function() {
if($(this).select()) {
$('#ba700')
.buttonMarkup({ theme:"b" })
}
})});
</script>
</head>
<body>
<div data-role="page" data-theme="a" >
<div data-role="header" data-position="inline">
<div class="logo"><img src="http://10.0.210.26/control/logo_utryt.png" width="40%"alt=""/></div>
</div>
<div data-role="content" data-theme="a">
<div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-check">
        Vagón 1
        Vagón 2
        Vagón 3
Enviar
     </div>
<div data-role="controlgroup">
<div class="grid grid-pad">
<div class="col-1-3">
<div class="module">
<a href="#popupMenu" id="popupm" data-role="button" data-rel="popup" data-position-to="window" data-transition="pop" >
<h1>Dispositivos de Recaudo</h1></a>
<div data-role="popup" id="popupMenu" data-theme="a" data-dismissible="false" >
Close
<div data-role="collapsibleset" id="popupDialog" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" >
<div data-inset="false" id="ba700" data-role="collapsible" data-theme="a">
<h2>BA700</h2>
<ul data-role="listview" >
<form id="form"><fieldset data-role="controlgroup"><input type="radio" name="radio-v-m" id="radio-v-m" >
<label for="radio-v-m">Si</label><input type="radio" name="radio-v-m" id="radio-v-1m">
<label for="radio-v-1m">No</label>
 <textarea data-mini="true" cols="40" rows="8" name="textarea-4" id="textarea-4" placeholder="Observación"></textarea>
</fieldset>
</form>
</ul>
</div>
this code change the theme of the back but i want to change the theme of the button when i select a radio mark
any help please
Assuming you want the theme of the collapsible to change when clicking the radio buttons. Add a value to the the radio buttons so we know which one is selected:
<input type="radio" name="radio-v-m" id="radio-v-m" value="0" />
<label for="radio-v-m">Si</label>
<input type="radio" name="radio-v-m" id="radio-v-1m" value="1" />
<label for="radio-v-1m">No</label>
Then in script handle the change event of the radio buttons, figure out which one is selected and then change the collapsible theme as needed
$('input[name="radio-v-m"]').on("change", function(){
var val = $('input[name="radio-v-m"]:checked').val();
if (val == '0'){
$(this).closest(".ui-collapsible").collapsible( "option", "theme", "b" );
} else {
$(this).closest(".ui-collapsible").collapsible( "option", "theme", "a" );
}
});
Working DEMO

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 -->

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

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...

How to call <div> on submit button click

Please refer code below i m learning jquery and i want to display
tag named #child on submit button click using javascript/jquery can any one help me how to call on button click
And also want to call #child and #home tag on >>(next button) & <<(prev button)** on button click respectively in code >> and<< is written as &lt and &glt.? can anyone
help me out ?
<div data-role="page" id="home">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagvati
</h3>
<a data-role="button" data-inline="true" data-direction="reverse" data-transition="slide" href="#home">
<<
</a>
<a data-role="button" data-inline="true" data-direction="reverse" data-transition="fade" href="#child">
>>
</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
User:
</label>
<input id="textinput1" placeholder="Khushu" type="text" />
</fieldset>
</div>
<input data-theme="d" ="submitbtn" value="Login" type="submit" onSubmit="redirect()"/>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" >
<h3>
Page1
</h3>
</div>
</div>
<div data-role="page" id="child">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagvati
</h3>
<a data-role="button" data-inline="true" data-direction="reverse" data-transition="slide" >
<<
</a>
<a data-role="button" data-inline="true" data-direction="reverse" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
User:
</label>
<input id="textinput1" placeholder="Khushu" type="text" />
</fieldset>
</div>
<input data-theme="d" value="Login" type="submit" onsubmit="redirect()"/>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" >
<h3>
Page1
</h3>
</div>
</div>
To show a tag use
$('#child').show(); // where child is the id of the element
and to hide ...
$('#child').hide();
alternatively, you can simply toggle it between hide/show as follows:
$('#child').toggle();
to attach these to an onclick event of a button ...
$(document).ready(function() {
$('#buttonID').click(function() {
$('#child').toggle();
});
});
hope this helps
The below code is for javascript
var Home= document.getElementById("home");
Home.style.display="none";//To hide the div
Home.style.display="";//To display the div

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