Replacing HTML with content from AJAX return data

Question

I have a script being called in the end of the body of an HTML file. This script sends data collected from multiple input sources in the HTML file to a PHP file that checks if everything is allright and if so, calculates some numbers and output the same HTML file, updating the old numbers with these new calculated numbers.

My question is, can I get this HTML output and replace my old page with the new one, without the need to refresh the page and keeping the script still working?

Part of the Script:

var datas = {action: 'update', subject: sendSub, criteria: changed[5], creditos: changed[4], g1: changed[0], g2: changed[1], g3: changed[2], g4: changed[3]};
    $.post('/edit.php', datas).done(function (data) {
        //What to do here?
        console.log(data); 
    });

Yes I am, but the data I get is some big text written in HTML, what I want to do is update my current page with this HTML received — J. Turolla, May 19 '16 at 22:49
Why not just return the data you need from PHP then, instead of the entire HTML. — adeneo, May 19 '16 at 22:55
Because I need the page to change, because I created some HTML elements that I dont want in the page anymore and that PHP file needs to generate the page first time user gets in it as well — J. Turolla, May 19 '16 at 23:04

score 1 · Accepted Answer · edited May 23 '17 at 12:30

1

$.post('/edit.php', datas).done(function (data) {
    $('#idOfSomeDiv').html(data);
});

Whatever the PHP file echos will overwrite the contents of the div with id idOfSomeDiv.

So, if the first element in your body is <div id="wrap">, then do:

$.post('/edit.php', datas).done(function (data) {
    $('#wrap').html(data);
});

and whatever HTML code you echo out from the PHP side will appear on the page. Note that injected elements will no longer work with this type of jQuery:

$('#myAnchortag').click(function(){
    //code in here
});

But it will always work if you use

$(document).on('click', '#myAnchortag', function(){
    //code in here
});

The examples linked in this question may be helpful to review.

edited May 23 '17 at 12:30

Community

1
1

answered May 19 '16 at 22:58

cssyphus

37,875
18
96
111

Let me see if I get it. Your solution is to overwrite the HTML just like I want. But doing so, the script wouldnt recognize code like this anymore: `$(document).ready(function () { $('.clicker').click(function() {...});` So I would need to do something like this to work: `$(document).ready(function () { $(document).on('click' , '.clicker', function() {...});` ? And I dont want to replace only the body, but the entire HTML, could I do something like: `$(document).html(data)` or `$('html').html(data)` ? – J. Turolla May 19 '16 at 23:09
No, you can't really replace the entire document - just within the body. That is, IF you don't want the page to refresh. But that's a ton of content replaced -- you should be able to work around that, yes? Please review the simple examples in the link. – cssyphus May 19 '16 at 23:12
The reason you must use `.on()` in your js is because when the page is rendered the js is bound to those elements. After injecting new elements, the js is no longer bound to those NEW elements. But by using `.on()` you tell js to bind to the elements even if they appear later. – cssyphus May 19 '16 at 23:13

Michael Gaskill · Answer 2 · 2016-05-19T23:45:43.033

In your example, you're simply missing a key bit of information: which element you want updated. It can be the HTML body, or something like a div or section.

Let's assume that you replace the entire body with the results of the Ajax call. In your Ajax success callback, you simply place the return value from the Ajax call into the body:

var datas = {action: 'update', subject: sendSub, criteria: changed[5], creditos: changed[4], g1: changed[0], g2: changed[1], g3: changed[2], g4: changed[3]};
    $.post('/edit.php', datas).done(function (data) {
        $("body").html(data);  // Replace the body's HTML with the contents of data
        console.log(data); 
    });

Make sure that any Javascript code that you're executing or depending on does not exist in the body. Load Javascript in the head in this case, or it will disappear when the body is replaced.

If instead you wanted to update a div (or section), and it's used to contain the results of the Ajax call:

<div id="results"></div>

In this case, your Ajax success callback will replace the div content with the return value from the Ajax:

var datas = {action: 'update', subject: sendSub, criteria: changed[5], creditos: changed[4], g1: changed[0], g2: changed[1], g3: changed[2], g4: changed[3]};
    $.post('/edit.php', datas).done(function (data) {
        $("#results").html(data);  // Replace the div's HTML with the contents of data
        console.log(data); 
    });

That's really all you need to do.

If you happen to have scripts in the data, they don't need to be protected with $(document).ready(), because the document is already loaded, you're just replacing the body of a div element.

It's just that simple.

I updated my answer for that. Just make sure that any Javascript code that you're executing or depending on does NOT exist in the `body`. Load Javascript in the head in this case, or it will disappear when the `body` is replaced. — Michael Gaskill, May 19 '16 at 23:39

Replacing HTML with content from AJAX return data

2 Answers2