Aktualisieren von HTML nach Ajax oder jQuery Anruf

Question

Ich habe zwei Anrufe erstellt, einer ist Ajax Anruf an meinen Controller, und andere ist Jquery Anruf. Ich habe beide nur getan, um zu überprüfen, ob mein HTML aktualisiert wird, sobald ich das Ereignis auslöst ... Aber keine dieser Methoden aktualisiert mein HTML (es bleibt auf die gleiche Weise). Hier sind die Methoden:

Methode # 1:

$("#btnSearch").click(function(){ 
     var startDate = $.trim($("#startDate").val()); 
     var endDate = $.trim($("#endDate").val()); 
     $.post("/history/list",{'startDate':startDate,"endDate":endDate},function(data){ 
      var result = $('<div />').append(data).find('#historyList').html(); 
      $('#historyList').append(result); 
      console.log(result); 
// the result is displayed correctly in the console... 
     }); 
    }); 
// This is supposed to update my HTML in the browser now, but it's not showing anything new... 

Methode # 2:

$('#btnSearch').click(function() { 
    console.clear(); 
    $.ajax({ 
     url: "/history/list", 
     data: { 
      startDate: $('#startDate').val(), 
      endDate: $('#endDate').val(), 
     }, 
     type: "GET", 
     dataType: "html", 
     success: function (data) { 
      var result = $('<div />').append(data).find('#historyList').html(); 
      $('#historyList').append(result); 
      console.log(result); 
// the result is displayed correctly in the console... 
     }, 
     error: function (xhr, status) { 
      alert("Sorry, there was a problem!"); 
     }, 
     complete: function (xhr, status) { 
      //$('#showresults').slideDown('slow') 
     } 
    }); 
}); 

Keine dieser Methoden meines HTML aktualisieren, sobald der Anruf beendet ist und Daten zurückgegeben werden ... Das Datenobjekt enthält den HTML-Code als Ergebnis, und ich möchte, dass HTML im Datenobjekt alles ersetzt, was im div-Tag unter der ID #historyList steht. Was mache ich hier falsch?

P.S. Ich verwende Chrome Browser (wenn dies eine nützliche Information ist)

Answer 1

Ich bekomme das Ergebnis nicht. Könnten Sie .html, wie folgt verwenden:

Oder der ganze Code wie folgt.

$('#btnSearch').click(function() { 
      console.clear(); 
      $.ajax({ 
       url: "/history/list", 
       data: { 
        startDate: $('#startDate').val(), 
        endDate: $('#endDate').val(), 
       }, 
       type: "GET", 
       dataType: "html", 
       success: function (data) { 
        $('#historyList').html(data); 
        console.log(result); 
// the result is displayed correctly in the console... 
       }, 
       error: function (xhr, status) { 
        alert("Sorry, there was a problem!"); 
       }, 
       complete: function (xhr, status) { 
        //$('#showresults').slideDown('slow') 
       } 
      }); 
     }); 

Answer 2

Stellen Sie sicher, $('#historyList') nicht ein leeres Array ist und existiert in dem DOM. Wenn es existiert,

$('#historyList').html(data); 

sollte das Problem lösen.

Korrigieren Sie mich, wenn mein Verständnis der Frage falsch ist.