0

プレゼンテーションに関する情報をユーザーに表示するためのフォームを作成しました。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>
        &nbsp;&nbsp;
        <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 コードに書き込まれていないことがわかりました。これが問題であることに賭けてください。リンクに機能するクリック機能を与えるにはどうすればよいですか?

4

3 に答える 3

1

@Albitのように、ajaxが正しく機能していて、結果が画面に表示されていると仮定すると、質問が何であるかはよくわかりません。

$(".delete_event").click(function() {

試す

$(".delete_event").live("click", function() {

これは、ページの読み込み後にセレクターを満たす要素が引き続きイベントをトリガーすることを意味します。

于 2012-05-27T14:43:40.277 に答える
1

コードのサイズが原因でわかりませんが、これは次のとおりです。

$(".delete_event").click(function() {

する必要があります

$(".delete_event").live("click",function() {

html を動的に作成するためです。「ライブ」はそれで機能します。

于 2012-05-27T14:43:20.587 に答える
0

問題を正しく理解できたかどうかはわかりませんが、アンカーの html タグで onclick イベントを使用するだけで問題ありません。これが正しい答えでない場合は、私を無視してください

于 2012-05-27T14:37:45.997 に答える