user1996496 user1996496 - 1 month ago 15
Javascript Question

How do I update the -data-row attribute inside a modal launched with jQuery?

I have a modal that is launched like this:

<a href="javascript:;" class="edit_item" data-row="6">
<i class="icon-open"></i>
</a>


Which then in return fires

$( document ).on( "click", ".edit_item", function() {

var row=$(this).data("row");
var params="myfile.php&link="+row;
open_box_edit(params);
});


The
open_box_edit
is just:

function open_box_edit(params)
{

var URL=ajax_url+"/?"+params;
var modal = $('#modal_edit');
modal
.find('.modal-body')
.load(URL, function (responseText, textStatus) {
if ( textStatus === 'success' ||
textStatus === 'notmodified')
{
modal.modal("show");
}
});
}


Everything works correctly inside
modal-body
, but now I have added a
modal-footer
div to that modal and inside that div is a link to delete an item, which has the same
data-row
attribute as the opened modal. Basically:

<div id="modal_edit" class="modal fade"
tabindex="-1" role="dialog" aria-labelledby="plan-info-edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!-- CONTENT HERE -->
</div>
<div class="modal-footer">

<!-- DELETE BUTTON -->
<a href="javascript:;" class="delete_item" data-row="">
<i class="icon-delete"></i>
</a>
<!-- DELETE BUTTON -->

</div>
</div>
</div>
</div>


How do I do it so that the
<a href="javascript:;" class="delete_item" data-row="">
essentially becomes
<a href="javascript:;" class="delete_item" data-row="6">
? Basically all I need to do is update the data-row of delete_item class inside the modal.

Any hints are greatly appreciated!

UPDATE 1:


  • I am thinking possibly giving
    open_box_edit
    another parameter (the row) and then in the function run something like
    $('.delete_item').data('row', row);
    . But how do I target that specific div and modal-footer?


Answer

Update the data attribute when edit item is clicked.

$( document ).on( "click", ".edit_item", function() {
    var row=$(this).data("row");
    $('.delete_item').data("row",row); // add this line
    var params="myfile.php&link="+row;
    open_box_edit(params);
});
Comments