CODEWITHSUNDEEP
jqueryhtml
Mick
Mick

Reputation: 2898

Dynamically changing the Data attribute value

I want to change the data-tabtoggle attribute inside a div using my jq script. my code should change the value and then dynamically change the html. But nothing is happening : HTML 

  <div id="Tab9" class="AllTabs JQApproval" data-tabtoggle="9" data-PlaceholderName = "Location"
         style="font-size:12px; " >Sales Approval
     <div id="Location"></div>
  </div>

my script 

$('.JQApproval').click(
function() {

var ApprovalValue = $(this).attr('data-tabtoggle');

var PlaceHolder = $(this).attr('data-PlaceholderName') ; 
var NewApprovalValue 

if ( ApprovalValue === '9' ) { NewApprovalValue = '2' ; } ;
if ( ApprovalValue === '2' ) { NewApprovalValue = '1' } ;   
if ( ApprovalValue === '1' ) { NewApprovalValue = '9' } ;  

// Make new data attribute 
$('#Tab9').data('tabtoggle',20);

// test outcome 
$("#" + PlaceHolder ).html( NewApprovalValue ); 


});`

I need the HTML to reflect the changes but it does'nt

Any help would be appreciated !

Fiddle

Upvotes: 0

Views: 268

Answers (2)

cssyphus
cssyphus

Reputation: 40030

It is actually changing the number, but it's a text value so you must use quotes. 

$('#Tab9').data('tabtoggle','20');
alert( $('#Tab9').data('tabtoggle') );

See revised Fiddle:

https://jsfiddle.net/LdaLu4mb/8/

Upvotes: 0

Dhara Parmar
Dhara Parmar

Reputation: 8101

Try .attr() to set data-tabtoggle attribute:

Demo: https://jsfiddle.net/fvmw6Lsc/

$('#Tab9').attr('data-tabtoggle',20);

Upvotes: 1

Related Questions