CakePHP: Обновление содержимого DIV с использованием AJAX

Question

У меня есть таблица, в которой я загружаю внешний файл php [name # settings_profile.php] внутри файла settings.ctp.

Фрагмент кода из settings.ctp

<table> 
    <tr> 
     <td rowspan="2" id="upload-response-message"> 
      <?php include("settings_profile.php"); ?> 
     </td> 
    </tr> 
</table> 

settings_profile.php

<?php 

$image_path = $user['User']['image_path']; 
if (!empty($image_path)) { 
    echo $this -> Image -> resize($image_path, 100, 200); 
}else{ 
    echo 'EMPTY' ; 
} 
?> 

Выходной сигнал от settings_profile.php формируется следующим образом [копируется из исходного кода]

<table> 
    <tr> 
     <td rowspan="2" id="upload-response-message"> One 
      <img src="/dearmemoir/uploads/resized/image.jpg" alt="thumb" /> 
     </td> 
    </tr> 
</table> 

Содержимое $user['User']['image_path'] обновляется с помощью вызова контроллера с помощью AJAX, и я пытаюсь перезагрузить setting_profile.php файл внутри таблицы, используя -

function showUploadResponse(data) { 
     alert (data.status); 
     if(data.status == 1) { 
     $("#upload-response-message").load("settings_profile.php #upload-response-message");  
     } 

    } 

Но содержание никогда не обновляется на странице. Любая помощь?

Answer 1

Вы нарушаете положения парадигмы MVC и CakePHP, делая это. Если вы включаете внешний php-файл в представление, которое не является помощником CakePHP, вы делаете что-то неправильно.

Если это все, то есть settings_profile.php, а затем удалите его и переместите функциональность либо на контроллер, либо на компонент. Затем назначьте изображение переменной, которая будет передана в представление.

Если вы используете Ajax для последующего обратного вызова на сервер, ваша страница никогда не будет перезагружена, чтобы снова включить вызываемый код в вашем представлении. Вместо этого передайте информацию об измененном изображении обратно в файл javascript и обновите таблицу через javascript.

//Pseudo Code 

//Page is Loaded 

//Ajax call made back to the server to resize the image 
//Server resizes the image and sends the new image src back to the script 
{Image:{name: "newImage", src: "/dearmemoir/uploads/resized/image1.jpg"}} 
var returnedData = resultsFromAjax; 

//Use javascript to update the image 
var imgElement = document.getElementById('ProfileImageId').setAttribute("src", returnedData.Image.src); 

Это должно обновить изображение!