CODEWITHSUNDEEP
ajaxcakephpcakephp-2.0
Ronny vdb
Ronny vdb

Reputation: 2464

CakePHP: Rendering view after ajax

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

Upvotes: 5

Views: 9378

Answers (4)

Amit Jha
Amit Jha

Reputation: 331

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>

Upvotes: 0

Fury
Fury

Reputation: 4776

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);

Upvotes: 0

lethal-guitar
lethal-guitar

Reputation: 4519

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/

Upvotes: 2

jeremyharris
jeremyharris

Reputation: 7882

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);
    }
});

Upvotes: 5

Related Questions