CODEWITHSUNDEEP
javascriptjqueryhtml
Luke Prior
Luke Prior

Reputation: 967

Jquery functions overriding each other

Question:

I have 2 jQuery function one is a search function and the other is a function to only show column values of a certain type. The problem is if I select a column value with the second function and hide the other rows then try to search those rows it resets and searches all rows.

Fiddle

Code:

Here are the 2 functions:

Search:

$(document).ready(function(){
  $("#mySearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr td:nth-child(1)").filter(function() {
      $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Column:

$(function() {
   $('select[name="CPUmenu"]').change(function(e) {
      let socket = $(this).val();
      $('tbody tr[data-socket]').show();
      if (socket.length) {
        $('tbody tr[data-socket!="' + socket + '"]').hide();
      }
   });
   $('select[name="CPUmenu"]').trigger('change');
});

Expected result:

I was thinking that the function could only apply to rows that aren't hidden but I'm not sure what the code for that would be.

Update:

I saw the :hidden selector and thought i could use .not(:hidden)

I also plan to add more functions in future so need it to be able to scale.

If you need any more information please let me know.

Thanks

Upvotes: 2

Views: 113

Answers (4)

Eliyah Sundström
Eliyah Sundström

Reputation: 149

Here is the working code:

  $(function() {
    $('select[name="CPUmenu"]').change(function(e) {
      let socket = $(this).val();
      $('tbody tr[data-socket]').show();
      if (socket.length) {
            $('tbody tr[data-socket!="' + socket + '"]').hide();
          }
        });
        $('select[name="CPUmenu"]').trigger('change');
      });
      $(document).ready(function(){
      $("#mySearch").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $('select[name="CPUmenu"]').trigger('change');
      $("#myTable tr td:nth-child(1)").filter(function() {
      if ($(this).parent().is(":visible")) {
        $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
      }
    });
  });
});

Upvotes: -1

dev8080
dev8080

Reputation: 4020

Here's the working fiddle.

You could add, remove a class when you filter the rows by column and then search based on class usage.

Search Function:

     ...
     if($(this).parent().hasClass("filtered")){
           $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1);
     }

Column Function:

    ...
    if (socket.length) {
     $('tbody tr[data-socket!="' + socket + '"]').hide();
     $('tbody tr[data-socket!="' + socket + '"]').removeClass("filtered");
     $('tbody tr[data-socket="' + socket + '"]').addClass("filtered");
    }

Upvotes: 2

Codii
Codii

Reputation: 873

Quick fix, but sorry won't scale well :

$(function() {
 $('select[name="CPUmenu"]').change(function(e) {
    let socket = $(this).val();
    $('tbody tr[data-socket]').removeClass('discarded').show(); /// <<<- here the trick
    if (socket.length) {
      $('tbody tr[data-socket!="' + socket + '"]').addClass('discarded').hide(); /// <<<-- here as well
    }
 });
 $('select[name="CPUmenu"]').trigger('change');
});

$("#mySearch").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#myTable tr:not(.discarded) td:nth-child(1)").filter(function() {
    $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

Upvotes: 1

Eliyah Sundstr&#246;m
Eliyah Sundstr&#246;m

Reputation: 149

I dont really know what this would do but i think your search function should be like this:

$(document).ready(function(){
  $("#mySearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr td:nth-child(1)").filter(function() {
      if ($(this).parent.css("display") == "block") {
        $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)        
      }
    });
  });
});

Upvotes: 2

Related Questions