Using jQuery .attr or .prop to set attribute value not working

javascript jquery attr prop
mmvsbg picture mmvsbg · Aug 1, 2013 · Viewed 25.6k times · Source

I've created a button with 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 ran 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/

Answer

Harry picture Harry · Aug 1, 2013

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.

Related questions

.prop() vs .attr()

So jQuery 1.6 has the new function prop(). $(selector).click(function(){ //instead of: this.getAttribute('style'); //do i use: $(this).prop('style'); //or: $(this).attr('style'); }) or in this case do they do the same thing? And if I do have …

Read More
jQuery attr vs prop?

Now this isn't just another What's the difference question, I have done some tests(http://jsfiddle.net/ZC3Lf/) modifying the prop and attr of <form action="/test/"></form>​ with the output being: 1) prop Modification test …

Read More
jQuery .prop() returns undefined, while .attr() works as expected for data-*

I am simply trying to get a couple of properties from two elements. Getting the property value from the input element works as expected. The problem is with getting the property data-detail property from the button element. It returns undefined …

Read More