jQuery post div content and php echo

Question

I want to post the contents of a div via jQuery, redirect to php file, and then echo the div contents on the php file.

html

<div id="edit_content">
<p>This is a test</p>    
</div>
<a href="processingscript.php" id="submit_script">Submit</a>

jquery

$('#submit_script').click(function(){
$.post('/processingscript.php', {'html': $('#edit_content').html()};
});

php

$content = $_POST['html'];
echo $content;

So far, I get a blank echo on the php file. Should i be using $().redirect()?

Answer 1

Well.. I'm not entirely sure what you're trying to do here. But this is what I understand -

You want to access the contents of a div on a different PHP script. You use the word " redirect " but then use a jQuery AJAX method. Finally, you haven't defined a callback for the AJAX call, so you won't ever see that echo from the PHP.

Try something like this -

var htmlData = $('#edit_content').html();
$.post('/processingscript.php', {'html': htmlData },function(response){
  // response now contains anything echoed from processingscript.php 
});

The anonymous function you see within the $.post() function is the callback I mentioned earlier. It is a function that is called as soon as the AJAX request has been completed successfully. The argument passed to it ( response ), is the output of the processingscript.php script.

So, to combine the whole thing together, your jQuery sends an AJAX request to your PHP script which can then manipulate and use the $_POST data as it pleases. Once the PHP is finished it's business, it can echo out a status message. This can be plain text, just a " Woo Hoo! Script done! " or even an object containing any info you want to pass back to your JavaScript (that would be a JSON response).

Answer 2

This was what you wanted, I guess. Tested, Works 100% on me

HTML:

<div id="edit_content">
    <p>This is a test paragraph</p><p> This is <u>another</u> <b>paragraph</b></p>    
</div>
<button id="submit_script">Submit</button>
<div style="border: 2px solid red; width: 200px; height: 100px;">
    <b>Result:</b>
    <div id="result"></div>
</div>

Javascript:

$(document).ready(function() {
    $("#submit_script").click(function() {
        var content = $('#edit_content').html();
            $.post("processing.php", { html: content})
            .done(function(data) {
            $('#result').empty().append(data)
            });
        });
});

This loads the returned div contents on a new div.

Answer 3

You should add

return false;

in the jQuery click event handler, otherwise it will navigate to that page.

$('#submit_script').click(function(){
    $.post('/processingscript.php', {'html': $('#edit_content').html()};
    return false;
});

and remember that you can see only in the browser javascript console what is displayed in the page you get through AJAX request. The "echo" you inserted doesn't show anything on your page, unless you get the response with jQuery but the script wouldn't have sense.