I need to capture every showpage event on every div with data-role=page in my web application (jquery 1.7.1, jquerymobile 1.1.0) to run a function InitPage();
So in a Global.js, i made this
$(".ui-page").live("pageshow", function () { InitPage(); });
But, i don't know why, on some pages it works, but in others doesn't work.
Any suggestion?
Try this:
$('[data-role=page]').live('pageshow', function (event, ui) { InitPage(); });
Related
I am using offline.js with turbolinks and on initial page load it works fine. But if I click another links then this wont work until I refresh the page. I can see the Offline.state is down but still the view is not showing. Is there any way to manually trigger the popup window?
Update
Other than the offline.js file the only js I have is this
var
$online = $('.online'),
$offline = $('.offline');
Offline.on('confirmed-down', function () {
$online.fadeOut(function () {
$offline.fadeIn();
});
});
Offline.on('confirmed-up', function () {
$offline.fadeOut(function () {
$online.fadeIn();
});
});
This is an old question, but I ran into the same problem, maybe it can help someone.
offline.js creating these dom elements on page load inside the body HTML
<div class="offline-ui offline-ui-up">
<div class="offline-ui-content"></div>
</div>
The reason why offline.js not working after page change is that on-page change the body HTML replaced with the new content returned by the server and the code above removed.
This is how Turbolinks works, so page load will be not triggered and the offline.js dom elements will be not created.
One solution will be to warp the offline.js inside a function and call it on every page change, but it will cause eventually memory leak (as "offline" and "online" event listener will be added to 'window' on each change)
Other solution will be to save the 'offline-ui' HTML before the new page loaded and bring it back after load:
# will fire before page change and save offline.js UI
document.addEventListener("turbolinks:before-render", function() {
if (!document.offlineHtml) {
document.offlineHtml = $('.offline-ui');
}
});
# will fire afterload and will check if there is a UI to append to the body
document.addEventListener("turbolinks:load", function() {
if (document.offlineHtml) {
$(document.body).append(document.offlineHtml);
}
});
At the moment this is the best way that I could find to fix that.
This could be a turbolinks issue. In app/assets/javascripts/application.js, wrap your javascript code within:
$(document).on('turbolinks:load', function() {
// your code
});
This seems to be a problem with autocomplete in the jQuery UI 1.9.x versions- Is there any way to keep the jQuery UI autocomplete menu open when desired after clicking on some items? In 1.9.2, no matter what I try, the menu just won't stay open, no matter what I try.
I must use jQuery UI 1.9.2. I've seen solutions for earlier versions of jQuery UI that work, but they do not work with 1.9.2.
This code works with an older version of jquery + jquery UI:
var $input = $("input").autocomplete({
source: ['Hello', 'Goodbye', 'Foo', 'Bar']
});
$input.data("autocomplete").menu.options.selected = function(event, ui) {
// clear out old function
};
http://jsfiddle.net/nr757/
Similar code does not work in ui 1.9.2:
http://jsfiddle.net/Db9VE/
$( "#input" ).autocomplete({
source: availableTags,
close : function (event, ui) {
if (!$("ul.ui-autocomplete").is(":visible")) {
$("ul.ui-autocomplete").show();
}
}
});
I fill list dynamically, and after that on click I have multiple calls of event. 1st time it is repeated 1 time, 2nd time 2 times, 3rd time 3 times, etc...
First, more about this problem can be found in my other answer: jQuery Mobile: document ready vs page events
Prevent multiple event binding/triggering
Because of interesting jQM loading architecture, multiple event triggering is a constant problem. For example, take a look at this code snipet:
$(document).on('pagebeforeshow','#index' ,function(e,data){
$(document).on('click', '#test-button',function(e) {
alert('Button click');
});
});
Working jsFiddle example: http://jsfiddle.net/Gajotres/CCfL4/
Each time you visit page #index click event will is going to be bound to button #test-button. There are few ways to prevent this problem:
Solution 1:
Remove event before you bind it:
$('#index').live('pagebeforeshow',function(e,data){
$('#test-button').die().live('click', function(e) {
alert('Button click');
});
});
Working jsFiddle example: http://jsfiddle.net/Gajotres/K8YmG/
In case you have different events bound to an object:
$('#index').live('pagebeforeshow',function(e,data){
$('#test-button').die('click').live('click', function(e) {
alert('Button click');
});
});
Solution 2:
Use a jQuery Filter selector, like this:
$('#carousel div:Event(!click)').each(function(){
//If click is not bind to #carousel div do something
});
Because event filter is not a part of official jQuery framework it can be found here: http://www.codenothing.com/archives/2009/event-filter/
In a nutshell, if speed is your main concern then Solution 2 is much better then Solution 1.
Solution 3:
A new one, probably an easiest of them all.
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#test-button',function(e) {
if(e.handled !== true) // This will prevent event triggering more then once
{
alert('Clicked');
e.handled = true;
}
});
});
Working jsFiddle example: http://jsfiddle.net/Gajotres/Yerv9/
Tnx to the sholsinger for this solution: http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/
More info
If you want to find more about this problem take a look at this article, working examples are included.
I am working on an application using jquery mobile and in the process of re-factoring the app into modules with RequireJS. I have almost completed the task but ran into one a problem which I need a little help with.
I am manually loading my script files (jquery, jqm, knockout etc) and define these libraries as the first thin in my main.js file.
(function(){
var root = this
define('jquery', [], function () { return root.jQuery; });
define('ko', [], function () { return root.ko; });
....
})();
Next I load the jquery mobile plugin and boot the application
....
require([
'Scripts/lib/mobile/jquery.mobile-1.2.0'
], function () {
$(document).on('pageinit' function(){ alert('page init event triggere'); });
boot();
});
My problem is that 'pageinit' event is already triggered by the time requirejs executes factory function, which attaches to the event. Subsequent pageinit events are catched as expected but im missing the initial one when the app first loads. If I move the event binding out of the require module it works fine. Any ideas how I register and handle these jqm events?
Thanks in advance.
I had the same problem and I found that you shouldn't load jquery mobile module as a global dependency, but directly in the core of the function :
require(["jquery"], function($) {
console.log("requireJS loaded");
require(["jquery.mobile"]);
$( document ).on( 'pagecreate pageinit pageshow', '#mappage', function( event ) {
var eventType = event.type;
switch(eventType) {
case 'pagecreate':
console.log("mappage : pagecreate");
break;
case 'pageinit':
console.log("mappage : pageinit");
break;
case 'pageshow':
console.log("mappage : pageshow");
break;
};
});
});
I need a way to reload my parent page when I close my jqUI modal window. Somehow or the other, what I am currently doing is not working (imagine that)...
$('div#addPat').live('dialogclose', function (event) {
debugger;
location.reload(true);
});
I never get to the debugger statement so I assume just assume that my event is wrong...
How do I get the close dialog event and how can I use it to reload the page... I think I have the second part figured out.
Try this:
$( "div#addPat" ).dialog({
close: function(event, ui) {
debugger;
....
}
});
REF: http://jqueryui.com/demos/dialog/#event-close