php page refresh not working after picture upload

Question

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.

I am uploading the file and updating my database like this:

$query="UPDATE users set image='".$username_db."_n.gif' where user_name='$username_db'";
mysqli_query($con,$query);

And after this I want a refresh code.

I have tried several ways to do so:

echo "<script type='text/javascript'>$('.display_picture_image').attr('src',    '".$src."?".time()."');<scipt>";
exit;

where .display_picture_image is the image tag where I want to display the picture.

echo "<meta http-equiv='refresh' content='0'>"
exit;

Then

header("Refresh:0");
exit();

Then

header("Location:".$_SERVER[REQUEST_URI]);
exit();

Then

header("Location:page_name.php");
exit();

Then

echo "<script type='text/javascript'>location.reload();</script>";

But nothing is working. What am I doing wrong?

I have a page: index.php. It contains the form which is self referencing form.

if(isset($_POST['submit'])
    include 'upload.php';

Once the picture is submitted, the code from from

upload.php

is executed. The picture is then uploaded and then

echo '<script type="text/javascript">$(window).on("load",function(){window.top.window.showcrop("'.$target_file.'","'.$username_db.'","'.$imageFileType.'");});</script>';

calls the function showcrop. in a js file which is linked in the header.

Then after the cropping area is selected and submitted this is executed:

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);
}

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.

You could do this client side when your database has been updated : http://stackoverflow.com/questions/5404839/how-can-i-refresh-a-page-with-jquery — Florian Motteau, Nov 13 '14 at 08:39
Post more code. Where do you run these refresh attempts after updating the picture? — Gerald Schneider, Nov 13 '14 at 09:15

score 2 · Answer 1 · answered Nov 13 '14 at 08:38

2

SERVER SIDE :

Note : Put below code after uploaded your file and updated your database :

  header("Refresh: 300;url='REDIRECTION URI'");

The browser will redirect after 300 seconds. It can be disabled in configuration of the browser though, but it's not commonly disabled.

CLIENT SIDE :

location.reload();

answered Nov 13 '14 at 08:38

I tried doing this: `echo "";` but it doesn't work. and header is not working either. – bayblade567 Nov 13 '14 at 09:16
@bayblade567,Try this : echo ""; Let me know if you still have any issues ! – Nov 13 '14 at 12:27
The echo statement is not getting executed at all because when I do inspect element, i see no such script and the page is not refreshing either. Do you think it is a logical error? – bayblade567 Nov 13 '14 at 12:35
echo statement not executed mean you have errors in your page,Please enable error reporting & check errors on your page first ! – Nov 13 '14 at 12:39
well...am using wamp server..so i can click on php and it shows me php error log. over there... – bayblade567 Nov 13 '14 at 14:07

score 0 · Accepted Answer · answered Nov 19 '14 at 20:07

Okay so I figured out the answer on my own. In my crop_photo.php file I have,

$.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
 }
});

Well in the above code, i mentioned nothing within

success:function(data){
//display the cropped photo
}

Though that is where php is gonna echo stuffs. So I edited that as,

success:function(data){
//display the cropped photo
$('#image_div').html(data);
}

By this whatever I echoed in php was put inside the division with id image_div. Then I echoed

echo '<script>window.location='redirectbackurl.php'</script>';

and it redirected to redirectbackurl.php which redirected back to the previous link. Code of my redirectbackurl.php

<?php
   header("Location:".$_SERVER['HTTP_REFERER']);
   exit();
?>

Now i understand, i could simply use location.reload(), but due to form re submission issues, i did this.

php page refresh not working after picture upload

2 Answers2