Here is a link to the fiddle of the issue I am facing with pageinit and ready events
With the fiddle link everything works using onLoad and onDOMready. "Everything" meaning
The subject listings is properly loaded with a popup on click that lists the modules
The Module list gives an alert on click
But in my code trying to bind the events to the respective ids after pageinit is not working
$('#home').on('pageinit', function() {
$('#modules').on('vclick','li', function(e){
e.stopImmediatePropagation();
e.preventDefault();
var module = $(this).attr("category");
moduleClick(module);
});
});
Listening for $(document).ready( function() {)} does not popup the Modules.
Try
$(window).load(function() {
...
});
or
document.addEventListener('deviceready', onDeviceReady, true);
function onDeviceReady(){
...
}
If you want to open a popup as soon as your page loads, its better you do it in pagecreate, as of JQM 1.4 pageinit is deprecated, but just a popup open will not work due to some chaining issue, you need to add some timeout as well
Put an anchor with href to the popup and fire click
$(document).on("pagecreate", function(event) {
setTimeout(function(){
$("a#popupOpen").click();
},200);
});
or
$(document).on("pagecreate", function(event) {
setTimeout(function(){
$( "#popup" ).panel( "open" );
},200);
});
Related
I neen to capture event eachtime user click on Livechat on my Website. A stackoverflower helped me to solve problem on Purechat, but the solution do not work with Subiz (another Livechat).
Refer old solution for purechat: How to raise event click on Purechat with jQuery
My code is as follow:
jQuery(document).ready(function () {
jQuery(document).on("mousedown", ".sbzon", function (){
console.log("clicked on"); // do not work
});
jQuery(document).on("mousedown", ".sbzoff", function () {
console.log("clicked sbzoff"); // do not work
});
jQuery(document).on("mousedown", "p", function () {
console.log("clicked p"); // only this work
});
});
Please help me, this is the jsfiddle link of problem:
https://goo.gl/mpe0Mn
Thanks so much,
Subiz Live Chat use iframe to keep their widget dom elements. Events: click... on widget is holded on iframe window, not delegate to parent window (your site) so you can't bind event as: jQuery(document).on('.sbzon', 'click', function...), event never fire.
I have a solution to capture event click on Subiz widget, use document.activeElement to track current on parent site or iframe Subiz. (may be useful for other case :)), see below:
function visitorClickedOnSubizLiveChat() {
alert('yes');
};
setInterval(function() {
if (document.activeElement) {
if (document.activeElement.id === 'sbzon_frame' || document.activeElement.id === 'sbzoff_frame') {
visitorClickedOnSubizLiveChat();
}
window.focus();
// or document.activeElement.blur();
}
}, 600);
Good luck!
Update link test: http://jsfiddle.net/tuanlongn/apvp2xvc/
I'm trying to set up a page with a modal window which fires on either the mouse existing the window or on the click of a link.
Firing on exit is ok using Ouibounce:
http://carlsednaoui.github.io/ouibounce/
The documentation on the Ouibounce API suggests I should also be able to fire the modal via a click.
I have changed the link in the above example, giving it an id of #modal_button but I can't get it to fire the window:
// if you want to use the 'fire' or 'disable' fn,
// you need to save OuiBounce to an object
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
timer: 0,
callback: function() { console.log('ouibounce fired!'); }
});
$('#modal_button').on('click', function() {
$('#ouibounce-modal').fire();
});
$('body').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});
I set up a jsfiddle here which does the same thing.
http://jsfiddle.net/fr7k3s6f/
(for some reason the 'hide" on the body event doesn't work in the jsfiddle)
You need to use your object _ouibounce to call the fire() function on:
_ouibounce.fire();
and not the jQuery object. And it needs to be a global object if you define it at jQuery.ready(), so no "var" before. But i think this is a bug in the current version (0.0.10).
I hope this helps.
can you please tell me why pageshow event not call in jquery mobile?
http://jsfiddle.net/G7AvE/
$(document).ready(function(){
$("#1").on('pagebeforeshow ', function() {
//YourFunctionCall();
alert('1')
});
});
jQuery( "#1" ).on( "pageshow", function( event ) { alert('1') } )
Refrain from using .ready() in jQuery Mobile, use pageinit instead. Moreover, for page id, don't use plain digits; an id should contain characters.
$(document).on("pageinit", "#pageID", function () {
$("#pageID").on('pagebeforeshow ', function () {
/* run code */
});
});
Demo
At top left, the dropdown below Frameworks and Extensions. Change from onload to No Wrap- in <body>
Updated Fiddle
In jsFiddle this makes sure the libraries are loaded before your code tries to use them.
I have a Rails 3.2 app with a menu toggle div for displaying a horizontal nav menu. After the back or forward button is clicked, a click of the div no longer toggles the menu. I have tried using event delegation and pjax events to fix this issue, but nothing seems to work.
When event delegation and/or pjax events aren't used the toggle works correctly on full refresh and pjax requests, but breaks on back/forward button. When I add delegation or pjax events in different combos, the problems occur. Here are several different scripts I've tried. I'm getting very weird results, working sometimes and not others... I'm concerned I may not be combining them correctly. These are all wrapped in script tags on the particular view, vs in application.js. Thanks for your help!
1. No event delegation, works besides back/forward
$(document).ready(function() {
$('.menu-toggle').on('click', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
});
2. With event delegation, works SOMETIMES, never for back/forward
$(document).ready(function() {
$(document).on('click', '.menu-toggle', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
});
3. With pjax:end event inside document ready
$(document).ready(function() {
$('.menu-toggle').on('click', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
$(document).on('pjax:end', function() {
$('.menu-toggle').on('click', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
});
});
4. With pjax:end outside document ready
$(document).ready(function() {
$(document).on('click', '.menu-toggle', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
});
$(document).on('pjax:end', function() {
$('.menu-toggle').on('click', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
});
I moved the event delegated script to application.js inside document ready.
$(document).ready(function(event) {
$('body').on('click', '.menu-toggle', function () {
$('.menu-toggle').toggleClass('menu-toggle-open');
$('.menu-wrap').toggleClass('menu-open');
});
});
I'm not that great with jQuery but basically, I have a jQuery that displays when scrolling down, new content.
But that new content has div that are under effect of another jQuery function that is called by ready.
So not it only the content that is loaded first when the page loads is working but when the new content is showing is not working on it to.
So I'm thinking maybe I can link the two jQuerys like a trigger when the second jQuery loads to execute the first one, is it possible? How?
Thanks!
UPDATE:
$(document).ready(function($){
$('.wrapper-hover').hover(
function () {
$(this).animate({opacity:'1'});
},
function () {
$(this).animate({opacity:'0'});
}
);
};
Try using Jquery .trigger() to trigger an event and then have something listen for that event
$(document).ready(function($){
//your event handler
$('body').on('event', function() {
$('.wrapper-hover').hover(
function () {
$(this).animate({opacity:'1'});
},
function () {
$(this).animate({opacity:'0'});
}
);
});
};
//when your inifinite scroll finishes trigger the event
$('body').trigger('event');
If all you're doing is attaching a hover event to that class you might also want to think about event delegation, still not sure what your intention is based on your question.
What I understood from your question is that you want a hover event on a div which works well when the page is loaded but it doesn't work when a new div renders. If this is so then try the following code.
$(document).ready(function($){
$('.wrapper-hover').on("mouseenter", function() {
$(this).animate({opacity: '0'}, 1000,
function() {
$(this).animate({opacity: '1'});
});
});
});
I resolved the issue with callback of the infinite scroll jquery. Thanks all!