プレゼンテーションに関する情報をユーザーに表示するためのフォームを作成しました。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;
});
これは私の select_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 vorhanden';
} 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 vorhanden
echo '<td class="center">Kein Bild vorhanden</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>
これは、プレースホルダー div を含む私の html です。
<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>\n";
} else echo "<option value=\"".$i."\">".$i."</option>\n";
}
?>
</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>
次に、この JavaScript を使用して、削除および編集機能を実行します。
$(".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' );
}
}
});
私の問題は、(リンクで定義されている) click_function が機能していないことです。ajax フォームの応答が html コードに書き込まれていないことがわかりました。これが問題であることに賭けてください。リンクに機能するクリック機能を与えるにはどうすればよいですか?