Jquery Onclick The Button In Modal Popup Window Change Value Of The Current Td

Using bootstrap and jquery, I have created the table linked with the modal popup window. In the table I have two action icons Activate De-Activate Currently, on click to the Ac

Solution 1:

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

Solution 2:

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" />

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

Solution 3:

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

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