When handling a successful Ajax call, the callback function will receive the data that was returned. The format of the data can vary based on the specified dataType.
In this scenario, the response is plain text (hopefully well-formatted HTML). In such cases, you can simply encapsulate the response within a jQuery constructor function and manipulate it accordingly.
$.ajax({
url: "test.html",
error: function(){
//do something
}
success: function(data){
// data contains the HTML file that was received
$(data).find('.someclass').css('color', 'BADA55').appendTo('.somewhere');
}
});
It is important to note that the target for appending, .somewhere
, should ideally be an <iframe>
element. This is because having multiple instances of <HTML>
, <BODY>
, or <HEAD>
nodes in your markup can lead to invalid HTML structure and potential issues.