Question

I want to implement simple functionality to allow users to save their message text as template to be used in the future.

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>";

the last ajax request in #temp click function is used to updated the droplist with the newly created template, the problem is that when i click save template; ajax request is performed successfully and droplist is updated, however something wired happen which is that the change function of select is not working anymore! anyone knows where’s the problem?

Answer 1

Because ajax will inject new elements to your DOM and those elements don’t know about the binding you already defined.

Solution : use jQuery on

Change

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

to

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

jQuery on is available from 1.7+ version onwards, if you are using a previous version of jQuery, consider using delegate.