BootStrap Modal data attributes not refreshing

Question

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/

score 5 · Accepted Answer · answered Jan 05 '17 at 12:53

5

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 :)

answered Jan 05 '17 at 12:53

Help

650
3
8

Glad to help :) Please don't forget to accept the answer as this mite help others too :) – Help Jan 05 '17 at 12:57
I think you can do it by data attribute by doing some changes in add method – black_pottery_beauty Jan 05 '17 at 13:32

score 1 · Answer 2 · edited May 23 '17 at 12:24

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?

BootStrap Modal data attributes not refreshing

2 Answers2