1

我需要创建一个具有给定值的表单（条目的编辑功能）。

我的表单是由 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.'"/> €&lt;/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() 问题。但我不知道如何处理这个。知道怎么做吗？

4

0 回答 0