Данные об успехе Ajax не добавляются при вызове функции дважды

Question

У меня есть библиотека в opencart для поворота изображения и сохранения в db. У меня есть кнопка поворота, которая запускает вызов ajax и после поворота и сохранения возвращает изображение и отображает его в соответствующем div.

При первом вызове он работает нормально, но при повторном щелчке он поворачивается и сохраняет изображение в БД, но не меняет вид в интерфейсе.

ЗДЕСЬ функция контроллера:

public function rotateImage(){
    $img_path = $this->request->get['image_path'];
    $degree = $this->request->get['degree'];
    $this->load->model('tool/image');
    $new_image = $this->model_tool_image->rotate($img_path, $degree);
    return $new_image;
}

Ajax Call:

<script>
   $('.image-rotate').click(function(){
   var id = $(this).attr('id');
   var image_path = $(this).attr('data-image-path');
   console.log(id);
   $("#image-"+id).empty();
   $.ajax({
       type: 'get',
       url: 'index.php?route=catalog/review/rotateImage&token=<?php echo $token; ?>&image_path='+image_path+'&degree=90',
       dataType: 'html',
       success: function(html) {
           var image = "<a data-fancybox='' href='"+html+"' class='fancybox'><img id='r_image_"+id+"' src='"+html+"' alt='photo' width='100' /></a>";

           $("#image-"+id).html(image);
       },
       error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
       }
   });
});
</script>

Библиотека:

public function rotate($file, $degree) {
    $old_image = $file;

    $extension = pathinfo($file, PATHINFO_EXTENSION);
    $new_image = 'cache/' . utf8_substr($file, 0, utf8_strrpos($file, '.')) . '-' . '600x600.' . $extension;

    $image = new Image(DIR_IMAGE . $old_image);
    $image->rotate($degree);
    $image->save(DIR_IMAGE . $old_image);
    if ($this->request->server['HTTPS']) {
        return HTTPS_CATALOG . 'image/' . $old_image;
    } else {
        return HTTP_CATALOG . 'image/' . $old_image;
    }
}

Все отлично работает, но только при первом вызове, после этого изменяются только данные бэкэнда (изображение повернутоуспешно), но вид спереди не меняется.

Если вам нужно больше подробностей, плз комнет.

Answer 1

Я нашел решение ...

Браузеру нужны новые ссылки для отображения всегда (без обновления), поэтому я просто добавил случайное число со ссылкой на изображение в html-данных ajax success ...

 var image = "<a data-fancybox='' href='"+html+"' class='fancybox'><img id='r_image_"+id+"' src='"+html+"?"+Math.random()+"' alt='photo' width='100' /></a>";

Кроме того, я изменяю return $new_image контроллера, чтобы он возвращал jsono_encode bcz ajax-запрос, требующий ответа json (может быть, я не прав, но это то, что у меня сработало).