我正在开发小型应用程序,它应该生成工作时间表并计算小时数:http://www.ankieta.gorna.pl/kalendarz.php。我编写了函数kalkulacja()
,它应该通过ajax计算每一行的输入和输出结果。我无法弄清楚为什么它只做最后一行,在以前的所有情况下抛出错误。我很感激你的帮助。
<body onload="init();">
<div class="container">
<button type="button" id="tydz_minus" name="tydz_minus"><</button>
<button type="button" id="tydz_plus" name="tydz_plus">></button>
<table id="tabela">
<thead>
<tr>
<td></td>
<td class="tydz" id="pon"></td>
<td class="tydz" id="wt"></td>
<td class="tydz" id="sr"></td>
<td class="tydz" id="czw"></td>
<td class="tydz" id="pn"></td>
<td class="tydz" id="sob"></td>
<td class="tydz" id="ndz"></td>
<td>tydz.</td>
<td>miesiąc</td>
</tr>
</thead>
<tbody id="tbody">
<?php
$dane = $_POST["staff"];
$link = mysqli_connect("") or die("Error " . mysqli_error($link));
if($link) {
echo "";
} else {
echo "nie ok";
}
$result = mysqli_query($link,"SELECT staff FROM Staff");
while($row = mysqli_fetch_array($result)) {
$pracownik = $row['staff'];
print "<tr><td>" . $pracownik . "</td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td id='ww'></td><td></td></tr>";
}
?>
</tbody>
</table>
<input name="staff" id="staff" type="text"/>
<input type="submit" value="Dodaj pracownika" onclick="save_staff();"/>
</div>
<script>
$(document).ready(function() {
$('#tbody tr td #time').datetimepicker({
datepicker:false,
format:'H:i'
}); });
</script>
</body>
function init() {
var zlap_plus = document.getElementById("tydz_plus");
var zlap_minus = document.getElementById("tydz_minus");
zlap_plus.onclick = plus_tydz;
zlap_minus.onclick = minus_tydz;
dni();
for(var e = 0 ; e < 19 ; e++) {
kalkulacja(e); }
}
var dzis = new Date();
var day = 86400000;
var pon = Date.now() - ((dzis.getDay()*day)-day); //zwraca pierwszy dzień tygodnia
var pierwszy = Date.now() - ((dzis.getDate() - dzis.getDay())*day); //zwraca pierwszy dzień miesiąca
//Funkcja tworzy nagłówek tabeli i generuje daty
function dni() {
document.getElementById("pon").innerHTML = "<div id='cell'>" + new Date(pon).toLocaleDateString() + "</div>";
document.getElementById("wt").innerHTML = new Date(pon + day).toLocaleDateString();
document.getElementById("sr").innerHTML = new Date(pon + (2*day)).toLocaleDateString();
document.getElementById("czw").innerHTML = new Date(pon + (3*day)).toLocaleDateString();
document.getElementById("pn").innerHTML = new Date(pon + (4*day)).toLocaleDateString();
document.getElementById("sob").innerHTML = new Date(pon + (5*day)).toLocaleDateString();
document.getElementById("ndz").innerHTML = new Date(pon + (6*day)).toLocaleDateString();
}
//Funkcja przesuwa kalendarz o tydzień
function plus_tydz() {
pon = pon+7*day;
return dni();
}
//Funkcja cofa kalendarz o tydzień
function minus_tydz() {
pon = pon-7*day;
return dni();
}
//Funkcja tworzy nowy obiekt ajax
var ajax = createXmlHttpRequestObject();
function createXmlHttpRequestObject() {
var ajax;
if(window.ActiveXObject) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
ajax = false;
}
}
else {
try {
ajax = new XMLHttpRequest();
} catch(e) {
ajax = false;
}
}
if (!ajax)
alert("Nie uadło się utworzyc obiektu");
else
return ajax;
}
//Funkcja zapisuje w bazie danych nowego pracownika via ajax
function save_staff() {
if(ajax) {
var staff = document.getElementById("staff").value;
var dane = "staff=" + staff;
ajax.open("POST", "kalendarz_dane.php", true);
ajax.onreadystatechange = handle;
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.send(dane);
}
}
//Funkcja obsługuje odpowiedź serwera z funkcji save_staff
function handle() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
try {
document.getElementById("tbody").innerHTML = ajax.responseText;
}catch(e) {
alert(e.toString());
}
} else {
alert(ajax.statusText);
}
}
}
function kalkulacja(e) {
var cal = 0;
var len = document.getElementById("tbody").rows.length;
for(var i = 1 ; i < 8 ; i++) {
var x = document.getElementById("tbody").rows[e].cells[i].children[0].value;
var y = document.getElementById("tbody").rows[e].cells[i].children[1].value;
var timeStart = new Date("01/09/1970 " + x).getTime();
var timeEnd = new Date("01/09/1970 " + y).getTime();
var workday = (timeEnd - timeStart) / 3600000;
cal += workday; }
if(ajax) {
var mk = "cal=" + cal;
ajax.open("GET", "kalendarz_time.php?cal=" + cal, true);
ajax.onreadystatechange = handletime;
ajax.send(null);
} else {
setTimeout(kalkulacja(e), 2000)
}
function handletime() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
try {
var s = 8 + (e*10)
document.getElementById("tbody").getElementsByTagName("td").item(s).innerHTML = ajax.responseText;
setTimeout(kalkulacja(e), 2000);
}catch(e) {
alert(e.toString());
}
} else {
alert(ajax.statusText);
}
}
}
}
答案 0 :(得分:2)
这一行:
setTimeout(kalkulacja(e), 2000)
应该是:
setTimeout(function() {
kalkulacja(e);
}, 2000);
你编写它的方式是,当你设置超时时,它会调用kalkulacja
,而不是在计时器到期时。
但主要问题是,每次调用ajax
时,您都使用相同的kalkulacja
对象。如果进行多个并发AJAX调用,则需要为每个调用使用不同的XMLHttpRequest
个对象。所以kalkulakja
应该以:
var ajax = createXmlHttpRequestObject();
所以你每次都会得到一个新的。