Clever Geek Handbook

Switch the selected row of the table.

I have a simple table with a select button for each row that, when clicked, calls a PHP script to update a session variable with the ID of the selected item. Here's the table:

<tr class="" id="PR9215">
  <td>CODE A</td>
  <td>Fresh Frust</td>
  <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="PR9594">
  <td>Oranges</td>
  <td>Fresh Oranges</td>
  <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="PR9588">
  <td>MANGO</td>
  <td>Fresh Mango</td>
  <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
Run codeHide result


and here's the script it calls:

$(document).ready(function() {
  $('button.btn-success').click(function() {
    var itemID = $(this).closest('tr').attr('id');
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('updateSelections.php', {
      itemID: itemID,
      selectionType: 'yes'
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        var ajaxError = (data.text);
        var errorAlert = 'There was an error updating your selections - ' + ajaxError + '. Please contact Support';
        $this.closest('tr').addClass("warning");
        $('#alert_ajax_error').html(errorAlert);
        $("#alert_ajax_error").show();
        return; // stop executing this function any further
      } else {
        console.log('update successful - success add class to table row');
        $this.closest('tr').addClass("success");
        $this.closest('tr').removeClass("danger");
        //$(this).closest('tr').attr('class','success');
      }
    }).fail(function(xhr) {
      var httpStatus = (xhr.status);
      var ajaxError = 'There was an error updating your selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact Support';
      console.log('ajaxError: ' + ajaxError);
      $this.closest('tr').addClass("warning");
      $('#alert_ajax_error').html(ajaxError);
      $("#alert_ajax_error").show();
    });
  });
});
Run codeHide result


This works when it comes to the initial selection - the table row is colored green to indicate that it is selected. Now I need to expand this so that when the Select button is pressed for the 2nd time, it will remove the highlight of the green table and reset it to its original state.

Now don't forget to extend your script to achieve this.

+3


source to share


2 answers


Check below logic for this:



$('button.btn-success').click(function() {
if ($this.closest('tr').hasClass("first_click")) {
  $this.closest('tr').removeClass();
//$( "tr" ).removeClass();
return false;
}else{
$this.closest('tr').addClass("first_click");
}
+1


source


You can achieve this by using a boolean to keep track of the state of the button. Then check the state of the button before taking action.

Ps. You can bind your addClass () and removeClass () methods.



var buttonSelected = false;

if(buttonSelected){
    $this.closest('tr').addClass("success").removeClass("danger");
    buttonSelected = true;
} else {
    $this.closest('tr').removeClass("success").addClass("danger");
    buttonSelected = false;
}
+1


source






More articles:


All Articles