JQuery effect working in firefox; not chrome / ie - javascript

This problem surprises me because it does not work in Chrome as well. Chrome!!
Anyways, I have 3 select boxes, A, B, C. On a page load, B and C are hidden. (This is fine in all browsers). Currently, I have an event handler attached to specific values in box A, so that if a value is clicked, B shows itself populated with results according to A. Same thing for C: if a value in B is clicked, C will show itself.
However, this "show" effect only occurs in firefox -- Chrome and IE are confused.
Any suggestions? hints?
Here is some code:
$(document).ready(function() {
$("#B").hide();
$("#C").hide();
$('select#A option').each(function() {
$(this).click(function() {
$.getJSON(stuff, callback(data));
});
});
});
function callback(data) {
// alert("hi"); // This isn't working for Chrome / IE! so the callback isn't called
$("#B").show(); // This isn't working for Chrome / IE!
};
EDIT: It Turns out, the 'select#A option' -- the 'option' tag was the buggy one. After changing my handler to "change", I was able to debug and debug till I just removed the option tag -- everything seems to work now.
Thanks,
Michael

The actual problem is in the following line:
//...
$.getJSON(stuff, callback(data));
//...
You are not passing the callback function, you are actually executing the function and passing undefined since it doesn't return anything.
You should pass only the reference of the function:
//...
$.getJSON(stuff, callback);
//...
Or use an anonymous function in place:
//...
$.getJSON(stuff, function(data){
$("#B").show();
});
//...
Edit: I haven't noticed about the click handler that you're trying to assign, I recommend you to use the change event on the select element, to ensure that an option has been selected:
$(document).ready(function() {
$("#B,#C").hide();
$('select#A').change(function() {
$.getJSON(stuff, function(data) { $("#B").show();});
});
});

I think that you might have extra closing brackets at the end of the callback function.
UPDATE:
It seems like firefox can pick the click event for the option but not IE. i don't know for chrome but it might be the same problem. Instead of listening to the click event on the option you could just use the change event to track a change in the select.
you could do the following if the change event does correspond to what you are trying to do.
$(document).ready(function() {
$("#B").hide();
$("#C").hide();
$('select#A').each(function() {
$(this).change(function() {
$.getJSON(stuff, callback(data));
});
});
});
function callback(data) {
$("#B").show();
};
Notice how i am listening to the change event on the Select itself.
I hope this helps!

If you put an alert in your callback function does it get shown?

Related

jQuery callback function accumulating

I wrote some code for a custom confirm box that calls a function when confirm button (yes-button) is pressed and passes another function as a parameter and I bind it to 2 different button clicks with different functions as a parameter. For example:
$('#button1').click(function() {
callFunction(function() { alert("test"); });
});
$('#button2').click(function() {
callFunction(function() { alert("test2"); });
});
function callFunction(callback) {
//code to display custom confirm box
console.log(callback);
$('.confirm-box .yes-button').click(function() {
callback();
});
}
Everything happens as expected, confirm box appears and on confirm button click I get a callback function executed and it alerts "test" (or "test2" depending on which button called the confirm box). The problem arises when I click button1 that sends a function that alerts "test", then instead of confirming I cancel that (nothing happens as expected), and then click button2 that passes alert("test2") as a callback function. Now once I press the yes-button instead of alerting just "test2", I get both "test2" and "test" alerts even though that console.log I wrote logs just the function that alerts "test2" at the time of that button2 click. It seems like these callback functions get stacked somewhere, but I don't understand where and why.
The .click() function can add more than one handler to an element, and I think that's what's happening here. Try this:
// ...
$('.confirm-box .yes-button').unbind('click').click(function() {
callback();
});
This removes any previous click handler before applying the new one.
When you execute the code:
$('.confirm-box .yes-button').click(function() {
callback();
});
you are binding an event handler to the .yes-button element. If you run that code twice, it will have two events bound to it. And so on.
One solution is to use .one instead, so that the event handler will be removed after the first time it is fired:
$('.confirm-box .yes-button').one("click", function() {
callback();
});
This of course has issues if there are two confirm boxes open simultaneously or if there are two .yes-button elements, but for a simple use case it works fine.
What is happening is that each time a button is clicked the callFunction method is executing. It runs through that code block and applies an event listener to the $('.confirm-box .yes-button') button. So clicking your button N times will apply the click listener N times as well. One solution is to store the function in a variable.
Not sure what the end goal is, but this is one solution.
Another solution would be to remove buttons event listeners each time.
var functionToCallOnYes = function() {};
$('#button1').click(function() {
functionToCallOnYes = function() {
alert("test");
};
});
$('#button2').click(function() {
functionToCallOnYes = function() {
alert("test2");
};
});
$('.confirm-box .yes-button').click(function() {
console.log(functionToCallOnYes);
functionToCallOnYes();
});
You can do it by setting an identity by classes,
var button = $('.confirm-box .yes-button');
$('#button1').click(function() {
button.removeClass("b").addClass("a");
});
$('#button2').click(function() {
button.removeClass("a").addClass("b");
});
button.click(function() {
if($(this).hasClass("a")){
callBackForButton1();
} else {
callBackForButton2();
}
});
It is a bad practice to stack up the event handler for a single element.
Yes, extra callbacks are getting stacked up. In $('button1').click(f), the function f will be called with no parameters every time button1 is clicked. In this case, f is callFunction-- a function that itself attaches a new handler to any .confirm-box .yes-button element each time it's invoked. So on the Nth click, you should have N-1 alerts.
To make things like this easier, you can refer to functions by name in JavaScript. So if you had function test() { console.log("test"); };, you could write $(".confirm-box").click(test) just once and every click on a .confirm-box from then on would print test to the console.
Usually if you have callbacks whose sole purpose is to call a callback, you can just remove that callback.

why does my button disappear when I add the toggle event in jquery?

I want to toggle text between bold and normal I made this code for it, but when I open my page the bold button disappears?
$("#bold").toggle(function() {
$('.focus').css("font-weight", $(this).val());
}, function() {
$('.focus').css("font-weight", "normal");
});
Is there something wrong with my code?
Please help, thanks in advance.
Assuming you're using jQuery 1.9 or later the problem is that the .toggle() event handling method was removed from the library. So what you're actually calling is the .toggle() function that hides/shows elements. (In earlier versions of jQuery both functions existed and jQuery figured out which one you meant based on the arguments passed in.)
You can implement your own toggle easily enough with a standard .click() handler:
$("#bold").click(function() {
var f = !$(this).data("toggleFlag");
if (f) {
$('.focus').css("font-weight", $(this).val());
} else {
$('.focus').css("font-weight", "normal");
}
$(this).data("toggleFlag", f);
});
This uses the .data() method to keep track of a boolean flag to indicate which code to execute. The very first time the click handler is called the flag will be returned as undefined because it hasn't previously been set, but we just convert that to a boolean with ! (assuming you want to execute the if and not the else case on the first click).
It disappears because that version of toggle is deprecated and removed, and in newer versions of jQuery all it does is toggle visibility.
You could do something like this instead :
var state = true;
$("#bold").on('click', function() {
$('.focus').css("font-weight", state ? this.value : 'normal');
state = !state;
});
FIDDLE
The only solution I fount to the disappearing element after click... is Callback function after the toggle effect finished.
here a link that explain the Callback function.
and here is my code:
jQuery('.menu li.item-487').click(function(){
jQuery('#main-menu .moduletable .menu li').toggle("slow",function(){jQuery('.menu li.item-487').css('display' , 'block');});
});

jQuery - Custom plugin for toggling content

I just did my first jQuery plugin which hides content that is too long.
You can view the fiddle at http://jsfiddle.net/denislexic/bT4dH/6/.
When you check it out and click on the "...", you ll notice that the first one toggles three times, the second toggles two times and the third one is correct (so just once).
I have no idea why it's doing that. I tried e.preventDefault(), stopPropagation(), etc. Nothing seems to work.
Here is the code that seems to be the problem:
$("." + opts.clickZoneClass).on("click", function (e) {
_debugger(1);
var element = $(this).parent('div').children('div.status');
// I know you can use is(':visible'), but it doesn't work in Internet Explorer 8 somehow...
if (element.hasClass('open')) {
_debugger(2);
element.animate({
height:element.attr('data-toggle')
}, 'fast');
//$(this).html();
element.removeClass('open');
} else {
_debugger(3);
element.animate({
height:element.attr('data-height')
}, 'fast');
element.addClass('open');
}
return false;
});
It's because you're executing the above code in a $.each loop. If you pull out your binding code and just run it once your plugin works great.
I just pulled it out and moved it to the document ready function to illustrate...
http://jsfiddle.net/bT4dH/10/
I guess the click event is binding more than once when you iterating the element. To overcome this problem just add the unbind method before click i.e.
$("." + opts.clickZoneClass).unbind().on("click", function (e) {
// existing stuff
});
This will fix your issue.

catch paste event

I need a catch copy & paste event. I have a example. But paste event fires 4 times. Why? I need a it a one time. Here is the code? Please help me?
$(function() {
return $('#myform').bind('paste', function(e) {
return alert("123");
});
});
I'm not sure which browser your experience four events being fired, but I've jus tested your code for myself and could not reproduce the behaviour. That being said, there are a few issues with your code as it is...
There is no need to return the jQuery object after binding the event.
There is no need to return alert(), since alert returns undefined.
Take a look at these changes:
$(function() {
$('#myform').bind('paste', function(e) {
console.log(e.type);
});
});
See live: http://jsfiddle.net/rwaldron/6CKxM/

After jQuery ajax load or update, I lose the mouseover event

After using .load to update my div, that is add item to my list, I used firebug and saw that the list was updated. However, I lost the mouseover event that worked when the page first loaded. In my script js I have:
// hide and show are css classes that display none and block respectively
function openList(){
$("#miniList").removeClass().addClass("show");
}
function closeList(){
$("#miniList").removeClass().addClass("hide");
}
...
$(document).ready(function() {
$("#miniList").mouseover(function() {
openList();
})
$("#miniList").mouseout(function() {
closeList();
})
});
function addItemToDiv(id, ref, num) {
$("#miniList").load("/list/ajax_updateList.jsp", {
'action' : 'additem',
'pid' : id,
'pref' : ref,
'qty' : num
});
}
Of course, this works fine the first time the page is loaded, but when I add item to the list, DOM is update but mouseover effects don't work any more.
Any thoughts are more than welcomed.
For DOM elments added dynimically you need to use the jquery .live() function.
Please go through the below link, I think that might fix your problem:
api.jquery.com/live
#ishwebdev, this is common problem we run , for all the DOM elments added after pageload like run time, we need to bind the events through live instead of regular bind
If you are using jquery 1.4 use below code:
// from jquery.com
$('give your selector here').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});
#siri: thanks for the excellent answer, it worked for me right away. Here's my shopping cart dropdown example:
Before:
$("#cart-items").mouseenter(function(){
$('#cart-pulldown').show();
});
After:
$("#cart-items").live('mouseenter', function(){
$('#cart-pulldown').show();
});
With .live the event handling still works even after I change the underlying HTML via an Ajax call.
The selected answer no longer works for jquery 1.9+.
Instead, use "on" event, like
$( document ).on("keyup", "input.assets",function(event) {...
http://api.jquery.com/on/

Categories