In jQuery mobile, I am trying to detect a successful page change to a specific page. I have the following code, inline on the page I want to load.
<script>
$(document).bind( "pagebeforechange", function( e, data ) {
alert("pagebeforechange");
});
$(document).bind( "pagechange", function( e, data ) {
alert("pagechange");
});
$(document).bind( "pagechangefailed", function( e, data ) {
alert("pagechangefailed");
});
$(document).live( "pagebeforechange", function( e, data ) {
alert("pagebeforechange live");
});
$(document).live( "pagechange", function( e, data ) {
alert("pagechange live");
});
$(document).live( "pagechangefailed", function( e, data ) {
alert("pagechangefailed live");
});
</script>
I get the the appropriate alerts when loading the page directly, or refreshing, but not when navigating from another area in the Jquery Mobile app.
Page is called by the the "Your Car" Tab in the footer
<div id="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Features</li>
<li>Your Car</li>
<li>Contact</li>
</ul>
</div>
</div>
Would it work to place your code in the pageshow event? It may if you are trying to detect the page or location. Something like this maybe:
<script type="text/javascript">
$('[data-role=page]').live('pageshow', function (event, ui) {
hash = location.hash;
page = hash.susbtr(1);
if (page.indexOf('about.html') >= 0) {
alert('you made it!');
}
});
</script>
UPDATE
After testing this scenario a bit more and rereading your question, I think I was able to reproduce the results.
This works as you described and only fires alerts when loading the page directly or refreshing the page:
<body>
<div data-role="page">
<!-- page stuff -->
</div>
<script type="text/javascript"> ..bind events... </script>
</body>
However, when I move the javascript directly inside the page, it works as expected and fires all of the bound events, no matter how the page was reached:
<body>
<div data-role="page">
<script type="text/javascript"> ..bind events... </script>
<!-- page stuff -->
</div>
</body>
Where are you binding to this events?
Have you read following in the Docs http://code.jquery.com/mobile/latest/demos/docs/api/events.html:
Important: Use pageInit(), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
Luke's thinking is in the right direction: clearly the problem you had has to do with where in the code the binding is occurring. This is proved by shanabus.
However, in your case, you should be doing the binding when jQuery mobile's mobileinit event is fired, not pageInit, as Luke is suggesting.
Example (fires on all page change events):
<script type="text/javascript">
$(document).bind('mobileinit', function() {
$(document).on('pagechange', function () {
window.alert('page changed!');
});
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
As illustrated in the code above, be mindful that handlers triggered by mobileinit must be included before the jQuery mobile <script> tag.
Related
I am new to JavaScript, Jquery and Ajax. This is what I am trying to do:
When I click on Pro-Hashtagh, I want to display a word in Show-Id.
This Pro-Hashtagh HTML code:
<li>
Pro Hashtagh
</li>
Show-Id HTML code:
<div class="body" id="Show-Id">
</div>
Ajax Code:
<script type="text/javascript">
$(function () {
var waiting = '<center><h3>Please Wait ...</h3></center>';
$('#Pro-Hashtagh').click(function(){
$("#Show-Id").html(waiting);
});
});
</script>
But when I click, nothing happens
I just created a fiddle with your code and everything seams to be fine.
https://jsfiddle.net/eh2xbxpe/
Of course you have to add Jquery to your project, that'S the only error I see.
Beside, you don't call any AJAX request in your code, you are just adding a please wait. If you are trying to reach an external ressources via AJAX, it is not the case here.
$(function () {
var waiting = '<center><h3>Please Wait ...</h3></center>';
$('#Pro-Hashtagh').click(function(){
$("#Show-Id").html(waiting);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<li>
Pro Hashtagh
</li>
<div class="body" id="Show-Id">
</div>
I guess you're working on a local environment.
Something happens when you click on the link but the page reloads way to fast for you to see anything. You need to update your onclick event so it prevent the link default behavior.
$('#Pro-Hashtagh').click(function(event){
event.preventDefault();
$("#Show-Id").html(waiting);
});
try
Pro Hashtagh
and create check function in javascript
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<div class="body" id="Show-Id">
</div>
<li>
Pro Hashtagh
</li>
<script type="text/javascript">
$(function () {
var waiting = '<center><h3>Please Wait> .
..</h3></center>';
$('#Pro-Hashtagh').click(function(){
$("#Show-Id").html(waiting);
});
});
</script>
On my django web app, I have a webpage and when a button is clicked a modal form is opened. On this form there are a few fields and a save button. When the save button is pressed, I want to do something, like printing an alert. Here is what I tried:
Model form code:
<div class="container-content">
<div class="infor-experience col-lg-2 more_info">
{% if request.user|isEmployer %}
<div class="add-to-list">{% include "layout/addtolistmodal.html" %}</div>
<div class="connect-now bottom">{% include "layout/bidmodal.html" %}</div>
{% endif %}
<!-- more code below here -->
Javascript block in same HTML file as modal above:
<script type="text/javascript">
// Add to short list handler
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
</script>
Basically, what I want to do is when the user clicks save on the add-to-list modal, print the alert "TEST".
From my understanding the reason its not working is because it cannot find '.add-to-list' but what I should use instead?
Just attach your click event to already present element which seems to be div.infor-experience, since your modal html gets appended after DOM load. Also, make sure your script renders in web browser if you have provided any conditions for them to render.
$('.infor-experience').on('click', '.submit', function(e) {
alert("TEST");
})
It might be that positioning of your script. At the time of its execution the DOM may not be ready or exist yet.
You could wrap your DOM related codes like so:
$(document).ready(init);
function init(){
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
}
Try this instead
$(document).ready(function () {
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
});
});
you should add the code under $(document).ready() so that it waits for whole DOM to load and then attaches the method instead doing so before loading of DOM.
In jquery mobile, I dynamically add a tags that is supposed to open a popup like in this example below. But since it is dynamically added, the jquery mobile effects don't affect it. How can I get it to work like this?
Thanks
Actions...
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Choose an action</li>
<li>View details</li>
<li>Edit</li>
<li>Disable</li>
<li>Delete</li>
</ul>
</div>
When you append any html into a page after the page's initial load, you need to reapply any of the jquery functions in order for them to work when the event occurs
Example...
if you currently have something like this:
<script type="text/javascript">
$(document).ready(function () {
$('a').on('click', function () {
//something
return false;
});
});
</script>
This will do //something whenever the user clicks on any < a > link.
Now that you are loading the new < a > links in after the document is ready, the code above will not apply to the new code as it was not on the page when the javascript applied the above code.
To fix this, you need to run the function that does the //something again after the new < a > has been loaded.
<script type="text/javascript">
$(document).ready(function () {
somethingFunction();
});
});
//this is where we put the code to apply an event, it is now recallable later on.
function somethingFunction(){
$('a').on('click', function () {
//something
return false;
});
}
</script>
Assuming that you are pulling in the new < a > html via an ajax query, you would need to call the somethingFunction() after the ajax query is successful
EG
$.ajax({
type: "POST",
url: "/action" ,
dataType: 'text',
success: function(data){
$('.popups').html(data);
somethingFunction(); // THIS IS WHERE IT APPLIES THE EVENT TO YOUR NEW HTML.
}
});
If I understood correctly, you want to add buttons dinamically, resulting in the style proposed in your example:
class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a"
To apply jQuery Mobile enhancements after appending some HTML you have to call the widget creation method: .button(); in this case (can be .checkboxradio();, .listview();, etc).
I put toghether a JSFiddle which demonstrates dynamically creating a button calling .button() and also applying hardcoded classes (which I think it's not a good thing to do).
There is a demo available in jquery mobile documents Dynamically create popup
Following i write a simple html tags in javascript then append in to jquery mobile pages.
html:
<div data-role="page">
<div data-role="content" id="forpopup">
</div>
<div>
Here is the Fiddle Demo.
i hope this will be helpful.
I am unable to fire an event on page show. In my home page I have a select menu which will dynamically get the values from DB. My functionality is working fine but event does not happen. I need to fire my function when I my page gets loaded. How to do that
<div data-role="page" id="homePage">
<div data-role="header" data-theme="b">
<h1>
Heading
</h1>
</div>
<div data-role="content">
<select name="select-choice" id="select-choice">
<option value="Select Category">Select Category
</select>
</select>
</div>
</div>
I have fired the event as follows, but function does not fired
$(document).on("pageshow", "#homePage", function () {
alert("on page show event occurred!! ");
// I did my logic here...
});
GIve some suggestions that which event is better to use and how to do that.
Paste this in your page and you will get sequence in which events fired.
For the convenient event that fired instead of console.log insert your function call.
$(document).on('pagebeforecreate',function(){console.log('pagebeforecreate');});
$(document).on('pagecreate',function(){console.log('pagecreate');});
$(document).on('pageinit',function(){console.log('pageinit');});
$(document).on('pagebeforehide',function(){console.log('pagebeforehide');});
$(document).on('pagebeforeshow',function(){console.log('pagebeforeshow');});
$(document).on('pageremove',function(){console.log('pageremove');});
$(document).on('pageshow',function(){console.log('pageshow');});
$(document).on('pagehide',function(){console.log('pagehide');});
$(window).load(function () {
console.log("window loaded");
});
$(function () {
console.log('document ready');
});
$(window).on('unload',function () {console.log("window unloaded");});
I have some Jquery (mobile) actions on the .ready() function in order to initialize the html elements with the correct values (passed as $def var):
If I comment this actions (see the end of the script) the script works perfectly (but obviously without the necessary html 'select' initial values).
If I use the actions the script runs ok (until the last action) but it never reaches the next statement 'get_status()'...
<script type="text/javascript">
var gauge_humidity1,
gauge_temp1,
gauge_temp2,
gauge_temp3;
jQuery(document).ready(function() {
//### EVERYTHING WORK IF I COMMENT ALL THIS JQUERY'S ###
//initiate sliders
//OLD jQuery('#select_mode').val('$mode').slider('refresh');
jQuery('#select_mode').val('$mode')
jQuery('#select_r1_water').val('$r[0]');
jQuery('#select_r2_heat').val('$r[1]');
jQuery('#select_r345_window').val('$r[2]');
jQuery('#select_r6_shadow').val('$r[5]');
//initiate select_light
jQuery('#select_light').val('$s_ini[2][5]');
### END OF COMMENT ###
### IF I UNCOMMENT THE GET_STATUS() NEVER RUNS ###
get_status();
});
</script>
<form id="form_settings" action="" method="POST">
<div id="section" data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>
Control
</h3>
<div data-role="fieldcontain">
<label for="select_mode">
Modo
</label>
<select name="select_mode" id="select_mode" data-role="slider" onchange="update_mode()">
<option value="Manual">
Manual
</option>
<option value="Auto">
Auto
</option>
</select>
</div>
</div>
</div>
</form>
I think the problem is $(document).ready(), the equivalent of $(document).ready() in JQM is $(document).bind('pageinit')
Just have a look at the jQuery Mobile documentation : http://jquerymobile.com/demos/1.1.1/docs/api/events.html
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
EDIT:
<script type="text/javascript">
jQuery('#page_settings').bind('pageinit', function() {
// Your code here
});
</script>
solution:
just added the 'pageinit' close to the html div data-role="page" and applied to '#page_settings' page (instead of document) since is were the controls are.
<div data-role="page" id="page_settings">
<script type="text/javascript">
jQuery('#page_settings').bind('pageinit', function() {
//initiate sliders
jQuery('#select_mode').val('$mode').slider('refresh');
jQuery('#select_r1_water').val('$r[0]').slider('refresh');
jQuery('#select_r2_heat').val('$r[1]').slider('refresh');
jQuery('#select_r345_window').val('$r[2]').slider('refresh');
jQuery('#select_r6_shadow').val('$r[5]').slider('refresh');
//initiate select_light
jQuery('#select_light').val('$s_ini[2][5]').selectmenu('refresh');
});
</script>