CODEWITHSUNDEEP
jquerytwitter-bootstrap
Pawan
Pawan

Reputation: 32321

BootStrap Modal data attributes not refreshing

On Click of the Edit Button , i am showing a Modal with the name present under corresponding data attribute data-catname

I am changing the name inside the Modal and updating the text and also the corresponding data attribute data-catname

But When i reopen the Modal , its showing me the prevoius name

This is my code

function addCatSbmt()
{
        var category_name_modal = $("#catnameedit").val();
        var category_id_modal = $("#catidhiddenedit").val();
        var trid = category_id_modal;
        var texttoreplace = category_name_modal;
        $("#span" + trid).text(texttoreplace);
        $('#' + trid).find(".editcatclick").attr('data-catname', texttoreplace);
          $('.closetagdialog').trigger('click');
}

How to Reproduce :

1.Click on Edit button (TCS) , it will open a POP UP , with the name TCS , change the name to something else .

2.Click again the same Edit button , it is showing TCS only

https://jsfiddle.net/BVV5T/313/

Upvotes: 1

Views: 1240

Answers (2)

black_pottery_beauty
black_pottery_beauty

Reputation: 879

You can access using data but you need to update your data attribute in similar manner 

data('catname',texttoreplace)

But to update you need to provide id to you a tag which contain your data attribute

like

<a data-toggle="modal" data-target="#editCategoryname" data-categorid="1" id="cat_1" data-catname="TCS" class="btn btn-sm btn-primary editcatclick"><i class="icon-pencil"></i></a>

So this is the fiddle which one following you approach

fiddlle

Please check this url to study about data attribute

jQuery Data vs Attr?

Upvotes: 1

Help
Help

Reputation: 650

I the issue is with .data() function which been used in modal show function.

Replace .data with .attr and you will achieve your desired result.

$('#editCategoryname').on('show.bs.modal', function(e)
{
        var cat_name = $(e.relatedTarget).attr('data-catname');
        var cat_id = $(e.relatedTarget).attr('data-categorid');
        $(e.currentTarget).find('input[name="catnameedit"]').val(cat_name);
        $(e.currentTarget).find('input[name="catidhiddenedit"]').val(cat_id);
});

Updated Fiddle

-Help :)

Upvotes: 5

Related Questions