I'm not sure what I'm doing wrong but for the past 2 hours I've been trying to use prop to change the value of two items in a button. It works for one but not for the other and I have no idea why.

html:

<input type='button' value='Following' id='btnFollow' dataaction="UnFollow" datatype='topic'>

jquery:

    $("#btnFollow").prop("value", "Follow");
    $("#btnFollow").prop("dataaction", "Follow");

The first item changes(value) but not the second one(dataaction). I have no idea why(other then maybe its too late and my brain is rebelling). According to the documentation I'm doing it correct. I added alerts inbetween each command in case one was failing, but both alerts went off meaning jquery is not crashing or anything when it tries to change the second item. I don't see any spelling mistakes and I tried to daisy chain the commands but still no luck.

Any suggestions?

entire_code:

$(document).ready(function () {
    $('#btnFollow').click(function() {
        var topic_id = $(this).attr('datatopic');
        var action_type = $(this).attr('datatype');
        var action_type_action = $(this).attr('dataaction');
        alert(action_type_action);
        //$("#btnFollow").prop('value', 'Following');
        if (action_type_action == 'Follow') {
            $("#btnFollow").prop({'value': 'Following', 'dataaction': 'UnFollow'});
            //$("#btnFollow").prop("value", "Following");
            //$("#btnFollow").prop("dataaction", "UnFollow");
                 $.ajax({
                type: 'POST',
                url: '/follow_modification',
                async: false,
                data: {
                    topic: topic_id,
                    action: action_type_action,
                    follow_type: action_type
                }
                //complete: function(xmlRequestObject, successString){
                //    ymmReceiveAjaxResponse(xmlRequestObject, successString);
                //}
            });

        } else if (action_type_action == 'UnFollow') {
            $("#btnFollow").prop({'value': 'Follow', 'dataaction': 'Follow'});
            //$("#btnFollow").prop("value", "Follow");
            //$("#btnFollow").prop("dataaction", "Follow");
            $.ajax({
                type: 'POST',
                url: '/follow_modification',
                async: false,
                data: {
                    topic: topic_id,
                    action: action_type_action,
                    follow_type: action_type
                }
                //complete: function(xmlRequestObject, successString){
                //    ymmReceiveAjaxResponse(xmlRequestObject, successString);
                //}
            });
        }
    })

});

I'm not sure what I'm doing wrong but for the past 2 hours I've been trying to use prop to change the value of two items in a button. It works for one but not for the other and I have no idea why.

html:

<input type='button' value='Following' id='btnFollow' dataaction="UnFollow" datatype='topic'>

jquery:

    $("#btnFollow").prop("value", "Follow");
    $("#btnFollow").prop("dataaction", "Follow");

The first item changes(value) but not the second one(dataaction). I have no idea why(other then maybe its too late and my brain is rebelling). According to the documentation I'm doing it correct. I added alerts inbetween each command in case one was failing, but both alerts went off meaning jquery is not crashing or anything when it tries to change the second item. I don't see any spelling mistakes and I tried to daisy chain the commands but still no luck.

Any suggestions?

entire_code:

$(document).ready(function () {
    $('#btnFollow').click(function() {
        var topic_id = $(this).attr('datatopic');
        var action_type = $(this).attr('datatype');
        var action_type_action = $(this).attr('dataaction');
        alert(action_type_action);
        //$("#btnFollow").prop('value', 'Following');
        if (action_type_action == 'Follow') {
            $("#btnFollow").prop({'value': 'Following', 'dataaction': 'UnFollow'});
            //$("#btnFollow").prop("value", "Following");
            //$("#btnFollow").prop("dataaction", "UnFollow");
                 $.ajax({
                type: 'POST',
                url: '/follow_modification',
                async: false,
                data: {
                    topic: topic_id,
                    action: action_type_action,
                    follow_type: action_type
                }
                //complete: function(xmlRequestObject, successString){
                //    ymmReceiveAjaxResponse(xmlRequestObject, successString);
                //}
            });

        } else if (action_type_action == 'UnFollow') {
            $("#btnFollow").prop({'value': 'Follow', 'dataaction': 'Follow'});
            //$("#btnFollow").prop("value", "Follow");
            //$("#btnFollow").prop("dataaction", "Follow");
            $.ajax({
                type: 'POST',
                url: '/follow_modification',
                async: false,
                data: {
                    topic: topic_id,
                    action: action_type_action,
                    follow_type: action_type
                }
                //complete: function(xmlRequestObject, successString){
                //    ymmReceiveAjaxResponse(xmlRequestObject, successString);
                //}
            });
        }
    })

});

• javascript
• jquery

• 2 @AnkitGautam I thought with the newer jquery your suppose to use prop to change values? – Lostsoul Commented Jul 24, 2012 at 4:45
• Your code works just fine jsfiddle.net/zerkms/Capvk – zerkms Commented Jul 24, 2012 at 4:46
• Have you tried $('#btnFollow').prop({'value': 'Follow', 'dataaction': 'Follow'});? – Chad Commented Jul 24, 2012 at 4:46
• 3 as a side note, data attributes are hyphenated. data-action – ahren Commented Jul 24, 2012 at 4:47
• @zerkms using chrome's inspect element function, I don't see the dataaction changing on my site as well as the jsfiddle you posted. – Lostsoul Commented Jul 24, 2012 at 4:48

3 Answers 3

Your code works just fine: http://jsfiddle.net/zerkms/Capvk/

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute

http://api.jquery.com/prop/

So that's why you don't see it changed in html, but it is changed in DOM instead. If you want it to be changed in HTML as well - use .attr()

PS: as @ahren mentioned in the comments - it probably makes sense to use .data() and data-xxx properties

PPS: if you set the value using .prop() - you need to get it with .prop() respectively

If there is a need to set multiple properties with single jQuery .prop method, just try this:

instead

$("#btnFollow").prop("value", "Follow");
$("#btnFollow").prop("dataaction", "Follow");

use

$("#btnFollow").prop({"value": "Follow", "dataaction": "Follow"});

Please use .attr jQuery method.

Please use properly html5 data attribute asenter code here data-action for which you have new jQuery method to access this data attribute with $('#btnFollow').data('action') For more details visit