auto search (ajax call) is not working after button click

Question

I am trying hard to fix this issue but still didn't get the solution, tried many links and code, but facing a bit problem to fix this.

ISSUE:

I have an input type 'Text' to search the employees name. When I Start entering characters like 'WY', it shows all the names starting with WY.

Once I get the employee I need, I can move that to other control and Run PDF report (which loads in another Tab). The issue is when I go back to the page where I should start searching the employees again, it won't search! as shown below:

Here is my ajax code :

 $("#EmployeeSearchBox").bind('input propertychange', function () {
    if ($('#EmployeeSearchBox').val() != '') {
        $('#EmployeeList').empty();

        $.ajax({
            type: "GET",
            url: "SomeSelectionPage.aspx/GetEmployees",
            data: { 'searchText': "'" + $("#EmployeeSearchBox").val() + "'" },
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                //alert('success');
                if (data.d.length > 0) {
                    $("#EmployeeList").removeClass("hideControl").addClass("showControl");
                }
                else {
                     $("#EmployeeList").removeClass("showControl").addClass("hideControl");
                    // $('select').multipleSelect();
                    alert("No data");
                }
                $.each(data.d, function (index, value) {
                  $('#EmployeeList').append($('<option>').text(value.FullName).val(value.EmployeeId));

                });
            },                
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
            }
        });
    }
    else {
        $('#EmployeeList').empty();
        $("#EmployeeList").addClass("hideControl");
    }
});

UI Control :

 <input type="text" id="EmployeeSearchBox" class="search-box" aria-multiselectable="true" />

Please let me know, what I should be doing to get it fixed.

Answer 1

Am upvoting the suggestion provided from "Clement Amarnath", which helped me to resolve this issue.

I found the fix for this , instead of using .Bind(), I used .on() inside (document), am posting the answer which I have fixed it. Thanks all!

$(document).on("input propertychange", "#EmployeeSearchBox", function () {  

    if ($('#EmployeeSearchBox').val() != '')        {
        $('#EmployeeList').empty();

        $.ajax({
            type: "GET",
            url: "SomeSelectionPage.aspx/GetEmployees",
            data: { 'searchText': "'" + $("#EmployeeSearchBox").val() + "'" },
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                //alert('success');
                if (data.d.length > 0) {
                    $("#EmployeeList").removeClass("hideControl").addClass("showControl");
                }
                else {
                     $("#EmployeeList").removeClass("showControl").addClass("hideControl");
                    // $('select').multipleSelect();
                    alert("No data");
                }
                $.each(data.d, function (index, value) {
                  $('#EmployeeList').append($('<option>').text(value.FullName).val(value.EmployeeId));

                });
            },
            //error: function (XMLHttpRequest, textStatus, errorThrown) {
            //    alert(textStatus);
            //}
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
            }
        });
    }
    else {
        $('#EmployeeList').empty();
        $("#EmployeeList").addClass("hideControl");
    }
});

NOTE : below line too works : .live() method

$("#EmployeeSearchBox").live('input propertychange', function () {... });

Answer 2

This might be the reason for the issue

The $("#EmployeeSearchBox").bind('input propertychange', function () { ..}); might not be available in the DOM.

To ensure whether the EmployeeSearchBox and propertyChange handler are still alive, place an alert inside the propertychange function. If the alert is shown then the issue is some where else.

---

$("#EmployeeSearchBox").bind('input propertychange', function () {
    if ($('#EmployeeSearchBox').val() != '') {

         alert("Inside Property Change "); // Add this alert
        $('#EmployeeList').empty();

        $.ajax({
            type: "GET",
            url: "SomeSelectionPage.aspx/GetEmployees",
            data: { 'searchText': "'" + $("#EmployeeSearchBox").val() + "'" },
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                //alert('success');
                if (data.d.length > 0) {
                    $("#EmployeeList").removeClass("hideControl").addClass("showControl");
                }
                else {
                     $("#EmployeeList").removeClass("showControl").addClass("hideControl");
                    // $('select').multipleSelect();
                    alert("No data");
                }
                $.each(data.d, function (index, value) {
                  $('#EmployeeList').append($('<option>').text(value.FullName).val(value.EmployeeId));

                });
            },                
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
            }
        });
    }
    else {
        $('#EmployeeList').empty();
        $("#EmployeeList").addClass("hideControl");
    }
});

---

what do you mean by bind it again

This is the function which is binding the EmployeeSearchBox with the DOM $("#EmployeeSearchBox").bind('input propertychange', function () {.... and when you are moving to the PDF tab and coming back again to SearchBox tab the binding of this element is lost, it means the DOM doesnot know what to be done when the property change is fired on the EmployeeSearchBox. Two ways to solve it

1) Ensure that the Event handler is always present in the DOM even when you navigate between tabs.

2) If option 1 is not achievable in your scenario, kindly rebind the event handlers whenever you are coming to the search tab. Explicitly invoke this $("#EmployeeSearchBox").bind when you are in the search tab.

Answer 3

Please check that the ajax call has raised for your second search.. if not there must be a problem in condition checking area or function calling method. I always use this function for searching data

$("input").change(function(){
  ajax call.....
})