jQuery event delegation & PJAX events not working - javascript

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');
});
});

Related

How to raise event when click on livechat using javascript

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/

jquery toggle works only once

my intention is to write code that toggles back and forth when any of the two buttons are clicked , its simple code but not working as expected:
$('#pup_container').load('plst_main_f/login_form.php').hide();
$('#login_activate').click(function (e) {
e.preventDefault();
$('#pup_container').fadeIn(950);
});
$('#button_img').click(function () {
$('#login_wrapper_background').slideToggle(755);
});
works fine the first time around, but isn't TOGGLING like its supposed to, the toggle happens once and its probably because they are triggered with different buttons but i'm not quite sure, please help
code here is part of the ready function.
Since the button_img is loaded dynamically, you need to bind the handler after the element is loaded dynamically
$('#pup_container').load('plst_main_f/login_form.php', function () {
$('#button_img').click(function () {
$('#login_wrapper_background').slideToggle(755);
});
}).hide();
$('#login_activate').click(function (e) {
e.preventDefault();
$('#login_wrapper_background').toggle(950, function () {});
});
Or use event delegation

Pageinit and Ready Events Irregularities

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);
});

How to trigger a jQuery function to load again after another jQuery is executed?

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!

jQuery - triggering sequence of clicks won't work

hi this is my code http://jsfiddle.net/Xy4dF/1/
i have this part:
$('#top-user').on('click', function () {
alert('1');
});
$('.user').on('click', function () {
alert('2');
});
now out of this code i want to trigger in sequence the 2 elements clicks
so i do:
$('#top-user').click(function () {
$('.user').click();
});
What is wrong? :O
Is the following what you're after (I'm not 100% sure I've understood the question)
$(function () {
$('#top-user').on('click', function () {
alert('1');
});
$('.user').on('click', function () {
alert('2');
});
$('#top-user').click(function () {
$('.user').click();
}).click();
});
The reasons your original code didn't work is that:
You had defined the event handlers but not triggered any on page load.
You need to define an event handler before you trigger it. This is because when triggering an event, JQuery fakes it by immediately calling the bound event handlers rather than managing to genuinely trigger the event at browser level.
Hope this helps

Categories

Resources