0

I am using an ajax call and getting a response as an HTML.

I want to retrieve only the body part from the response HTML and append it to the body section.

I trying the below ajax call: 

$("#formID").on("submit", function (event) {

event.preventDefault();
var url = $(this).attr("action");
var formData = $(this).serialize();

    $.ajax({
        url: url,
        type: 'POST',
        data: formData,
        async: true
    }).done(function(response, status){
        $('body').html(jQuery(response).find('body').html()); 
    }).fail(function(jqXHR, stat, error) {
        console.log(stat + ": " + error);
    });  
});

HTML where I want to append the retrieved HTML.

<body>
    <div id="wrapper">
    //Content
    </div>
</body>

My main motive is to exclude the script part from the received HTML as the scripts are loading again and freezing the custom css spinner/loader.

The freezing of the custom css spinner/loader is happening only when I am connecting it to the server in Safari, in chrome(local & server) it is working fine.

Please help me to resolve this.

Thanks in advance.

Atif
  • 29
  • 5

3 Answers3

2

If you're getting entire content from your JSON then just fill your body with it

//YourContent is a variable that has your content

$('#wrapper').html(YourContent);

if not just append it in html

$(YourContent).AppendTo('#wrapper');
M.Nabeel
  • 1,066
  • 7
  • 19
  • I am getting the entire content as an HTML and from there I need to find the body part and append it to wrapper – Atif Mar 29 '18 at 13:43
  • $('#wrapper').html(YourContent); use this then – M.Nabeel Mar 29 '18 at 13:47
  • Let me know if you're still having issue – M.Nabeel Mar 29 '18 at 13:48
  • Thanks for the help..."YourContent" should be the filter data from the response HTML and that is what I need to filter the body part from the HTML response..but here we are not filtering the body part from the HTML response. – Atif Mar 29 '18 at 13:49
  • This is what I had tried $('body').html(response); but here I am appending the entire response to the body and the response contains the script tag as well which loads again and freezes the loader...so to avoid the reloading of the script tag, I need only the body part. – Atif Mar 29 '18 at 13:53
0

First of all, I think this is a poor back-end implementation, not a front-end issue. Anyways, before using your response, take a look at the jQuery.parseHTML() function here: https://api.jquery.com/jquery.parsehtml/ By default it will omit the scripts in your HTML response, unless you specify otherwise.

One other thing: maybe you don't want the whole body replaced, only the content of the wrapper div. Then use:

$('#wrapper').html(<content goes here>);

EDIT: (here goes the code):

$.ajax({
    url: url,
    type: 'POST',
    data: formData,
    async: true
}).done(function(response, status){
    var html = $.parseHTML(response);
    $('body').html($(html).find('body').text());
}).fail(function(jqXHR, stat, error) {
    console.log(stat + ": " + error);
});

EDIT 2 (should work based on the answer link in the comments I gave you):

$.ajax({
    url: url,
    type: 'POST',
    data: formData,
    async: true
}).done(function(response, status){
    var body = '<div id="body-mock">' + response.replace(/^[\s\S]*<body.*?>|<\/body>[\s\S]*$/ig, '') + '</div>';
    $('body').html($(body).html());
}).fail(function(jqXHR, stat, error) {
    console.log(stat + ": " + error);
});
logout
  • 621
  • 5
  • 13
  • Thanks for the help...but should be the filter content from the response HTML – Atif Mar 29 '18 at 13:47
  • This is what I had tried $('body').html(response); but here I am appending the entire response to the body and the response contains the script tag as well which loads again and freezes the loader...so to avoid the reloading of the script tag, I need only the body part.. – Atif Mar 29 '18 at 13:52
  • Yes, that is right. When you use the function, you can then use find() and whatever you want. The result from find() will be the node you want to add. Then use .text() or .html() to extract the content and pass it. – logout Mar 29 '18 at 13:53
  • This is what I have tried with filter() also, but it did not work done(function(response, status){ var data = response var globalData = $(data).find("#wrapper").text(); $('body').html($(globalData));} – Atif Mar 29 '18 at 13:56
  • I have tried you edited code and it is giving the error: TypeError: Array.prototype.find callback must be a function – Atif Mar 29 '18 at 14:06
  • @Atif Sorry, my bad, look at the code and try it now – logout Mar 29 '18 at 14:14
  • Thanks for your continuos reply. The second edited work does not give any error but does not display the data. I can print the parse html value but it is not appending to the body and once the process is over, nothing comes on the screen .var html = $.parseHTML(response); console.log("htmdData",html); $('body').html($(html).filter('body').text()); – Atif Mar 29 '18 at 14:31
  • OK, that will not work apparently, I tried it myself and the problem is in jQuery. Look at this answer, it should fix your problem: https://stackoverflow.com/questions/4429851/parse-complete-html-page-with-jquery/12848798#12848798 – logout Mar 29 '18 at 14:45
  • Replaced $('body').html($(html).filter('body').text()); with $('body').html($(html).filter('wrapper').text()); and it shows the data but as we are avoiding the script tag so it is displayed as a simple html text. – Atif Mar 29 '18 at 14:59
  • @Atif The latest edit (EDIT 2) has to work - I tried it and it seems to do the job. – logout Mar 29 '18 at 15:16
-1

Create a new window append your html completely

var MainWindow = window.open('', '', 'height=1,width=1');
MainWindow.document.write(append your response here);

then create a global variable temptext and append it to you original body and close the window

var temptext= $(MainWindow).find("body");
$("#wrapper").html(temptext);
 MainWindow.document.close();
Sandeep Vootoori
  • 56
  • 4