CakePHP: Updating DIV content using AJAX - cakephp

Question

I have a table where I load an external php file[name # settings_profile.php] inside settings.ctp file.
Code snippet from 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' ;
}
?>
The output from settings_profile.php is generated as follows [copied from source code]
<table>
<tr>
<td rowspan="2" id="upload-response-message"> One
<img src="/dearmemoir/uploads/resized/image.jpg" alt="thumb" />
</td>
</tr>
</table>
The contents of $user['User']['image_path'] are updated by calling Controller using AJAX and I am trying to reload setting_profile.php file inside the table using -
function showUploadResponse(data) {
alert (data.status);
if( data.status == 1 ) {
$("#upload-response-message").load("settings_profile.php #upload-response-message");
}
}
But the content was never updated in the page. Any help?

Answer 1

You are breaking the MVC paradigm AND CakePHP conventions by doing this. If you are including an external php file in a view that is not a CakePHP helper, then you are doing something wrong.
If that is all there is to settings_profile.php, then delete it and move the functionality to either a controller or a component. Then assign the image to a variable that gets passed to the view.
If you are using Ajax to then make a call back to the server, then your page will never be reloaded in order for the included code in your view to be called again. Instead, pass the information about the resized image back to your javascript file and update the table through 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);
That should update your image!