Using jQuery .attr or .prop to set attribute value not working
Solution 1
I am not exactly sure of the reason why the original code isn't working, but the $this
seems to be the cause for some reason. Try the below and it seems to work. Fiddle is here.
I will try to update the answer with the reason as soon as I find it.
var loaded = $(".preview-button").attr('data-loaded');
if (loaded === "no") {
$.ajax({
success: function (result) {
$(".preview-button").attr('data-loaded', 'yes');
alert($(".preview-button").attr('data-loaded'));
}
});
} else {
alert("data loaded");
}
Refer this thread and this seems to be the reason why the $this
doesnt seem to work from inside the AJAX call.
Solution 2
reading the question ..
so that the ajax is not ran again if the user clicks on the button more than once.
i think you need one()
, it allows the event to run just once.. no need of changing the attributes and properties
example
$(".preview-button").one('click',function(){
//your ajax stuff
alert('clicked!!!!');
});
Comments
-
mmvsbg almost 3 years
I've created a button with an attribute named 'loaded' and initial value of 'no'. Upon clicking the button I'm running some ajax and at the very end of it I'm trying to set the 'loaded' attribute to 'yes' so that the ajax is not run again if the user clicks on the button more than once.
I have something like this: http://jsfiddle.net/PDW35/2/
Clicking the button does not change loaded to 'yes'. However, if you do an alert right after the .attr call like this:
alert($(this).attr('loaded'));
The alert box does contain 'yes' which doesn't help because once the user clicks, the same code above puts up a 'no' alert box on the screen.
It all behaves the same way if I use
.prop()
instead of.attr()
. Am I missing a point here or.prop()
and.attr()
just don't work with custom attributes?EDIT: Updated jsfiddle using ajax based on the comments below: http://jsfiddle.net/PDW35/5/
-
mmvsbg almost 11 yearsThat's a good tip, however, one of the other things that I do upon a click on the button is to .slideToggle a div which needs to happen more than once. I only want to load the ajax once (which goes inside of the div that gets to slide up and down).
-
mmvsbg almost 11 yearsThat is interesting, you are right!!! Works now, if I find the reason why $this fails I'll post here as well!
-
mmvsbg almost 11 yearsI think that $(this) is just not defined (or more likely predefined) inside of the .ajax success function. Take a look at the following JSfiddle: jsfiddle.net/PDW35/8 The first alert box displays the class of the button, the second one just says 'undefined'.
-
Harry almost 11 years@mmvsbg no mate, check the update I made to the answer. within the Ajax call $this refers to the call and not your button that fired the event. this is the reason why the first alert (outside the ajax) works and the other (inside) doesnt.
-
mmvsbg almost 11 yearsyes, I just saw that part of the answer now. Thank you very much, helped a ton!