0

ユーザーがメッセージテキストをテンプレートとして保存して将来使用できるようにするための簡単な機能を実装したいと思います。

php：

  echo '<div id="container">';
    $sql = ("SELECT template_id, template_text, template_name, member_id FROM message_templates
            WHERE member_id = {$member_id}");
    $result = mysql_query($sql) or die(mysql_error());
    $num_rows = mysql_num_rows($result);
    $confName = get_conference_name($confID);
    $confName = formatText_safe($confName);
    echo "<label>" . $lang['my_template'] . "</label><select id='tempchoose' name='templates'>";
    if ($num_rows == 0) {
        echo '<option value=""> ' . $lang['no_saved'] . '</option>';
    } else {
        for ($i = 0; $i < $num_rows; $i++) {
            //$template_id = mysql_result($result, $i, 0);
            $temp_text = mysql_result($result, $i, 1);
            $temp_name = mysql_result($result, $i, 2);
            echo '<option value="' . $temp_text . '">' . $temp_name . '</option>';
        }
    }
    echo "</select></div>"; 
    echo '<input id="send" name="Message" value="send" disabled="disabled" type="submit" />
<input id="temp" name="temp" type="button" value="save as template" />"
<textarea style="width: 99%;" id="textarea" name="TextBox" rows="8" disabled="disabled" type="text" value=""/></textarea>';

javascript：

$("#temp").bind("click", function(){
            name=prompt("template name?");
            temp_text = $("#textarea").val();
        if (name!=null && name!="" && name!="null") {
            $.ajax ({
                data: {temp_text:temp_text, name:name},
                type: 'POST',
                url:  'save_template.php',
                success: function(response) {
                    if(response == "1") {
                        alert("template saved successfully");
                    } else {
                        alert(response);
                    }
                }
            });
        } else {
            alert("invalid template name");
        }
         $.ajax ({
                url:  'update_templates.php',
                success: function(response) {
                    $("#container").html(response);
                }
            });
    });
 $("select").change(function () {
          $("select option:selected").each(function () {
            $("#textarea").removeAttr("disabled");
            $("#send").removeAttr("disabled");
              });
          $("#textarea").val($(this).val());
        })
        .trigger('change');

update_temp.php

$sql = ("SELECT template_id, template_text, template_name, member_id FROM message_templates
        WHERE member_id = {$member_id}");
$result = mysql_query($sql) or die(mysql_error());
$num_rows = mysql_num_rows($result);
$confName = get_conference_name($confID);
$confName = formatText_safe($confName);
echo "<label>".$lang['my_template']."</label><select id='tempchoose' name='templates'>";
if ($num_rows == 0) {
    echo '<option value=""> '.$lang['no_saved'].'</option>';
} else {
    for ($i = 0; $i < $num_rows; $i++) {
        //$template_id = mysql_result($result, $i, 0);
        $temp_text = mysql_result($result, $i, 1);
        $temp_name = mysql_result($result, $i, 2);
        echo '<option value="' . $temp_text . '">' . $temp_name . '</option>';
    }
}
echo "</select>";

クリック関数の最後のajaxリクエストは#temp、新しく作成されたテンプレートでドロップリストを更新するために使用されます。問題は、[テンプレートの保存]をクリックしたときに発生することです。ajaxリクエストは正常に実行され、ドロップリストが更新されますが、selectの変更機能が機能しなくなったという有線の問題が発生します。誰かが問題がどこにあるか知っていますか？

4

3 に答える 3

3

ajaxはDOMに新しい要素を挿入し、それらの要素は既に定義したバインディングを認識しないためです。

解決策：jQueryを使用するon

変化する

$("select").change(function () {

に

$(document).on("change","select", function(){

jQuery onは、1.7以降のバージョンから利用できます。以前のバージョンのjQueryを使用している場合は、の使用を検討してdelegateください。

于 2012-07-31T22:24:06.490 に答える
1

Ajaxでselectを書き直す場合は、次のように、単に.changeではなく.delegate（）を使用する必要があります。

$("someSelector").delegate("select", "change", function() {
 // do stuff...
});

ここで、someSelectorは、selectを含む要素です。

于 2012-07-31T22:24:37.127 に答える
1

はい。コンテナ内のドロップダウンを置き換えたため、ドロップダウンのすべてのイベントのフックが解除されます。解決策は、次のようにコードを変更することです。

         $.ajax ({
            url:  'update_templates.php',
            success: function(response) {
                $("#container").html(response);
                $("#container select").change(
                   // your drop down change functionality here //
                );
            }
        });

これは、「ドロップダウンが更新されたら、イベントも更新する」ということです。

これがお役に立てば幸いです。

于 2012-07-31T22:29:37.190 に答える