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

Question

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/

Are you viewing the original source code by any chance when checking the `loaded` attribute? Because it works in that fiddle for me in Chrome — CodingIntrigue, Aug 01 '13 at 07:26
Everytime I click button for the second time and so on - it alerts `yes`. The attribute is set properly. But try to use allowed attributes starting with `data-` and use jQuery function `data()` for working with them. — u_mulder, Aug 01 '13 at 07:28
If you're making up your own attribute, prefix it with `data-`. Also, attribute names cannot contain underscores. — Blender, Aug 01 '13 at 07:28
I'm also using Chrome and it doesn't work for me, neither in the jsfiddle nor in the testing environment that I'm using. — mmvsbg, Aug 01 '13 at 07:29
wouldn't it be better to make the button disabled if you don't want it executed more than once? (or) are you saying that you are doing some other action on button click and don't want only the AJAX call part? (Note: It works for me also in Chrome) — Harry, Aug 01 '13 at 07:35
Here's an updated jsfiddle: http://jsfiddle.net/PDW35/5/ I'm loading stuff with the ajax (needs to happen only once) but upon clicking the button I'm also doing some .slideToggles which need to happen every time. In that example I'm seeing the alert box with 'yes' in it every time when I should be seeing it only once after the first click. — mmvsbg, Aug 01 '13 at 07:41

score 4 · Accepted Answer · edited May 23 '17 at 11:53

4

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.

edited May 23 '17 at 11:53

Community

1
1

answered Aug 01 '13 at 07:55

Harry

80,224
23
168
185

That is interesting, you are right!!! Works now, if I find the reason why $this fails I'll post here as well! – mmvsbg Aug 01 '13 at 08:00
I think that $(this) is just not defined (or more likely predefined) inside of the .ajax success function. Take a look at the following JSfiddle: http://jsfiddle.net/PDW35/8/ The first alert box displays the class of the button, the second one just says 'undefined'. – mmvsbg Aug 01 '13 at 08:09
2

@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. – Harry Aug 01 '13 at 08:13
yes, I just saw that part of the answer now. Thank you very much, helped a ton! – mmvsbg Aug 01 '13 at 08:18

score 2 · Answer 2 · answered Aug 01 '13 at 07:28

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

answered Aug 01 '13 at 07:28

bipen

34,730
9
44
61

That'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 Aug 01 '13 at 07:31

score 0 · Answer 3 · answered Aug 01 '13 at 07:37

You can set property for your click (or submit) function:

$( ".preview-button" ).click( function() {
    this.ajaxCompleted = this.ajaxCompleted || false;

    if ( !this.ajaxCompleted ) {
        // run your request and set this.ajaxCompleted to true in a callback;
    }

    // do other stuff
} );

score 0 · Answer 4 · answered Aug 01 '13 at 07:41

you could try the following code: once you clicked data is loaded, second time click will alert that data is loaded already.

$(".preview-button").click(function(){

var id = $(this).attr('button_id');
var loaded = $(this).attr('loaded');
    if(loaded == "no"){        
        $(this).attr('loaded', 'yes');
   }else{
        alert("Data is loaded");     
   }
});

working example here: http://jsfiddle.net/PDW35/4/

score 0 · Answer 5 · answered Oct 29 '20 at 13:14

0

just change the click function with 'on' like this example:

$(document).on('click', '.element', function () {
    let myelem_attr= $(this).attr('data-my-attr');
}

answered Oct 29 '20 at 13:14

ThisIsWilliam

354
3
9

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

5 Answers5

Linked