I'm using jQuery UI tabs loading an external form in the tabs. The form is set to submit when the checkbox in the form is clicked on. The form is submitted using ajax. What I'm searching an answer for, is to refresh the tab content after submitting the form, but I haven't had any luck finding the answer.
$(function() {
$(#tabs).tabs({
cache: true,
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(Can't load content. Please call support.);
});
if(!($.data(ui.tab[0], cache.tabs))) {
return $(ui.panel).html(<div align='center'><img src='images/loader.gif'><p><strong>Loading...</strong></p></div>);
}
}
}); });
The tabs are generated using PHP loading variables from a DB:
<div id=tabs>
<ul>
<?php
$sql = mysql_query(SELECT username, name FROM members ORDER BY username) or die(mysql_error());
while($row = mysql_fetch_array($sql)) {
echo <li><a href='tasks.php?user= . $row['username'] . '> . $row['name'] . </a></li>n;
}
?>
</ul>
</div>
The form is in the file tasks.php and the submit script is:
$(.checkbox).click(function(){
$.ajax({
type: POST,
url: update-task.php,
data: $(#form1).serialize()
}); });
It works perfect. When clicking on checkboxes with the class .checkbox, the form is submitted and the database is updated. But I would like to have the text in the tab to have a different color and the list resorted so that the checked items are moved to the bottom when the form is submitted (I planned to do this on the serverside using PHP). For this I need the content in the tab to be refreshed, but I don't know how. Best guess is to add this in the ajax form submit:
success: function() {
// Something that refreshes tab content
}
But I have no clue to what to do. Any ideas?
/Carl
