指定された値でフォームを作成する必要があります (エントリの編集機能)。
私のフォームは ajax コードから生成され、次のようになります。
echo '<p class="validateTips">Bitte alle Felder ausfüllen!</p>
<form id="coffee_talk_edit" action="edit.php?action=event_edit" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<table>
<tr>
<td class="event_width">Datum:</td>
<td>
<select name="day_from" id="day_from_e">
<option value="none" class="bold italic">Tag</option>';
for($i=1; $i<=31; $i++){
if ($i == $getDate_day) {
echo '<option value="'.$i.'" selected>'.$i.'</option>';
} else echo '<option value="'.$i.'">'.$i.'</option>';
}
echo '</select>
<select name="month_from" id="month_from_e">
<option value="none" class="bold italic">Monat</option>';
for($i=1; $i<=12; $i++){
if ($i == $getDate_month) {
echo '<option value="'.$i.'" selected>'.$month_name[$i].'</option>';
} else echo '<option value="'.$i.'">'.$month_name[$i].'</option>';
}
echo '</select>
<select name="year_from" id="year_from_e">
<option value="none" class="bold italic">Jahr</option>';
for($i=$year; $i>=2008; $i--){
if ($i == $getDate_year) {
echo '<option value="'.$i.'" selected>'.$i.'</option>';
} else echo '<option value="'.$i.'">'.$i.'</option>';
}
echo '</select>
</td>
</tr>
<tr>
<td>Thema:</td>
<td class="topic"><input type="text" name="topic" id="topic_e" value="'.$getTheme.'"/></td>
</tr>
<tr>
<td>Referent:</td>
<td class="contributer"><input type="text" name="contributer" id="contributer_e" value="'.$getContributer.'"/></td>
</tr>
<tr>
<td>Beginn:</td>
<td class="begin"><input type="text" name="begin_hour" id="begin_hour_e" value="'.$getBegin_hour.'"/>:<input type="text" name="begin_min" id="begin_min_e" value="'.$getBegin_min.'"/> Uhr</td>
</tr>
<tr>
<td>Ort:</td>
<td class="place"><input type="text" name="place" id="place_e" value="'.$getPlace.'"/></td>
</tr>
<tr>
<td>Eintritt:</td>
<td class="entrance"><input type="text" name="entrance_euro" id="entrance_euro_e" value="'.$getEntrance_euro.'"/>,<input type="text" name="entrance_cent" id="entrance_cent_e" value="'.$getEntrance_cent.'"/> €</td>
</tr>
<tr>
<td>Flyer:</td>
<td class="flyer">
<input type="hidden" name="MAX_FILE_SIZE" value="5734400">
<input type="file" name="image" id="image">
</td>
</tr>
</table>
<input type="hidden" name="coffee_talk_edit_submit" value="true" />
</form>';
ajax コード:
$(".edit_event").live("click", function() {
var currentID = $(this).data("event-id");
var currentTable = $(this).data("table");
if (currentTable == 'Coffee_talk') {
$.ajax({
url: 'edit.php?action=event_select&id=' + currentID + '&table=' + currentTable,
type: 'GET',
dataType: 'html',
success: function (select) {
$("#dialog_edit_event_coffee_talk").html(select);
$("#dialog_edit_event_coffee_talk").dialog("open");
}
});
return false;
}
}
これは、開かれる jQuery UI モーダル フォーム (検証あり) です。
var topic_e = $("#topic_e"),
contributer_e = $("#contributer_e"),
place_e = $("#place_e"),
year_from_e = $("#year_from_e"),
month_from_e = $("#month_from_e"),
day_from_e = $("#day_from_e"),
begin_hour_e = $("#begin_hour_e"),
begin_min_e = $("#begin_min_e"),
entrance_euro_e = $("#entrance_euro_e"),
entrance_cent_e = $("#entrance_cent_e"),
allFields_e = $( [] ).add(topic_e).add(contributer_e).add(place_e).add(year_from_e).add(month_from_e).add(day_from_e).add(begin_hour_e)
.add(begin_min_e).add(entrance_euro_e).add(entrance_cent_e);
$( '#dialog_edit_event_coffee_talk' ).dialog({
autoOpen: false,
resizable: false,
height: 370,
width: 400,
modal: true,
buttons: {
"Übernehmen": function() {
var bValid = true;
var form = $('#coffee_talk_edit');
var data = form.serialize();
allFields_e.removeClass( "ui-state-error" );
bValid = bValid && checkEmpty( topic_e );
bValid = bValid && checkEmpty( contributer_e );
bValid = bValid && checkEmpty( place_e );
bValid = bValid && checkNone( year_from_e );
bValid = bValid && checkNone( month_from_e );
bValid = bValid && checkNone( day_from_e );
bValid = bValid && checkRegexp( begin_hour_e, /^([0-9])+$/i, "Nur Zahlen erlaubt" );
bValid = bValid && checkRegexp( begin_min_e, /^([0-9])+$/i, "Nur Zahlen erlaubt" );
bValid = bValid && checkRegexp( entrance_euro_e, /^([0-9])+$/i, "Nur Zahlen erlaubt" );
bValid = bValid && checkRegexp( entrance_cent_e, /^([0-9])+$/i, "Nur Zahlen erlaubt" );
alert (bValid);
if ( bValid ) {
alert('valid');
$.ajax({
url: "include/scripts/event_edit.php",
type: "POST",
data: data,
dataType: 'json',
success: function (reqCode) {
//Termin erfolgreich bearbeitet
$("#dialog_edit_event_ok").dialog( "open" );
$("#dialog_edit_event_coffee_talk").dialog( "close" );
}
});
}
},
"Schließen": function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
ajax でフォームを生成しなくても、すべて正常に動作します。$("#dialog_edit_event_coffee_talk").html(select); を使用して生成されたフォームのみ 認識されません。
だからこのステップ
var form = $('#coffee_talk_edit');
var data = form.serialize();
動作していません。フォーム (id #coffee_talk_edit) に影響を与えることはできません。検証を削除しても、フォームが認識されないため、新しい ajax リクエストを送信できませんでした。
.live() が見つからない問題だと思います。しかし、私はこれを処理する方法がわかりません。どのようにそれを行うことができるか考えていますか?