automatische Suche (Ajax Anruf) funktioniert nicht nach dem Klicken auf die Schaltfläche

Question

Ich versuche hart, dieses Problem zu beheben, aber immer noch nicht die Lösung, versuchte viele Links und Code, aber mit einem kleinen Problem, um dies zu beheben.

PROBLEM:

Ich habe einen Eingabetyp ‚Text‘ die Mitarbeiter Namen zu suchen. Wenn ich anfange, Zeichen wie "WY" einzugeben, werden alle Namen angezeigt, die mit WY beginnen.

Sobald ich die Mitarbeiter ich brauche, kann ich das mit anderen Steuer- und Run PDF-Bericht bewegen (die in einem anderen Tab lädt). Das Problem ist, wenn ich zurück zu der Seite gehe, wo ich anfangen sollte, die Angestellten wieder zu suchen, wird es nicht suchen! wie unten dargestellt:

Hier ist meine 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-Steuerung:

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

Bitte lassen Sie mich wissen, was soll ich es fest bekommen tun .

Answer 1

Am upvoting den Vorschlag von „Clement Amarnath“ zur Verfügung gestellt, die mir geholfen, dieses Problem zu lösen.

ich das Update für dieses, statt mit .Bind(), gefunden habe ich .on() innen (document), bin die Antwort zu veröffentlichen, die ich es behoben haben. Danke allen!

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

HINWEIS: unter Leitung funktioniert auch: .live() Methode

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

Answer 2

Dies könnte der Grund für das Problem seiner

Die $("#EmployeeSearchBox").bind('input propertychange', function() { ..}); nicht im DOM zur Verfügung.

Um sicherzustellen, dass der EmployeeSearchBox- und der propertyChange-Handler noch aktiv sind, platzieren Sie eine Warnung in der Eigenschaft propertychange. Wenn die Warnung angezeigt wird, ist das Problem woanders.

---

$("#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"); 
    } 
}); 

---

, was Sie binden meine ich es wieder

Dies ist die Funktion, die die EmployeeSearchBox mit dem DOM verbindlich $("#EmployeeSearchBox").bind('input propertychange', function() {.... und wenn Sie auf die PDF bewegen Tab und wieder zurück zu SearchBox Registerkarte die Bindung dieses Elements ist verloren, es bedeutet, dass das DOM nicht weiß, was zu tun ist, wenn die Änderung der Eigenschaft auf der EmployeeSearchBox ausgelöst wird. Zwei Möglichkeiten, es zu lösen

1) Stellen Sie sicher, dass der Ereignishandler immer im DOM vorhanden ist, auch wenn Sie zwischen den Registerkarten navigieren.

2) Wenn die Option 1 in Ihrem Szenario nicht erreichbar ist, bitten wir Sie, die Ereignisbehandlungsroutinen erneut zu binden, wenn Sie auf die Suchregisterkarte kommen. Aktivieren Sie explizit diese $("#EmployeeSearchBox").bind, wenn Sie auf der Registerkarte Suche sind.

Answer 3

Bitte überprüfen Sie, ob der Ajax-Aufruf für Ihre zweite Suche ausgelöst wurde. Wenn nicht, muss ein Problem im Zustandsprüfbereich oder der Funktionsaufrufmethode vorliegen. Ich benutze immer diese Funktion für die Suche Daten

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