我制作了一张表格来显示用户关于一些演示文稿的信息。 我使用ajax, 原因是它应该被装入div 容器中, 而不是在改变年份时每次重新加载 。
这是我的JavaScript:
$("#select_coffee_talk_year").button().click(function() {
var form = $( #coffee_talk_year );
var data = form.serialize();
$.ajax({
url: include/scripts/select_event.php ,
type: POST ,
data: data,
dataType: html ,
success: function (select) {
$("#coffee_talk").html(select);
$("#coffee_talk").fadeIn();
}
});
return false;
});
这是我的选择- event. php :
if ( POST == $_SERVER[ REQUEST_METHOD ]) {
/*******************************/
/** Erzaehlcafe auswählen
/*******************************/
if (isset($_POST[ coffee_talk_year_submit ])) {
$getID = array();
$getDate = array();
$getTheme = array();
$getContributer = array();
$getBegin = array();
$getPlace = array();
$getEntrance = array();
$getFlyer = array();
$sql = "SELECT
ID,
Date,
Theme,
Contributer,
Begin,
Place,
Entrance,
Flyer
FROM
Coffee_talk
WHERE
YEAR(Date) = ".mysqli_real_escape_string($db, $_POST[ year_coffee_talk ])."
ORDER BY
Date ASC
";
if (!$result = $db->query($sql)) {
return $db->error;
}
while ($row = $result->fetch_assoc()) {
$getID[$i] = $row[ ID ];
$getDate[$i] = $row[ Date ];
$getTheme[$i] = $row[ Theme ];
$getContributer[$i] = $row[ Contributer ];
$getBegin[$i] = $row[ Begin ];
$getPlace[$i] = $row[ Place ];
$getEntrance[$i] = $row[ Entrance ];
$getFlyer[$i] = $row[ Flyer ];
$i++;
}
$result->close();
/****************************/
/** Output der Tabelle
/****************************/
if ($getID[0] == ) {
echo Kein Eintrag vorh和en ;
} else {
//Kopf
echo <table id="table">
<thead>
<tr id="table_head">
<th>Nr.</th>
<th>Datum</th>
<th>Thema</th>
<th>Referent</th>
<th>Begin</th>
<th>Ort</th>
<th>Eintritt</th>
<th>Flyer</th>
<th>Bearbeiten</th>
</tr>
</thead>
<tbody> ;
//Mittelteil
$j = 0;
for($i = 0; $i < count($getID); $i++) {
$j = $i + 1;
echo <tr>
<td class="center"> .$j. </td>
<td class="center"> .$getDate[$i]. </td>
<td class="center"> .$getTheme[$i]. </td>
<td class="center"> .$getContributer[$i]. </td>
<td class="center"> .$getBegin[$i]. </td>
<td class="center"> .$getPlace[$i]. </td>
<td class="center"> .$getEntrance[$i]. </td> ;
if ($getFlyer[$i] == ) {
//Kein Bild vorh和en
echo <td class="center">Kein Bild vorh和en</td> ;
} else echo <td class="center"> .$getFlyer[$i]. </td> ;
echo <td class="center">
<table id="icons">
<tr>
<td>
<a href="#" data-event-id=" .$getID[$i]. " data-table="Coffee_talk" class="edit_event">
<img src="images/edit.png" />
</a>
</td>
<td>
<a href="#" data-event-id=" .$getID[$i]. " data-table="Coffee_talk" class="delete_event">
<img src="images/delete.png" />
</a>
</td>
</tr>
</table>
</td>
</tr> ;
}
//Ende
echo </tbody>
</table> ;
}
}
}
您可以看到我的顶部是一张表格。 我正使用链接编辑和删除函数 :
<a href="#" data-event-id=" .$getID[$i]. " data-table="Coffee_talk" class="edit_event">
<img src="images/edit.png" />
</a>
和
<a href="#" data-event-id=" .$getID[$i]. " data-table="Coffee_talk" class="delete_event">
<img src="images/delete.png" />
</a>
这是我的html 与占位符 div :
<div>
<p class="bold underline headline">Bereits eingetragen:</p>
<form id="coffee_talk_year" action="include/scripts/select_event.php" method="post" accept-charset="utf-8">
<select name="year_coffee_talk" id="year_coffee_talk">
<option value="none" class="bold italic">Jahr</option>
<?php
for($i=2008; $i<=$year; $i++){
if ($i == $year) {
echo "<option value="".$i."" selected="$i">".$i."</option>
";
} else echo "<option value="".$i."">".$i."</option>
";
}
?>
</select>
<button id="select_coffee_talk_year">anzeigen</button>
<input type="hidden" name="coffee_talk_year_submit" value="true" />
</form>
<br />
<div id="coffee_talk"></div>
<br />
<button id="add_coffee_talk">hinzufügen</button>
</div>
Now I want to use this JavaScript to do a delete 和 edit function:
$(".delete_event").click(function() {
alert( hallo );
currentUserID = $(this).data("event-id");
currentTable = $(this).data("table");
$( "#dialog_delete_event" ).dialog( "open" );
});
$( #dialog_delete_event ).dialog({
autoOpen: false,
resizable: false,
height: 170,
modal: true,
buttons: {
Ja : function() {
document.location = "index.php?section=event_delete&id=" + currentUserID +"&table=" + currentTable;
$( this ).dialog( close );
},
Nein : function() {
$( this ).dialog( close );
}
}
});
我的问题是点击功能( 在链接中定义) 无效 。 我发现 ajax 格式的响应没有写入 html 代码 。 我打赌这就是问题所在 。 我该怎么做才能给链接一个工作点击功能?