title: how to recalculate php varaible and send back via ajax
body: <p>For a flat-file voting system, i use this php (in <code>index.php</code>) to calculate the counts:</p>
  
  <pre><code>$rating_file = 'rating/'.$file_id.'.txt'; // path to text rating_file that stores counts
  $all_lines = file($rating_file, FILE_IGNORE_NEW_LINES);
  
  foreach($all_lines as $line) {
      list($item, $num) = explode('||', $line);
      $count[$item] = $num;
  }
  if(array_sum($count) != 0){
      $avg = number_format(($count['star-1']*1 + $count['star-2']*2 + $count['star-3']*3 +    $count['star-4']*4 + $count['star-5']*5) / array_sum($count),2,'.','');
      $intVal = intval($avg);
      $round = ($avg - $intVal &lt; .5) ? $intVal : round($intVal).'.5';
  } 
  else {
      $avg = $round = 0;
  }
  </code></pre>
  
  <p>My html in <code>index.php</code> looks like this:</p>
  
  <pre><code>&lt;div class="rating" data-rating="&lt;?php echo $round;?&gt;"&gt;
      &lt;div class="rating-stars float-left" data-id="&lt;?php echo $file_id; ?&gt;"&gt;
          &lt;a href="#5" class="click-trigger star-5" data-value="star-5" title="Vote 5 stars"&gt;&amp;#x2605 &lt;/a&gt;
          &lt;a href="#4" class="click-trigger star-4" data-value="star-4" title="Vote 4 stars"&gt;&amp;#x2605 &lt;/a&gt;
          &lt;a href="#3" class="click-trigger star-3" data-value="star-3" title="Vote 3 stars"&gt;&amp;#x2605 &lt;/a&gt;
          &lt;a href="#2" class="click-trigger star-2" data-value="star-2" title="Vote 2 stars"&gt;&amp;#x2605 &lt;/a&gt;
          &lt;a href="#1" class="click-trigger star-1" data-value="star-1" title="Vote 1 star"&gt;&amp;#x2605 &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="rating-votes float-right"&gt;
          Avg: &lt;?php echo $avg;?&gt; Votes: &lt;?php echo array_sum($count);?&gt;
      &lt;/div&gt;              
  &lt;/div&gt;
  </code></pre>
  
  <p>I send the value with ajax to php file: <code>counter.php</code></p>
  
  <pre><code>$('.click-trigger').on('click', function(e) {
      e.preventDefault();
  
      let $star = $(this);
      let $container = $star.closest('.rating-stars');
      $.ajax({
          url: 'counter.php',
          type: 'POST',
          data: { 
                  value: $star.data('value'),
                  file_id: $container.data('id')      
              },
          success: function(data){
              $container.next('.rating-votes').html(data);
  
          }
      });
  
  });
  </code></pre>
  
  <p>Part of code in <code>counter.php</code></p>
  
  <pre><code>......
  $round = ($avg - $intVal &lt; .5) ? $intVal : round($intVal).'.5';
  
  // sent back to page
  echo 'Avg: '.number_format($avg,2,'.','').' Votes: '.array_sum($count); 
  </code></pre>
  
  <p>To refresh the html, it needs the new value of variable <code>$round</code>, which is in <code>counter.php</code>. 
  How can i refresh the html code ( div with the stars) in index.php without doing a hard refresh?</p>