I have a column (called start_date) who appears the start date of vacation of an employee. This is an input who has default value the current date. A calendar (button) input exists near this input. When an user selects a date from this calendar this value saved in the db too. The values autosave through ajax without submit button. Also exists a button who adds new rows. My problem is that needs to refresh the page in order to appears me the calendar and when I click the date from this the calendar disappear again. Also when click the add button the calendar re-disappers and in this case I refresh my page. HTML code
<?php
$functions=new classes;
$result=$functions->query("SELECT a.id as a_id,r.reason as id_reason,
DATE_FORMAT(a.start_date ,'%d-%m-%Y') as start_date, a.duration as duration, a.notes as notes, st.name as id_status_adeia
FROM reason r, absent a,status_adeia st
WHERE a.id_reason=r.id AND st.id=a.id_status_adeia AND a.id_proswpiko='$id'");
$tabindex_counter=1;
echo "
<table class='main'>
<tr class='main'>
<th class='main'>Reason</th><th class='main'>Start Date</th><th class='main'>Duration</th><th class='main'>Notes</th><th class='main'>Status</th><th class='main'>Delete</th>
</tr>";
while ($row = mysql_fetch_assoc($result)){
echo "<tr class='main'>";
foreach ($row as $key=>$val) {
if ($key!="a_id") {
if ($key=="id_reason") {
echo "<td class='main'><select id='".$row['a_id']."_$key' class='absent_edit' tabindex='$tabindex_counter' onchange='paint_select_yellow(this)' onkeypress='focus_next_input(this,event)' onblur='update_record (event,this,"absent","$key","id","".$row['a_id']."")'>";$functions->options_list("SELECT id,name FROM reason",$val,false);echo"</select></td>";
$tabindex_counter++;
}
elseif ($key=="id_status_adeia") {
echo "<td class='main'><select class='absent_edit' id='".$row['a_id']."_$key' tabindex='$tabindex_counter' onchange='paint_select_yellow(this)' onkeypress='focus_next_input(this,event)' onblur='update_record(event,this,"absent","$key","id","".$row['a_id']."")' ".$_SESSION['disabled'].">";$functions->options_list("SELECT id,name from status_adeia",$row['id_status_adeia'],false);echo"</select></td>";
$tabindex_counter++;
}
elseif ($key=="start_date") {
echo "<td class='main'><input disabled id='".$row['a_id']."_$key' class='absent_edit datepicker' tabindex='$tabindex_counter' onclick='update_record(event,this,"absent","$key","id","".$row['a_id']."")' value='$val'></td>";
$tabindex_counter++;
else {
echo "<td class='main'><input id='".$row['a_id']."_$key' class='absent_edit' tabindex='$tabindex_counter' onkeypress='focus_next_input(this,event)' onblur='update_record(event,this,"absent","$key","id","".$row['a_id']."")' type='text' value='$val'></td>";
$tabindex_counter++;
}
}
}
echo " <td class='main'><button class='button4' onclick='delete_record("absent","".$row['a_id']."")'><img src='delete.png' width='20' height='20'></button></td>";
echo "</tr>";
}
echo "</table>";
echo "<br/>";
echo "<button class='button4' onclick='new_record_absent("$id")' value='ADD'/><img src='add.png' width='40' height='40'></button>";
?>
This is the code which update my records:
function update_record (evt,elem,table,field,check_field,check_var) {
if (elem.tagName=="INPUT") {
elem.value=capitalizeFirstLetter(elem.value);
}
document.getElementById('test_texts').innerHTML='worked';
var elem_id=elem.id;//store id to find the elem later in case a screen refresh has happened.
var val=elem.value;
if (field=="start_date" || field=="end_date") {
var date_split=elem.value.split('-');
val=date_split[2]+"-"+date_split[1]+"-"+date_split[0];
}
if (elem.style.backgroundColor=="yellow") {//update only if there has been a change
loadXMLDoc("/staff/update_record.php?table="+encodeURIComponent(table)+"&field="+encodeURIComponent(field)+"&val="+encodeURIComponent(val)+"&check_field="+encodeURIComponent(check_field)+"&check_var="+encodeURIComponent(check_var),function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(elem_id).style.backgroundColor="lightgreen";
document.getElementById('test_texts').innerHTML=xmlhttp.responseText;
}
})
}
}
Any suggestions of how do I solve this? For some reason when I click add button or update the date ajax dont regognize the datepicker part
