Question

我正在尝试编写一个小表单，其中我将有3个radiobuttons，其名称为3个不同的模板（文本文件）。如果选择了一个，则文本文件的内容应显示在下面的textarea中，当我选择另一个时，应更新textarea中的内容。到目前为止，一切正常，我可以在模板之间进行选择和更改，文本也会更新。但是，当我更改模板中的文本然后选择另一个模板时，textarea中的文本将不会更新。但是当我查看文本区域部分的源代码时，我可以看到它在我点击另一个单选按钮时的变化，而不是在浏览器中（需要按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 funcion更改为

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

但这会导致重新加载循环。我做错了什么？

Answer 1

在阅读了jquery-APIs和其他类似问题之后，我终于找到了错误。出于某种原因，.empty().append(content)如果更改了内容，则不会更新内容，.html()或.text()（即使API说的是其他内容......）也不会。唯一有效的是.val(content)。

jquery刷新源代码，但是浏览器中没有显示更改？

1 个答案: