Every time when I click on select, pagecreate event is triggered. Is there a way to prevent pagecreate calling.
<select name="guests" id="guests" data-native-menu="false">
</select>
$(document).on('pagecreate', function (event) {
});
This happens not every time, but just the first time you open your long select list:
The custom select uses a popup with a listview to display the menu.
For long lists a dialog will be used. (This means: a page with role="dialog")
Filter it out:
$(document).on("pagecreate", function(e) {
if($("#"+e.target.id).hasClass("ui-selectmenu")) return;
// do whatever stuff for "true" pages
});
Related
I'm trying to create a pop up window which is triggered upon selecting an option from a dropdownlist using JQM .
The popup datarole:
<!--popup window inside index page -->
<div data-role="popup" id="puProd"> TODO POP UP STUFF </div>
And this is the JS code:
$(document).ready("#index", function (event) {
$("#ddlSelectProduct").on("change", function () {
$("#puProd").popup("open");
});
Am I doing something wrong? Because the pop up won't open.
Will appreciate answers
Thank you
Use the jQuery Mobile pagecreate event instead of document ready:
$(document).on("pagecreate","#index", function(){
$("#ddlSelectProduct").on("change", function () {
$("#puProd").popup("open");
});
});
DEMO
I'm using jquery mobile v1.3.2
For some reasons I want to set an global pagechange event to prepare all of my pages :
var Front = {
initDom : function($dom) {
// here i can bind some events in my page
$(".someButton",$dom).bind("tap",function(){
alert("some actions");
});
// etc.....
});
}
$(document).on("pagechange", function(event, data) {
Front.initDom($(data.toPage));
});
This works well. But it is triggered at each page change. And some times it will init the same event twice and that will lead to some bugs.
Now i have tested to do it with the event pageinit or pagecreate but both are triggered before the page is ready and $("ui-page-active"); is empty.
I have though about some setTimeout, but that's definitively a bad idea.
I have also though to init everything at the first pageinit and unbind it. But ajax called page wont be bound.
It there some good workarround ?
You can use pageinit and then get the id of the page from the event target object:
$(document).on("pageinit", function(e){
alert(e.target.id);
});
DEMO
Adding my bindings to the pageinit event like so:
$('#mypage').on("pageinit", function () {
$('#login-sumbit').on('click', function () {
console.log('button clicked');
});
});
I would expect pageinit to bind the click event once only. But what happens in my single page app is that the button is binding every time the page is loaded even when clicking back.
This results in undesirable multiple duplicate binds. Any ideas on what event to use to bind only once in my single page app, so that loading the page again (back button, loading inline page) in the same session doesn't re-bind?
Looks like I found the answer myself, turns out quite rightly pageinit fires every time the page is loaded even though it's not reloading from the server, otherwise what would fire when a new page is shown.
pageinit is the right event but I need to use .one not .on, .one will bind one time only.
$('#mypage').on("pageinit", function () {
$('#login-sumbit').one('click', function () {
console.log('button clicked');
});
});
Now everything works as expected. Better still I've found you can use .one with the pageinit event for even more control over your bindings and data loads perfect for my requirements.
http://api.jquery.com/one/
You could use:
$('#login-sumbit').off('click').on('click', function(e) {
console.log('button clicked');
});
Is there a way to replace all click event by vclick event in jQuery mobile?
The only solution I've found so far is to register a vclick event as below
$('a').bind("vclick", function (ev) {
// Do Some stuff
ev.preventDefault();
});
The problem is that this solution doesn't prevent jQuery mobile click event to fire so clicks are triggered twice
For some reason, I got the following to work:
$('a').bind('vclick click',function(e){
e.preventDefault();
//do some stuff//
})
Without the e.preventDefault() the event fires twice. With it, it only fires once (but it does fire)
This is similar to what you stated, but may be more all encompassing.
$("#elementId").bind('vclick',function(event){
event.preventDefault();
//your code..
});
this is working properly.
I have a JQuery Mobile Multi-Page layout and I want to trigger a function when a select menu on my site is changed.
Currently when the menu is changed three events fire.
I have put together an example that should show you what i'm facing.
From the main menu click Web Settings
Change the Theme option on the page
Notice the three alerts
Here is my code to register the event
$(document).bind("pagecreate", function() {
$("#settings-theme").bind("change", function(event) {
alert(event.target);
});
});
Things I have tried:
Changing the data-native-menu="false" to true removed one of the event firings.
Removed all other pages except web settings and that also reduced the number of events firing to two.
In JSFiddle, Framework Options > Head (nowrap) changed to DomReady also removed a event fire.
Update
It appears that pagecreate is fired every time a page is 'first-viewed' as well as twice when the homepage is loaded.
So by the time the settings page is loaded the event has been binded three times.. still no solution.
$(document).bind("ready", function() {
$("#settings-theme").live("change", function() {
alert("changed");
});
});
or
$(document).bind("ready", function() {
$("#pg-settings").delegate("#settings-theme", "change", function() {
alert("changed");
});
});