Question

When using jQuery AJAX in cakePHP 1.3, the AJAX response includes the full layout rather than just the array with dataset from the model. How to I prevent this whole page from being rendered? I have tried to use $this->autoRender = false; and $this->layout = ‘ajax’, but this did not solve the problem. It actaully produced no response in the returned data.

My controller action is:

    public function search() {
    if (empty($this->data)) {
    } else {
        // $this->autoRender = false;
        // $this->layout = 'ajax';
        $request = $this->data;
        $this->set('data', $this->Event->search($request['Event']['search']), 'host');
    }  
}

And my view is:

      <!-- app/views/events/search.ctp -->

<h1>Corporate Events</h1> 

<form method="post" action="search">
    <input type="text" name="search" id="search_box" class='search_box'/>
    <input type="submit" value="Search" class="search_button" /><br />
</form>

<p><?php echo $html->link("Add Event", "/events/add"); ?> 

<table> 
    <tr> 
        <th style='width:100px'>Id</th> 
        <th style='width:100px'>Title</th> 
        <th style='width:100px'>Host</th> 
        <th style='width:100px'>Description</th> 
        <th style='width:100px'>Action</th> 
    </tr> 

<div id= "results"></div>

<?php foreach ($data as $event): ?> 
    <tr> 
        <td><?php echo $event['id']; ?></td> 
        <td> 
            <?php echo $html->link($event['event_title'],'/events/view/'.$event['id']);?> 
        </td> 
        <td><?php echo $event['host']; ?></td> 
        <td><?php echo $event['description']; ?></td> 
        <td> 
            <?php echo $html->link( 
                'Delete',  
                "/events/delete/{$event['id']}",  
                null,  
                'Are you sure?' 
            )?> 
            <?php echo $html->link('Edit', '/events/edit/'.$event['id']);?> 
        </td> 
    </tr> 
<?php endforeach; ?> 

</table> 

<script type="text/javascript">

$(function() {

    $(".search_button").click(function() {
        var searchString    = $("#search_box").val();
        var data = {'data[Event][search]':searchString};

        if(searchString) {

            $.ajax({
                type: "POST",
                url: "/events/search",
                data: data,
                beforeSend: function(html) { // this happens before actual call
                    $("#results").html('');
                    $("#searchresults").show();
                    $(".word").html(searchString);
                },
                success: function(html){ // this happens after we get results
                    $("#results").show();
                    $("#results").append(html);
                }
            });    
        }
        return false;
    });
});
</script>

Thanks!

Answer 1

I don’t understand your question well, but this will help you with displaying to your view without the layout being echoed wholly.

Put this on the javascript inside the view,

<script type="text/javascript">

$(function() {

    $(".search_button").click(function() {
        var searchString    = $("#search_box").val();

        if(searchString) {

            $.ajax({
                url: "/events/search/" + searchString,
                beforeSend: function() { // this happens before actual call
                    $("#results").html('');
                    $("#searchresults").show();
                    $(".word").html(searchString);
                },
                success: function(data){ // this happens after we get results
                    $("#results").show();
                    $("#results").append(data);
                }
            });    
        }
        return false;
    });
});
</script>

Then use the code below for your controller,

public function search($data=null) {
    $this->autoRender = false;
    //your code here;
    return $data;
}