使用cakePHP 1.3中的jquery AJAX将数组返回到视图目标div

时间:2012-11-01 17:49:49

标签: php ajax jquery cakephp-1.3

在cakePHP 1.3中使用jQuery AJAX时,AJAX响应包括完整的布局,而不仅仅是包含模型中数据集的数组。如何防止整个页面被渲染?我试过使用$ this-> autoRender = false;和$ this-> layout ='ajax',但这并没有解决问题。它在返回的数据中没有产生任何响应。

我的控制器操作是:

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

我的观点是:

      <!-- 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>

谢谢!

2 个答案:

答案 0 :(得分:2)

我不太了解你的问题,但是这可以帮助你在没有完全回应布局的情况下显示你的视图。

把它放在视图中的javascript上,

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

然后使用以下代码作为控制器,

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

答案 1 :(得分:0)

我建议让另一个函数执行结果并渲染它们。创建一个名为update_results的函数。以下示例假定您具有请求处理程序和jquery。

简单示例:

//控制器

function search()
{

    //search filters
    $locations = $this->Event->Location->find('list',array('order'=>'Location.name'));


    //set vars for view
    $this->set(compact( 'locations'));

}//search

function update_results()
{       

    //location filter
    if(!empty($this->data['Event']['location_id']))
        $conditions['Event.location_id']=$this->data['Event']['location_id'];


    $results=$this->Event->find('all',array('conditions'=>$conditions,'limit'=>15));
    //debug($conditions);

    $this->set('results',$results);


}//update result

//浏览

// search.ctp

<?php echo $form->create('Event',array('action'=>'search')); 


            echo $this->Form->input('Event.location_id', array('label'=>'Location','empty'=>TRUE));


            echo $js->submit('Find Trainings', array('update' => '#trainingresults','url'=> array('controller'=>'events', 'action'=>'update_results')));


            echo $form->end(); ?>

    <?php 
        echo $html->div('trainingresults',null,array('id'=>'trainingresults'));
        echo '</div>';
    ?>

// update_results.ctp

<?php
    $timestamp=date('r');
    echo "<h4>Search Results ($timestamp)</h4><br/>";
    if(empty($results))
    {
        echo "<p class='well'><strong>No Trainings found. Try different search criteria.</strong></p>";
    }
    else
    {

            foreach($results as $display)
            {
                //Event Info
                    $location=$display['Location']['name'];

                     echo $location;


            }//for

    }//else

?>