CakePHP: Rendering view after ajax - ajax

Question

I am building an app in CakePHP and I have a jquery dialog window and every time the user opens it I want to perform a jquery request that will populate the content with the result of the request.
I have an js file that is in the webroot/js folder, with the following script:
$.ajax({
url:'/projects/getAssets',
type:"POST",
data:assetData,
//dataType:'text',
update: '#assetManagerContent'
});
In my controller file (ProjectsController) I have the following function:
function getAssets($id = null) {
// Fill select form field after Ajax request.
if(!empty($this->data)){
$this->set('assetsFilter',
$this->Project->Asset->find('list',
array(
'conditions' => array(
'Asset.project_id' => '23'
)
)
)
);
$this->render('elements/assets', 'ajax');
}
}
And finally I have the view (elements/assets):
<?php $assetsFilter = $this->requestAction('projects/getAssets'); ?>
<?php foreach($assetsFilter as $assetFilter): ?>
<div class="assetManager-asset">
<div class="thumb"></div>
<div class="label-name"><?php echo $assetFilter['AssetType']['type'] ?></div>
<div class="label-date"><?php echo $assetFilter['Asset']['layer'] ?></div>
<?php //echo $assetFilter['Asset']['id'] ?>
</div>
<?php endforeach; ?>
When the user opens the dialog the ajax request is triggered but nothing seems to happen in the #assetManagerContent div.
I hope someone can tell me what I am doing wrong

Answer 1

As far as I know, there is no update option in the jQuery ajax api. Instead, you should add the success callback and populate the data there:
$.ajax({
url:'/projects/getAssets',
type:"POST",
data:assetData,
//dataType:'text',
success: function(data) {
$('#assetManagerContent').html(data);
}
});

Answer 2

There is no update-option, just as jeremyharris already pointed out.
If you only want to fill an element with HTML loaded via AJAX, you can also use $.load():
$('#assetManagerContent').load('/projects/getAssets', assetData);
It's basically a shorthand for the corresponding $.ajax() call, and will automatically issue a POST request if the data parameter is present.
See: http://api.jquery.com/load/

Answer 3

to make your action faster, cleaner and reusable you could write it this way.
function getAssets($id = null) {
// Fill select form field after Ajax request.
if(!empty($this->data)){
return $this->Project->Asset->find('list',
array(
'conditions' => array(
'Asset.project_id' => '23'
)
)
);
}
}
Ajax
$.ajax({
url:'/projects/getAssets/'+id,
type:"POST",
success: function(data) {
$('#assetManagerContent').html(data);
}
});
OR
$('#assetManagerContent').load('/projects/getAssets/'+id);

Answer 4

It works but shows result in text mode.
e.g.
<form action="/amit/tour-writer/derivedItineraries/getHotelDetail/1230"
id="DerivedItineraryGetHotelDetailForm" method="post" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST"/>
</div>
<div class="required"><label for="DerivedItineraryInclusion">Inclusion</label>
<textarea name="data[DerivedItinerary][inclusion]" class="ckeditor"
required="required" style="width:200px;" cols="30" rows="6"
id="DerivedItineraryInclusion">Test data</textarea></div></td></tr>
</form>