I am trying to update a div with the content from an ajax html response. I beleive I have the syntax correct, however the div content gets replaced with the entire HTML page response, instead of just the div selected in the html response. What am I doing wrong?
<script>
$('#submitform').click(function() {
$.ajax({
url: "getinfo.asp",
data: {
txtsearch: $('#appendedInputButton').val()
},
type: "GET",
dataType : "html",
success: function( data ) {
$('#showresults').replaceWith($('#showresults').html(data));
},
error: function( xhr, status ) {
alert( "Sorry, there was a problem!" );
},
complete: function( xhr, status ) {
//$('#showresults').slideDown('slow')
}
});
});
</script>
if you get an array from the ajax request that has multiple rows - you can loop through each row and append the new html to the current div with the . append() jquery function. Show activity on this post. This got to happen inside ajax success callback.
One way to trigger an event is to use the jquery trigger function. Show activity on this post. function changeDate(){ $. ajax({ url, data: data, type: "POST", dataType: "json", success: function(cbdata) { update_table(cbdata); } }); } $('#selector').
You are setting the html of #showresults
of whatever data
is, and then replacing it with itself, which doesn't make much sense ?
I'm guessing you where really trying to find #showresults
in the returned data, and then update the #showresults
element in the DOM with the html from the one from the ajax call :
$('#submitform').click(function () {
$.ajax({
url: "getinfo.asp",
data: {
txtsearch: $('#appendedInputButton').val()
},
type: "GET",
dataType: "html",
success: function (data) {
var result = $('<div />').append(data).find('#showresults').html();
$('#showresults').html(result);
},
error: function (xhr, status) {
alert("Sorry, there was a problem!");
},
complete: function (xhr, status) {
//$('#showresults').slideDown('slow')
}
});
});
Almost 5 years later, I think my answer can reduce a little bit the hard work of many people.
Update an element in the DOM with the HTML from the one from the ajax call can be achieved that way
$('#submitform').click(function() {
$.ajax({
url: "getinfo.asp",
data: {
txtsearch: $('#appendedInputButton').val()
},
type: "GET",
dataType : "html",
success: function (data){
$('#showresults').html($('#showresults',data).html());
// similar to $(data).find('#showresults')
},
});
or with replaceWith()
// codes
success: function (data){
$('#showresults').replaceWith($('#showresults',data));
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With