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 placeholderfind("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 placeholderfind("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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /><divclass="table-responsive"><tableclass="table table-bordered table-striped table-hover"><thead><tr><th>Name</th><th>Username</th><th>Action</th></tr></thead><tbody><tr><td><ahref="#"data-toggle="modal"data-target="#usrdetails"><spanclass="lsusrfname">Jayashree</span></a></td><td><spanclass="lsusrlname">Gopalan</span></td><tdalign=center><ahref="#"data-toggle="modal"data-target="#usract"><spanclass="usrin glyphicon glyphicon-ok"title="Activate"></span></a></td></tr><tr><td><ahref="#"data-toggle="modal"data-target="#usrdetails"><spanclass="lsusrfname">Siva</span></a></td><td><spanclass="lsusrlname">Prasad</span></td><tdalign=center><ahref="#"data-toggle="modal"data-target="#usrdeact"><spanclass="usrrm glyphicon glyphicon-remove"title="De-Activate"></span></a></td></tr></tbody></table></div><divclass="modal fade"id="usract"role="dialog"><divclass="modal-dialog uc-modal"><!-- Modal content--><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">&times;</button><h3class="modal-title">Activate user</h3></div><divclass="modal-body"><divclass="row"><divclass="col-md-12"><divclass="form-horizontal disableform"><divclass="form-group"><!-- add "has-error" for validation--><labelclass="control-label col-xs-6 col-md-4">First Name</label><divclass="col-xs-12 col-sm-6 col-md-8"><inputtype="text"class="form-control fname"placeholder="First Name"><!--<span class="help-block">You can't leave this empty.</span>--></div></div><divclass="form-group"><!-- add has-error for validation--><labelclass="control-label col-xs-6 col-md-4">Last Name</label><divclass="col-xs-12 col-sm-6 col-md-8"><inputtype="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 ? 
                            <buttontype="button"class="btn btn-success"id="actusr"data-dismiss="modal" >Activate</button><buttontype="button"class="btn btn-danger"data-dismiss="modal">NO</button></p></div></div></div></div></div></div><divclass="modal fade"id="usrdeact"role="dialog"><divclass="modal-dialog uc-modal"><!-- Modal content--><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">&times;</button><h3class="modal-title">De-Activate user</h3></div><divclass="modal-body"><divclass="row"><divclass="col-md-12"><divclass="form-horizontal disableform"><divclass="form-group"><!-- add "has-error" for validation--><labelclass="control-label col-xs-6 col-md-4">First Name</label><divclass="col-xs-12 col-sm-6 col-md-8"><inputtype="text"class="form-control fname"placeholder="First Name"><!--<span class="help-block">You can't leave this empty.</span>--></div></div><divclass="form-group"><!-- add has-error for validation--><labelclass="control-label col-xs-6 col-md-4">Last Name</label><divclass="col-xs-12 col-sm-6 col-md-8"><inputtype="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 ? 
                            <buttontype="button"class="btn btn-success"id="de_actusr"data-dismiss="modal">De-Activate</button><buttontype="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
})