title: php page refresh not working after picture upload
body: <p>How can I refresh the page automatically after the user is done uploading profile picture? 
  Well the picture gets updated once the user refreshes the page but I want to force refresh the page on its own.</p>
  
  <p>I am uploading the file and updating my database like this: </p>
  
  <pre><code>$query="UPDATE users set image='".$username_db."_n.gif' where user_name='$username_db'";
  mysqli_query($con,$query);
  </code></pre>
  
  <p>And after this I want a refresh code.</p>
  
  <p><strong>I have tried several ways to do so:</strong> </p>
  
  <pre><code>echo "&lt;script type='text/javascript'&gt;$('.display_picture_image').attr('src',    '".$src."?".time()."');&lt;scipt&gt;";
  exit;
  </code></pre>
  
  <p>where <strong>.display_picture_image</strong> is the image tag where I want to display the picture.</p>
  
  <pre><code>echo "&lt;meta http-equiv='refresh' content='0'&gt;"
  exit;
  </code></pre>
  
  <p>Then</p>
  
  <pre><code>header("Refresh:0");
  exit();
  </code></pre>
  
  <p>Then </p>
  
  <pre><code>header("Location:".$_SERVER[REQUEST_URI]);
  exit();
  </code></pre>
  
  <p>Then </p>
  
  <pre><code>header("Location:page_name.php");
  exit();
  </code></pre>
  
  <p>Then</p>
  
  <pre><code>echo "&lt;script type='text/javascript'&gt;location.reload();&lt;/script&gt;";
  </code></pre>
  
  <p>But nothing is working. What am I doing wrong?</p>
  
  <p>I have a page: index.php. It contains the form which is self referencing form. </p>
  
  <pre><code>if(isset($_POST['submit'])
      include 'upload.php';
  </code></pre>
  
  <p>Once the picture is submitted, the code from from </p>
  
  <pre><code>upload.php
  </code></pre>
  
  <p>is executed. The picture is then uploaded and then </p>
  
  <pre><code>echo '&lt;script type="text/javascript"&gt;$(window).on("load",function(){window.top.window.showcrop("'.$target_file.'","'.$username_db.'","'.$imageFileType.'");});&lt;/script&gt;';
  </code></pre>
  
  <p>calls the <strong>function showcrop.</strong> in a js file which is linked in the header.</p>
  
  <p>Then after the cropping area is selected and submitted this is executed:</p>
  
  <pre><code>function crop_photo() {
     var x_ = $('#x').val();
     var y_ = $('#y').val();
     var w_ = $('#w').val();
     var h_ = $('#h').val();
     var photo_url_ = $('#photo_url').val();
     var username_ = $('#username').val();
     var fileTypeImage_ = $('#imageFileType').val();
  
     // hide thecrop  popup
     $('#popup_crop').hide();
  
     // display the loading texte
    // crop photo with a php file using ajax call
    $.ajax({
       url: 'crop_photo.php',
       type: 'POST',
       data: {x:x_, y:y_, w:w_, h:h_, photo_url:photo_url_, username:username_,     fileTypeImage:fileTypeImage_, targ_w:TARGET_W, targ_h:TARGET_H},
       success:function(data){
       // display the croped photo
     }
     });
   }
  
  // updateCoords : updates hidden input values after every crop selection
  function updateCoords(c) {
     $('#x').val(c.x);
     $('#y').val(c.y);
     $('#w').val(c.w);
     $('#h').val(c.h);
  }
  </code></pre>
  
  <p>Then the crop.php is executed which uploads the cropped picture and updates the database. In the end, the refresh code is written but doesn't work.</p>