0

I'm currently using this: https://stackoverflow.com/a/24312826/1654748 to rotate my images.

I'm also using header('Location: url.php'); to redirect to the previous page, but the problem is, only about 30% of the time it reloads the rotated image.

The way I display the images is like this: 

$result = mysql_query("SELECT * FROM `media` ORDER BY `id` DESC") or die(mysql_error());

while($row = mysql_fetch_array($result)) {
  echo '<div class="col-lg-3 imgauto">';
  echo '<div class="imagepad">';
  echo '<img src="uploads/'.$row['image'].'">';
  echo '</div>';
  echo '<a href="deletemedia.php?id='.$row['id'].'" data-href="deletemedia.php?id='.$row['id'].'" class="btn btn-danger imagecontrols imgdel" data-toggle="confirmation"><i class="fa fa-close"></i></a>';
  echo '<a href="#" class="btn btn-warning imagecontrols imgedit" data-toggle="modal" data-target="#myModal" href="#"><i class="fa fa-edit"></i></a>';
  echo '<form action="rotateimage.php" method="post">';
  echo '<input name="image" type="hidden" value="uploads/'.$row['image'].'">';
  echo '<button name="save" type="submit" class="btn btn-warning imagecontrols imgrotate"><i class="fa fa-rotate-right"></i></button>';
  echo '</form>';
  echo '</div>';
}

Is it possible to acheive the form action rotateimage.php without a page refresh, and reload the modified image with AJAX?

Community
  • 1
  • 1
Eddie
  • 337
  • 3
  • 17
  • Just a side note, you don't have to do 1 echo per line of code, you can write, for example `echo '
    ';`
     – ctwheels Jan 06 '15 at 06:56
  • Thanks for your input, I know it can be done like that, and that my way is the long way around, but I like the way it looks, haha. – Eddie Jan 06 '15 at 06:58

1 Answers1

0

Put the form or button inside your main .php page (i.e. index.php) and the function that rotates the image and saves it in a separate php file (i.e. rotateImage.php) then use an ajax call to call rotateImage.php

$("#flipPicture").click(function()
{
    $.ajax({
        type:"POST",
        data{postVar:myVar}, //includes whatever variables you want to pass to your rotateImage.php page
        url:"rotateImage.php",
        success: function(data)
                 {
                     $("#imgContainer").html(data);
                 }
    });
});

where #flipPicture points to the id of the (say a button) element that rotates the picture and "data" is whatever your rotateImage.php echo's (your image flipped) and "#imgContainer" is the container for which the image will be placed (code from rotateImage.php)

ctwheels
  • 21,901
  • 9
  • 42
  • 77
  • Thanks for your answer. Unfortunately rotateimage.php is just to rotate it, it's basically this; stackoverflow.com/a/24312826/1654748 - it doesn't show an output at all, the results are loading inside the main page with the query I posted above – Eddie Jan 06 '15 at 07:17
  • So are you looking to refresh the image but not the entire document? If so you can use the `.load()` function http://api.jquery.com/load/ – ctwheels Jan 06 '15 at 07:29
  • How would I go about using the .load function after an AJAX submit? – Eddie Jan 06 '15 at 12:02
  • Try loading the picture again? use load to load the picture or use success in your ajax function to reload it, not exactly sure. Maybe try the load function in the success? – ctwheels Jan 06 '15 at 22:13