CODEWITHSUNDEEP
jquery
Themer
Themer

Reputation: 185

Chaning attr() Value with jQuery returns same

I have the following HTML :

 <div data-name="name='john'">
   <span class="button">click</span>
 </div>

And the following jQuery code :

 $(".button").click(function() {
    con_sc = $(this).parent().data('name');
    alert(con_sc);
    if( con_sc.indexOf( "name='john'" ) !== -1 ) {          
        var con_new_value = con_sc.replace("name='john'","name=''");
        $(this).parent().attr("data-name", con_new_value);
    }
    if( con_sc.indexOf( "name=''" ) !== -1 ) {          
        var con_new_value = con_sc.replace("name=''","name='john'");
        $(this).parent().attr("data-name", con_new_value);
    }  
 });

The above jQuery code changes the value of data attribute from name='john' to name='' upon clicking the button, however when I click the same button again it shows the old value name='john' which is already changed to name='', it should display name='' in alert. I am not sure what I am doing wrong, in the Firebug it clearly shows it has changed the data-attribute value to name=''. Please advise. thanks

jsFiddle.

Upvotes: 1

Views: 32

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Updated fiddle.

Use jQuery method data() instead when you want to edit data-* attributes :

$(this).parent().data("name", con_new_value);

Hope this helps.

$(".button").click(function() {
  con_sc = $(this).parent().data('name');

  console.log('Current data-name is ----> '+con_sc);

  if( con_sc.indexOf( "name='john'" ) !== -1 ) {		
    var con_new_value = con_sc.replace("name='john'","name=''");	
    $(this).parent().data("name", con_new_value);

    console.log('New data-name is ----> '+$(this).parent().data("name"));
  }

  if( con_sc.indexOf( "name=''" ) !== -1 ) {
    var con_new_value = con_sc.replace("name=''","name='john'");
    $(this).parent().data("name", con_new_value);

    console.log('New data-name is ----> '+$(this).parent().data("name"));
  }  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-name="name='john'">
  <span class="button">click</span>
</div>

Change attribute in the firebug using .attr() :

$(".button").click(function() {
  con_sc = $(this).parent().attr('data-name');

  console.log('Current data-name is ----> '+con_sc);

  if( con_sc.indexOf( "name='john'" ) !== -1 ) {		
    var con_new_value = con_sc.replace("name='john'","name=''");	
    $(this).parent().attr("data-name", con_new_value);

    console.log('New data-name is ----> '+$(this).parent().data("name"));
  }

  if( con_sc.indexOf( "name=''" ) !== -1 ) {
    var con_new_value = con_sc.replace("name=''","name='john'");
    $(this).parent().attr("data-name", con_new_value);

    console.log('New data-name is ----> '+$(this).parent().data("name"));
  }  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-name="name='john'">
  <span class="button">click</span>
</div>

Upvotes: 2

Mike Bovenlander
Mike Bovenlander

Reputation: 5416

Why not set the data like this: $(this).parent().data('name', '')?

Upvotes: 0

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10282

Use .data instead of .attr to update data- attributes

updated fiddle

Upvotes: 0

Related Questions