jQuery AJAX Refresh after Insert not working - php

Question

I have a single page website, I have the insert working correctly, but I cannot seem to update the #results div after submit. The values are being inserted into the database just fine and if I hard refresh they are appearing. But not with the jQuery AJAX refresh. I am new to Ajax, so any help would be really appreciated, and any comments on code structure or bad habits, please comment as I am trying to learn the proper way to program.
Here is my code:
$(document).ready(function(){
$("form#addTodo").submit(function(){
alert('hello world'); // ensure function is running
var post_title = $('input#post_title').val(); // take values from inputs
var post_content = $('input#post_content').val();
$.ajax({
type: "POST",
url: "add.php",
data: "post_title=" + post_title + "&post_content=" + post_content,
success: function() {
// alert('success'); // ensure success
$('#results').fadeOut('slow').load('include/results.php').fadeIn('slow');
}
});
$('input#post_title').val(''); // clear form fields
$('input#post_content').val('');
return false;
});
});
Here is the results.php file:
<?php
$sql = $db->query('SELECT id, post_title, post_content FROM posts ORDER BY post_title ASC');
$results = $sql->fetchALL(PDO::FETCH_OBJ);
$count_posts = count($results);
?>
<?php if ( have_posts() == true) : ?>
<div class="accordion" id="accordion_main">
<?php foreach($results as $entry): ?>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_main" href="#collapse-<?php echo $entry->id; ?>">
<?php echo $entry->post_title; ?>
</a>
</div>
<div id="collapse-<?php echo $entry->id; ?>" class="accordion-body collapse">
<div class="accordion-inner">
<p class="target"><?php echo $entry->post_content; ?></p>
<p>Edit Delete</p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
<h3>There are no posts to display at this time.</h3>
<?php endif; ?>
This works fine when it is included by the index.php, I just can't get it to refresh after posting the data to the DB.
<?php
require_once 'includes/db.php';
require_once 'includes/functions.php';
?>
<?php get_header(); ?>
<div id="results">
<?php include_once 'includes/results.php'; ?>
</div>
<hr />
<p>Add New Post</p>
<form id="addTodo" action="">
<div>
<label for="post_title">Post Title</label>
<input id="post_title" name="post_title">
</div>
<div>
<label for="post_content">Post Content</label>
<input id="post_content" name="post_content">
</div>
<div>
<button id="submit" type="submit">
Save
</button>
</div>
</form>
<?php get_footer(); ?>
I should mention that I haven't put in form validation yet. Any help is greatly appreciated, thanks.

Answer 1

Why not just return the data from success? and use that to make your html input
success:function(returnedData) {
if (returnedData.status = 'successful') {
//use javascript to append the data for example like
//returnedData.message to make html and insert into your current html
}
}
Note: returnedData has to be pushed out by your php in an json format.

Answer 2

you can find a similar answer to your request if you read this thread that I had recently answered : Jquery Mobile Post to PHP (same page)
But you must make some adaptation for you context ;-) !!
I think that is the unique solution if you're using unique file script

Answer 3

To insert data returned from php file just use $("element id or class").html() function to insert the data or html to specific area of your document