Appending content to page right after database submit - php

Question

<div class="accordion" id="accordion2">
<?php $info= mysql_query("SELECT id, title, description FROM event"); ?>
<?php while ($row = mysql_fetch_array($info, MYSQL_NUM)): ?>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse<?php print $row[0]; ?>"><?php print $row[1]; ?></a><span class="delete" id="<?php print $row[0]; ?>">×</span>
</div>
<div id="collapse<?php print $row[0]; ?>" class="accordion-body collapse">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span6">
<?php print $row[2]; ?>
</div>
<div class="span6 ppl">
<ul>
</ul>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
I have a pretty simple way of printing out my twitter bootstrap accordion.
I have this displayed on my page and I also have a form on top of the accordion itself from where I can submit another one into the database using ajax. Here is the form:
<form class="form">
<fieldset>
<legend>Stuff</legend>
<input class="class1" type="text" placeholder="xx">
<input class="class2" type="text" placeholder="xx">
<input class="class3" type="password" placeholder="xx">
<textarea maxlength="320" rows="5" class="class4" placeholder="xx"></textarea>
<div class="submit btn">Add</div>
</fieldset>
</form>
Here is the jQuery:
$(".form .submit").bind("click", function() {
var title = $(".form input.class1").val();
var email = $(".form input.class2").val();
var stuff1 = $('.form input.class3').val();
var stuff2 = $('.form textarea.class4').val();
if (title && email) {
var data = {title: title, email: email, stuff1: stuff1, stuff2: stuff2};
$.post("action.php", data, function() {
$(".form input, .form textarea").val("");
alert('done');
});
}
else {
alert('something went wrong');
}
});
And finally my action.php file:
<?php require('access.php');
if ($_POST['title'] && $_POST['email']) {
$title = $_POST['title'];
$email = $_POST['email'];
$stuff1 = $_POST['stuff1'];
$stuff2 = $_POST['stuff2'];
mysql_query("INSERT INTO events (title, email, stuff1, stuff2) VALUES('$title', '$email', '$stuff1', '$stuff2')");
}
Everything works, but like the title says, I want the information entered to be prepended to the accordion div as a new accordion group (without refreshing the page). My brain refuses to work with me on this, since to me it seems that if I submit the values, I have to make another request to the database to get the freshly generated id of the new event to have my accordion layout working.
Wat do?
And sorry for using a deprecated way of using mysql :O

Answer 1

So mysql functions aside, all you are looking to do is to prepend some html to an element. You already have a callback function on your post and so all you need to do is to make it actually do something i.e.
$.post('action.php', data, function() {
var newID = 123; // get this from the response text
$('div.accordion-inner').prepend('<div class="row-fluid"><div class="span6">'+newID +'</div><div class="span6 ppl"><ul></ul></div></div>');
});
This will attempt to prepend the div as specified to div.accordion-inner
Just replace the prepended with whichever html you are looking for.
And as an additional note, http://php.net/manual/en/function.mysql-insert-id.php will get you the PRIMARY KEY value for the last INSERT performed on your MySQL connection