CODEWITHSUNDEEP
javascriptphphtmlajax
J. Turolla
J. Turolla

Reputation: 15

Replacing HTML with content from AJAX return data

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); 
    });

Upvotes: 1

Views: 1847

Answers (2)

Michael Gaskill
Michael Gaskill

Reputation: 8042

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.

Upvotes: 0

cssyphus
cssyphus

Reputation: 40038

$.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.

Upvotes: 1

Related Questions