this seems like it should be straightforward, but I'm having trouble getting it to work.
I have a .click bind to many buttons of a certain class. When that button is clicked, it passes its id to a $.post call for processing.
When the $.post call returns successfully, I'd like to remove the button and add a message to the container, but I can't seem to even access the button at that point.
Here is the .click bind:
$('.button').click(function() {
$.post('process.php', {
action: 'checkit'
},
function(result) {
if (result == 'win') {
// Access the button that was pressed with jQuery
}
else {
alert("fail");
}
});
});
I've tried, $(this), this, and also setting a variable like var trigger=this as I enter the initial click function, but none of these are working. I get undefined, or it points to the actual JQuery object, not the button.
Does anyone have any insight into how I can access the button that was clicked at that point, using a jQuery wrapper, essentially something like $( triggered button ).html() so that I can manipulate the correct button?
Thanks for your time.
$('.button').click(function() {
var clicked = $(this);
....
Use a local variable for temporary storage.
try this
$('.button').click(function() {
var $button = $(this);
$.post('process.php', {
action: 'checkit'
},
function(result) {
if (result == 'win') {
$button.doStuff();
}
else {
alert("fail");
}
});
});
It's quite easy to do:
$(this).foo('bar');
Is
$('.button').click(function() {
$.post('process.php', {
action: 'checkit'
},
function(result) {
if (result == 'win') {
$(this).html('something');
}
else {
alert("fail");
}
}.bind(this));
});
working?
jsfiddle example of what you are attempting. Click on the text. Just keep a local variable.
Related
I want to call a function every time my update was successful. The update is working my only concern is the alert pop-up every successful update.
$.post(
{
url: 'update_question.php',
data:
{
id: id,
new_question: newText,
},
success: function()
{
that.replaceWith("<section>"+newText+"</section>");
if(text != newText)
{
popup();
}
}
});
var popup = function () {
$(document).ready (function(){
$("#myWish").click(function showAlert() {
$("#success-alert").alert();
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").alert('close');
});
});
});
};
var popup = function () {
$("#success-alert").alert();
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").alert('close');
});
};
On the first update, pop-up showed but it doesn't show on the 2nd update
I think it'll solve your issue
$.post(
{
url: 'update_question.php',
data:
{
id: id,
new_question: newText,
},
success: function()
{
that.replaceWith("<section>"+newText+"</section>");
if(text != newText){
popup();
}
}
});
function popup() {
$("#success-alert").alert();
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").alert('close');
});
};
The $(document).ready jquery function waits until the DOM is loaded into your browser before it executes the javascript code contained within it's function scope {}.
So remove $(document).ready from your code.
Also note that single page applications only need to list $(document).ready once and all the listener events you setup are defined within it's body.
So you should have it listed somewhere at least once and then you define all your initial event listeners within its body.
I have a simple function that shows a div when the user clicks on a given checkbox. I'd like to have the same behaviour on another checkbox, so that's why I'd like to generalize it as a function passing the element to be shown.
But I'm not aware of the syntax on Jquery to do so. And it's triggering automatically when the page loads. Does anybody has an idea?
Code:
$(document).ready(function() {
$("#transcricao").change(
function(){
if ($('.form_transcr').css('display') === 'none') {
$('.form_transcr').fadeIn();
} else {
$('.form_transcr').fadeOut();
}
}
); //This is working fine!
$("#traducao").change( show_hide($('.form_trad')) );
//This is auto-trigerring without user action...
});
Here's my function:
function show_hide($elm){
//This is the "generalized" function that I'd like to use on both
//checkboxes, just passing the element.
if ($($elm).css('display') === 'none') {
$($elm).fadeIn();
} else {
$($elm).fadeOut();
}
}
Its auto-triggering without user action because you are invoking it.
Use
$("#traducao").change(function () {
show_hide($('.form_trad'));
});
As you are passing jQuery object so use it directly
function show_hide($elm) {
//This is the "generalized" function that I'd like to use on both
//checkboxes, just passing the element.
if ($elm.css('display') === 'none') {
$elm.fadeIn();
} else {
$elm.fadeOut();
}
}
The argument to .change() should be a function. You're not passing a function, you're calling the function.
$("#traducao").change(function() {
show_hide($('.form_trad'));
} );
BTW, your show_hide function seems to be equivalent to jQuery's fadeToggle method, so it can be:
$("#traducao").change(function() {
$(".form_trad").fadeToggle();
});
What I am trying to achieve is that whenever you click an image, it changes the window.location url, toggling it between '#' and '#footer'. Right now, all I have is this:
<script>
function clickarrow(){
var rd=Math.floor(Math.random()*11)
if (rd > 5){
window.location="#footer";
}
else{
window.location="#";
}
}
</script>
As you can see, this makes a 50:50 chance of either change being made. It works as a temparary fix, but sometimes you have to click up to 6 times for it to take effect.
Is there a way of doing this that properly toggles the window.location?
I am using jQuery 1.9.
If you're trying to reliably toggle the hash, rather than using a random chance, try something like this:
function clickarrow(){
var showFooter = true;
return function () {
if (showFooter) {
window.location.hash = "footer";
} else {
window.location.hash = "";
}
showFooter = !showFooter;
}
}
jQuery(function () {
jQuery('#myToggleLink').click(clickarrow());
});
Note: Normally when binding events, a function reference must be passed in. Here, I'm invoking clickarrow() since it returns a function by design. The returned function encapsulates the toggle variable via closure.
you can use data attribute to tell what is next step:
$('#arrow').click(function() {
if ($(this).data('footer'))
{
window.location="#footer";
$(this).data('footer', 'false');
alert('b');
}
else
{
window.location="#";
$(this).data('footer', 'true');
alert('a');
}
});
I want to toggle the voting arrow class, the same way as stackoverflow's voting arrow. For a logged in user, if already voted up, the html is:
After user clicked down arrow, if response success, How to change "vote-up-on" to "vote-up-off", and change "vote-down-off" to "vote-down-one"?
Well, this works the same as the SA votes - it could be a bit more concise but I really need to get back to work ;-)
vote up
<span class="votes">0</span>
vote down
and the jquery:
$(document).on('click', '.vote-up', function () {
if(!$(this).hasClass('vote-locked')){
var votes = parseInt($(this).parent().find('.votes').text());
if(!$(this).hasClass('vote-off')){
$(this).addClass('vote-off');
$(this).nextAll('a').addClass('vote-locked');
votes++;
}
else{
$(this).removeClass('vote-off');
$(this).nextAll('a').removeClass('vote-locked');
votes--;
}
$(this).parent().find('.votes').text(votes);
}
});
$(document).on('click', '.vote-down', function () {
if(!$(this).hasClass('vote-locked')){
var votes = parseInt($(this).parent().find('.votes').text());
if(!$(this).hasClass('vote-off')){
$(this).addClass('vote-off');
$(this).prevAll('a').addClass('vote-locked');
votes--;
}
else{
$(this).removeClass('vote-off');
$(this).prevAll('a').removeClass('vote-locked');
votes++;
}
$(this).parent().find('.votes').text(votes);
}
});
http://jsfiddle.net/gqDgL/
Make a callback function when you receive Ajax response.
function addVoteUpClass() {
if (jQuery(".vote").hasClass("vote-up-on")) {
jQuery(".vote-up-on").removeClass("vote-up-on").addClass("vote-up-off");
}
}
jQuery.ajax({
url: "your_url",
method: "GET",
success: function(data) {
addVoteUpClass();
}
});
jQuery can add and remove classes, using addClass and removeClass,
$('#vote-up-%1$d').removeClass('vote-up-on');
$('#vote-up-%1$d').addClass('vote-up-off');
$("#vote-up").click(function () {
$(this).toggle();
$(this).toggleClass("vote vote-down-off");
});
try this
I've written this code for a friend. The idea is he can add a "default" class to his textboxes, so that the default value will be grayed out, and then when he clicks it, it'll disappear, the text will return to its normal color, and then clicking a second time won't clear it:
$(document).ready(function() {
var textbox_click_handler = function clear_textbox() {
$(this).removeClass('default');
$(this).attr('value', '');
$(this).unbind(textbox_click_handler);
};
$(".default").mouseup(textbox_click_handler);
});
The clicking-to-clear works, but I get the following error:
Uncaught TypeError: Object function clear_textbox() { ... } has no method 'split'
what is causing this? How can I fix it? I would just add an anonymous function in the mouseup event, but I'm not sure how I would then unbind it -- I could just unbind everything, but I don't know if he'll want to add more functionality to it (probably not, but hey, he might want a little popup message to appear when certain textboxes are clicked, or something).
How can I fix it? What is the 'split' method for? I'm guessing it has to do with the unbind function, since the clearing works, but clicking a second time still clears it.
You can do it like this:
var textbox_click_handler = function(e) {
$(this).removeClass('default')
.attr('value', '')
.unbind(e.type, arguments.callee);
};
$(function() {
$(".default").mouseup(textbox_click_handler);
});
Or use the .one function instead that automatically unbinds the event:
$(function() {
$(".default").one('mouseup', function() {
$(this).removeClass('default').attr('value', '');
});
});
The unbind needs an event handler while you are specifying a function to its argument thereby giving you the error.
I am not sure if this is really different but try assigning the function to a variable:
var c = function clear_textbox() {
$(this).removeClass('default');
$(this).attr('value', '');
$(this).unbind('mouseup');
}
and then:
$(".default").mouseup(function(){
c();
});
if you don't want to completely unbind mouseup, check for the current state using hasClass(). No need to unbind anything.
$(document).ready(function() {
$('.default').bind('mouseup', function(e) {
var tb = $(this);
if(tb.hasClass('default')) {
tb.removeClass('default').val('');
}
});
});
Make sure you are unbinding mouseup:
function clear_textbox() {
$(this).removeClass('default');
$(this).attr('value', '');
$(this).unbind('mouseup');
}
$(function() {
$('.default').mouseup(clear_textbox);
});
Also I would write this as a plugin form:
(function($) {
$.fn.watermark = function(settings) {
this.each(function() {
$(this).css('color', 'gray');
$(this).mouseup(function() {
var $this = $(this);
$this.attr('value', '');
$this.unbind('mouseup');
});
});
return this;
};
})(jQuery);
so that your friend can simply:
$(function() {
$('.someClassYourFriendUses').watermark();
});