Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Clear input search box and refresh data

In this code, the #searchInpForm search box gets cleared but the data that is called by my getAllPersonnel() function doesn’t refresh. It refreshes if I don’t include the line about emptying the search box.

Also, the function gets called but the data just doesn’t. I have the same issue if I set the search input field to an empty string as well. What should I look at next to fix this?

$("#refreshBtn").click(function () {
  if ($("#personnelBtn").hasClass("active")) {
    // console.log("Button was clicked");
    $("#searchInpForm")[0].reset();
    getAllPersonnel();

    // $("#searchInp").val("");
  } else if ($("#departmentsBtn").hasClass("active")) {
    // console.log("Button was clicked");
    getAllDepartments();
  } else if ($("#locationsBtn").hasClass("active")) {
    getAllLocations();
  }
});
Tags:

2

Answers


  1. 0

    I assume your getAllPersonnel() function is using the searchInpForm value. So if you clear it first, the function won’t work/refresh. Try to clear it only after function is called, like below.

    $("#refreshBtn").click(function () {
  if ($("#personnelBtn").hasClass("active")) {
    // console.log("Button was clicked");
    getAllPersonnel();
    $("#searchInpForm")[0].reset();

    // $("#searchInp").val("");
  } else if ($("#departmentsBtn").hasClass("active")) {
    // console.log("Button was clicked");
    getAllDepartments();
  } else if ($("#locationsBtn").hasClass("active")) {
    getAllLocations();
  }
});

    Or, clear it after a few milliseconds.

    $("#refreshBtn").click(function () {
  if ($("#personnelBtn").hasClass("active")) {
    // console.log("Button was clicked");
    getAllPersonnel();
    setTimeout(function(){$("#searchInpForm")[0].reset();},300);
    
    // $("#searchInp").val("");
  } else if ($("#departmentsBtn").hasClass("active")) {
    // console.log("Button was clicked");
    getAllDepartments();
  } else if ($("#locationsBtn").hasClass("active")) {
    getAllLocations();
  }
});
    Login or Signup to reply.
  2. 0

    You are emptying the search box before you apply the search. Switch the order of the operations:

        getAllPersonnel();
    $("#searchInpForm")[0].reset();

    Also, it would make sense to get the value/text of your search and pass it to getAllPersonnel, so it will rely on the search you have given it, instead of what the UI button has. This way your UI will not mess around in your logic.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search