JQuery обновить исходный код, но изменения не отображаются в браузере?

Question

Я пытаюсь написать небольшую форму, в которой у меня будет 3 радиокнопки с именами 3 разных шаблонов (текстовые файлы). Если выбран один из них, содержимое текстового файла должно отображаться в текстовой области ниже, а когда я выбираю другой, содержимое текстовой области должно обновляться. Пока все работает, я могу выбирать и менять шаблоны и текст будет обновляться. НО, когда я изменяю текст в шаблоне, а затем выбираю другой шаблон, текст в текстовой области не будет обновляться. Однако, когда я просматриваю исходный код части текстовой области, я вижу, как она меняется, когда я нажимаю другую радиокнопку, но не в браузере (нужно нажать клавишу F5).

<form class="form-horizontal" method="POST" id="packet_form">
...
  <div class="form-group">
     <label class="col-xs-3 control-label" for="tpl_name">Templates:</label>
        <div class="col-xs-9">
        <?php
         /* get_tpl_array() returns an array with names from a directory, which is working fine */
         foreach (get_tpl_array() as $tpl_name)
         {
           echo '<div class="radio">';
           echo '<label>';
           echo '<input type="radio" name="tpl_name" id="'.$tpl_name .'" value="' . $tpl_name . '">' . $tpl_name;
           echo '</label>';
           echo '</div>';
         }
      ?>
       </div> //end col-xs-9
   </div> // end form-group
   <div class="form-group">
      <label class="col-xs-3 control-label" for="licence_text">Licence:>label>
      <div class="col-xs-9">
           <textarea class="form-control" id="licence_text" name="licence_text" rows="20">
           </textarea>
        </div>
    </div>
 </form>

вот мой JS:

$(document).ready(function() {
   $('input[name="tpl_name"]:radio').on("change", get_tpl_content);

   /* set the first option checked if none of the radiobuttons is checked */   
   if (!$('input[name="tpl_name"]:checked').val()) {
       $('input:radio:first').attr('checked', true);
       get_tpl_content();
   }

   function get_tpl_content() {
    var tpl_name = $("#packet_form input[type='radio']:checked").val();
    var name = {
        "tpl_name": tpl_name
    };
    if (name !== "") {
        var name_value = JSON.stringify(name);
        $.ajax({
            type: "POST",
            url: "Show_tpl_in_packet.php",
            data: {
                tpl: name_value
            },
            success: show_tpl_in_textarea
        });
    }
}

function show_tpl_in_textarea(content) {
    $("#licence_text").empty().append(content);
}

и вот мой Show_tpl_in_packet.php:

require_once '/config/Config.php';

if ($_POST['tpl'])
{
    $json_tpl = json_decode($_POST['tpl']);
    $tpl_name = $json_tpl->tpl_name;
}
/* tpl_path is define in config.php as $_SERVER['DOCUMENT_ROOT'] . project_path . "/tpl/"  */
$file_path = tpl_path . $tpl_name . ".txt";
/* get text from file */
$template_content = file_get_contents($file_path);

echo $template_content;

Я думал, что должен перезагрузить страницу (что странно, потому что текст будет обновляться, пока я его не изменю), и изменил функцию show_tpl_in_textarea на

function show_tpl_in_textarea(content) {
   $("#licence_text").empty().append(content);
   location.reload();
}

но это приводит к циклу перезагрузки. Что я делаю не так?

Answer 1

Прочитав jquery-API и другие подобные вопросы, я наконец нашел ошибку. По какой-то причине .empty().append(content) не обновляет содержимое, если это изменилось, и не делает .html() или же .text() (даже когда API говорит что-то еще...). Единственное, что работает .val(content),