CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
theplau
theplau

Reputation: 980

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:

Upvotes: 0

Views: 63

Answers (3)

partypete25
partypete25

Reputation: 4413

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);
});

Upvotes: 1

Netham
Netham

Reputation: 1178

var val=6;
var footerDataRow=$(".modal-footer").find('a');
footerDataRow.data('data-row',val);

This can be done in one line, I have dissected it so that you understand it.

Upvotes: 1

Fadhly Permata
Fadhly Permata

Reputation: 1686

try this:

.load(URL, function (responseText, textStatus) {
                if ( textStatus === 'success' || 
                     textStatus === 'notmodified') 
                {
                    $('div.modal-footer > a.delete_item').data('row', param);
                    modal.modal("show");
                }

Upvotes: 1

Related Questions