CODEWITHSUNDEEP
jqueryhtml.refresh
yangsunny
yangsunny

Reputation: 694

jquery refresh source code, but changes not shown in browser?

I am trying to write a small form, in which I will have 3 radiobuttons with names of 3 different templates(text-files). If one is chosen, the content of the text-file should be shown in a textarea below, and when I choose another one, the content in the textarea should be updated. So far, everything is working, I can choose and change between the templates and the text will be updated. BUT, when I change text in a template and then choose another template, text in the textarea will not be updated. However when I view source code of the text area part, I can see its changing when I click another radiobutton, just not in browser(need to press 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>

here is my 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);
}

and here is my 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;

I was thinking I should reload the page (which is strange because the text will be updated as long as I don't change it), and changed show_tpl_in_textarea funcion to 

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

but this results in a reload-loop. What do I do wrong?

Upvotes: 1

Views: 893

Answers (1)

yangsunny
yangsunny

Reputation: 694

After reading through jquery-APIs and other similar questions, I finally found the mistake. For some reason, .empty().append(content) doesnt update the content if this is changed, neither do .html() or .text() (even when API says something else...). The only thing working is .val(content).

Upvotes: 0

Related Questions