私が達成しようとしていること:
ユーザーの統計を追跡する div があります。ユーザーをクリックすると、div の内容が ajax リクエストのエコー ページによってユーザーの詳細に置き換えられます。10 秒ごとに div が ajax を使用して更新されるため、古いコンテンツであるすべてのユーザーの統計が再度表示されます。
私の問題:ページをロードすると、ユーザーをクリックするとonclickイベントがうまく機能します。詳細が読み込まれます。約 10 秒後、div コンテンツは古いすべてのユーザー統計によって更新されます。
onclickイベントが新しいコンテンツで機能しないという事実を除いて、これまでのところ良い....
これが私のコードです:
Javascript:
var x;
var namen;
window.onload = function(){
x = true;
$("submitnieuw").observe('click', addturf);
$("submitdelete").observe('click', verwijderturf);
setInterval(function (){
if(x === true){
alert("a");
x = $('stats').getElementsByTagName('tr');
jQuery("#stats").load("stats.php");
jQuery("#recent").load("vandaag.php");
namen = $('stats').getElementsByTagName('tr');
for(var i = 1; i < namen.length; i++){
namen[i].observe('click', select);
}
}
}, 10000);
namen = $('stats').getElementsByTagName('tr');
for(var i = 1; i < namen.length; i++){
namen[i].observe('click', select);
}
};
function select(naam){
//highlight the selected list element
var name = naam.findElement('tr').id;
jQuery.ajax('details.php',{
data: {
'Naam': name,
'door': $("door2").value
},
type: 'post',
success: function(data){
$("stats").innerHTML = data;
},
error: ajaxFailure
});
}
function detail(ajax){
var text = ajax.responseText;
alert(text);
L = text;
}
function verwijderturf() {
var naam = $("naam").value;
$("naamnieuw").value = "";
$("naam").value = "";
$("redennieuw").value = "";
jQuery.ajax('server.php',{
data: {
'mode': 'verwijderturf',
'naam': naam,
'door': $("door2").value
},
type: 'post',
success: update,
error: ajaxFailure
});
}
function addturf() {
var naam = $("naamnieuw").value;
var reden = $("redennieuw").value;
$("naamnieuw").value = "";
$("naam").value = "";
$("redennieuw").value = "";
jQuery.ajax('server.php',{
data: {
'mode': 'addturf',
'naam': naam,
'door': $("door2").value,
'reden': reden
},
type: 'post',
success: update,
error: ajaxFailure
});
}
function update(ajax){
jQuery("#stats").load("stats.php");
jQuery("#recent").load("vandaag.php");
}
function ajaxFailure(ajax, exception) {
alert("Error making Ajax request:" +
"\n\nServer status:\n" + ajax.status + " " + ajax.statusText +
"\n\nServer response text:\n" + ajax.responseText);
if (exception) {
throw exception;
}
}
stats.php (再度読み込まれる内容):
<?php
include_once("db.php");
?>
<?php
$names = mysql_query("SELECT Naam From users");
$feedData = '';
$feedData .= "<fieldset>";
$feedData .= "<legend>Turfjesteller</legend>";
$feedData .= "<table border=0>";
$feedData .= "<tr>";
$feedData .= "<td>Naam</td>";
$feedData .= "<td>Aantal</td>";
$feedData .= "<td>Gedaan</td>";
$feedData .= "<td>Resterend</td>";
$feedData .= "</tr>";
while($r = mysql_fetch_array($names)){
$feedData .= "<tr id=".$r['Naam'].">";
$feedData .="<td>" . $r['Naam'] . "</td>";
$sql="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Adtje'";
$result=mysql_query($sql);
$count=mysql_num_rows($result); //count = adtjes
$sql2="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Turfje'";
$result2=mysql_query($sql2);
$count2=mysql_num_rows($result2); //count2 = turfje
$feedData .="<td>" . $count2 . "</td>";
$feedData .="<td>" . $count . "</td>";
$feedData .="<td>" . ($count2-$count) ."</td>";
$feedData .="</tr>";
}
$feedData .="</table>";
$feedData .="</fieldset>";
echo($feedData);
?>
前に述べたように、ページはまったく同じように見えますが、onclick イベントは機能しなくなりました。
divの内容はまったく同じなので、何が悪いのかわかりません。
namen = $('stats').getElementsByTagName('tr');
for(var i = 1; i < namen.length; i++){
namen[i].observe('click', select);
}
すべてのテーブル行を取得し、onclick イベントを再度追加する必要があります...
10 秒後に stats div を stats.php に置き換えた後、onclick イベントが機能しなくなりました。
誰でも私を助けてもらえますか?