I have a "little" big problem with my web application. First, I must confess, that I am not so good in english :).
I have realize very simple html+css-Tabs based on ajax (powered by jquery) and each Tab request a separate PHP-site. Every site includes min. one form with php-values and other jquery-effects/-plugins.
The primary problem is the form-view in every tab. The ajax-loaded forms were shown not complete and other form were complete blank. I locate the problem and delete PHP-code in one of some fieldsets and finaly I show this one fieldset and the rest of the form were blank.
If I use only css-based tabs and without ajax functionality the forms loaded completely.
What is the problem with ajax? I dont understand it :P
Here is a part of one of the forms:
<form action="#" method="post" name="form_project" class="form_project mainform">
<input type="hidden" name="uid" value="<?= issetGlobals('uid') ?>" />
<table border="0" id="tbl-projects" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2"><input type="checkbox" name="cb_newProject" onclick="actFieldset('#fs-newProject')" /> <label for="cb_newProject">Projekt erstellen</label></td>
</tr><tr>
<td>
<fieldset id="fs-newProject" disabled="disabled"><legend>Projektverzeichnis erstellen</legend>
<table border="0">
<tr>
<td><label for="projectName">Projektname</label></td>
<td><input type="text" name="projectName" value="" /></td>
</tr><tr>
<td><label for="projectManager">Projektleiter</label></td>
<td><select size="1" name="projectManager" id="projectManager">
<?php
foreach($DBma->getEmployees() as $value) {
if($value['uid'] == issetGlobals('uid'))
echo '<option value="'.$value["uid"].'" selected="selected">'. convertString($value["name"]) .'</option>';
else
echo '<option value="'.$value["uid"].'">'. convertString($value["name"]) .'</option>';
}
?>
</select>
</td>
</tr>
And here the "converted" JS-Code:
$('#tabs-nav li').each(function(i) {
$(this).click(function(event){
event.stopPropagation();
Tab($(this).attr('id'));
});
});
function Tab(key){
$('#tabs-nav li').each(function() {
$(this).removeClass('active');
})
$(key).addClass('active');
$.ajax({
url: 'tab-content.php?tab=' + key,
type: 'get',
beforeSend: function() {
$(key + '-loading').html('<img src=\'images/ajax-loader.gif\' width=\'16\' height=\'16\' alt=\'Loading\' />');
}
}).done(function(responseText) {
$(key + '-loading').html("");
$('#tabs-content').html(responseText);
});
}