jquery onclick the button in modal popup window change value of the current td

Question

Using bootstrap and jquery, I have created the table linked with the modal popup window. In the table I have two action icons

1. Activate
2. De-Activate

Currently, on click to the Activate icon in the table the popup window is appearing with the value of current row along with the Activate button, my need is OnClick to this Activate button in the popup window the activate icon in the current td need to be changed as de-activate icon. Like the same need to do for De-activate icon. please help me to find out this.

below is the code.

<div class="table-responsive">
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Username</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Jayashree</span></a></td>
                <td><span class="lsusrlname">Gopalan</span></td>
                <td align=center>
                    <a href="#" data-toggle="modal" data-target="#usract"><span class="usrin glyphicon glyphicon-ok" title="Activate"> </span></a>
                </td>

            </tr>
            <tr>
                <td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Siva</span></a></td>
                <td><span class="lsusrlname">Prasad</span></td>
                <td align=center>
                    <a href="#" data-toggle="modal" data-target="#usrdeact"><span class="usrrm glyphicon glyphicon-remove" title="De-Activate"> </span></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Model window:

<div class="modal fade" id="usract" role="dialog">
    <div class="modal-dialog uc-modal">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Activate user</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-horizontal disableform">
                            <div class="form-group">
                                <!-- add "has-error" for validation-->
                                <label class="control-label col-xs-6 col-md-4">First Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control fname" placeholder="First Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                            <div class="form-group">
                                <!-- add has-error for validation-->
                                <label class="control-label col-xs-6 col-md-4">Last Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control lname" placeholder="Last Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                        </div>

                        <p>Are you sure want to Activate this User ? 
                            <button type="button" class="btn btn-success" id="actusr" data-dismiss="modal" >Activate</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="usrdeact" role="dialog">
    <div class="modal-dialog uc-modal">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">De-Activate user</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-horizontal disableform">
                            <div class="form-group">
                                <!-- add "has-error" for validation-->
                                <label class="control-label col-xs-6 col-md-4">First Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control fname" placeholder="First Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                            <div class="form-group">
                                <!-- add has-error for validation-->
                                <label class="control-label col-xs-6 col-md-4">Last Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control lname" placeholder="Last Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                        </div>

                        <p>Are you sure want to De-Activate this User ? 
                            <button type="button" class="btn btn-success" id="de_actusr">De-Activate</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Jquery :

$(".usrrm, .usrin").click(function(){
    var tdusrname=$(this).parents("tr").children("td:first").text();
    $(".fname").val(tdusrname);

    var tdlname=$(this).parents("tr").children("td:nth-child(2)").text();
    $(".lname").val(tdlname);
});

$("#actusr").click(function(){ 
    $('tr td span').removeClass('usrm glyphicon glyphicon-ok');
    $('tr td span').addClass('usrin glyphicon glyphicon-remove');
});

$("#de_actusr").click(function(){ 
    $('tr td span').removeClass('usrm glyphicon glyphicon-remove');
    $('tr td span').addClass('usrin glyphicon glyphicon-ok');
});

please help me to find out this

Answer 1

I've commented it pretty extensively, but it seems to do what you want. First, when the glyph is clicked, we need to 'bookmark' the element that triggered the modal, whether activating or deactivating. Then, if the modal is dismissed, we need to remove that bookmark. If the user has clicked the activate/deactivate buttons, we need to do a number of things (including, probably, your back-end processing): we need to remove that bookmark, update the glyph classes, redirect the target modal, and change the tooltip text. See it working below, or as a fiddle.

Again, my code should be pretty clearly documented. Best of luck!

$(".usrrm, .usrin").click(function() {
  // Mark the element that triggered the modals. we'll need this later.
  $(this).parent().addClass("currently-active-el");
  
  // Populate the modal fields.
  var tdusrname = $(this).parents("tr").children("td:first").text();
  $(".fname").val(tdusrname);

  var tdlname = $(this).parents("tr").children("td:nth-child(2)").text();
  $(".lname").val(tdlname);
});

/*****
 * #actusr.click() - we are activating this user. At this point,
 *    we need to go back to that element that triggered the modal,
 *    and remove its flagging class. We have a few other things we
 *    need to do: first, redirect the modal target from the active
 *    modal to the deactive modal, and change the icons for the span.
 *
 *****/
$("#actusr").click(function() {
  $(".currently-active-el")
    .attr("data-target", "#usrdeact")           // redirect the target modal,
    .removeClass("currently-active-el").        // remove the placeholder
  find("span")
    .removeClass('usrin glyphicon-ok') // toggle the glyph class
    .addClass('usrrm glyphicon-remove')
    .prop("title", "Deactivate")                // change the tooltip text

});

/*****
 * #de_actusr.click() - we are deactivating this user. At this point,
 *    we need to go back to that element that triggered the modal,
 *    and remove its flagging class. We have a few other things we
 *    need to do: first, redirect the modal target from the active
 *    modal to the active modal, and change the icons for the span.
 *
 *****/
$("#de_actusr").click(function(evt) {
  $(".currently-active-el")
    .attr("data-target", "#usract")             // redirect the target modal,
    .removeClass("currently-active-el").        // remove the placeholder
  find("span")
    .removeClass('usrrm glyphicon-remove')
    .addClass('usrin glyphicon-ok')   // toggle the glyph class
    .prop("title", "Activate")                  // change the tooltip text
});

/*****
 * Any modal button that dismisses the modal also needs to remove
 *    the placeholder class. Otherwise, things will get messy fast.
 *****/
$("[data-dismiss='modal']").on("click", function(){
  $(".currently-active-el")
    .removeClass("currently-active-el");
})

.usrin{color: #ccc;}
.usrrm{color: #d9534f;}
.usrin:hover, .usrin:focus, .usrin:active, .usrin:visited{color: #66b90e;}
.usrrm:hover, .usrrm:focus, .usrrm:active, .usrrm:visited{color: #c9302c;}
.table > thead{
    background-color:#337ab7;
    color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="table-responsive">
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Username</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Jayashree</span></a></td>
                <td><span class="lsusrlname">Gopalan</span></td>
                <td align=center>
                    <a href="#" data-toggle="modal" data-target="#usract"><span class="usrin glyphicon glyphicon-ok" title="Activate"> </span></a>
                </td>

            </tr>
            <tr>
                <td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Siva</span></a></td>
                <td><span class="lsusrlname">Prasad</span></td>
                <td align=center>
                    <a href="#" data-toggle="modal" data-target="#usrdeact"><span class="usrrm glyphicon glyphicon-remove" title="De-Activate"> </span></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div class="modal fade" id="usract" role="dialog">
    <div class="modal-dialog uc-modal">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Activate user</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-horizontal disableform">
                            <div class="form-group">
                                <!-- add "has-error" for validation-->
                                <label class="control-label col-xs-6 col-md-4">First Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control fname" placeholder="First Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                            <div class="form-group">
                                <!-- add has-error for validation-->
                                <label class="control-label col-xs-6 col-md-4">Last Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control lname" placeholder="Last Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                        </div>

                        <p>Are you sure want to Activate this User ? 
                            <button type="button" class="btn btn-success" id="actusr" data-dismiss="modal" >Activate</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="usrdeact" role="dialog">
    <div class="modal-dialog uc-modal">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">De-Activate user</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-horizontal disableform">
                            <div class="form-group">
                                <!-- add "has-error" for validation-->
                                <label class="control-label col-xs-6 col-md-4">First Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control fname" placeholder="First Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                            <div class="form-group">
                                <!-- add has-error for validation-->
                                <label class="control-label col-xs-6 col-md-4">Last Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control lname" placeholder="Last Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                        </div>

                        <p>Are you sure want to De-Activate this User ? 
                            <button type="button" class="btn btn-success" id="de_actusr" data-dismiss="modal">De-Activate</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

If it's just front end stuff that you need to change and you're not too concerned about the back end then you could add and remove classes as required using jQuery. Using your fiddle:

/* Click the tick button and add a class of current */
$('.usrin').each(function(){
    $(this).on('click' , function(){
        $(this).addClass('current');
  });
});
/* Click the x button and add a class of current */
$('.usrrm').each(function(){
    $(this).on('click' , function(){
        $(this).addClass('current');
  });
});
/* Click the activate button and change the classes of the tick or x */
$('#actusr').on('click' , function(){
    var current = $('.table-responsive').find('.current');
  current.toggleClass('usrin glyphicon-ok usrrm glyphicon-remove');
});
/* Click the de-activate button and change the classes of the tick or x */
$('#de_actusr').on('click' , function(){
    var current = $('.table-responsive').find('.current');
  current.toggleClass('usrin glyphicon-ok usrrm glyphicon-remove');
})
/* Click the window close button and remove the current class */
$('.close').on('click' , function(){
    var current = $('.table-responsive').find('.current');
  current.removeClass('current');
});

Answer 3

You need to concentrate on the event when modal is opened. See here

$('#myModal').on('shown.bs.modal', function () {
  //do the necessary things
})