0

.ctpページ全体をリロードせずに ajax 投稿を実現し、要素のみをレンダリングできるように、ファイルを要素に配置した小さな検索機能を作成しています。

この要素は非常に単純でli、コントローラーから渡されたリクエスト データを使用してアイテムを作成します。

<li class="span2">
<a  class="pull-left" href="">
    <img  class="media-object" src="<?php $img_path = $result['Person']['profile_image']; echo $img_path;?>">
</a>
<div class="media-body">
    <label class="person-media">
        <?php
        $firstName = ucfirst($result['Person']['first_name']);
        $lastName = ucfirst($result['Person']['last_name']);

        echo $firstName;
        echo "<br>";
        echo $lastName;
        ?>
    </label>
</div>

私の検索アクションでは、スケルトン全体 (ヘッダー、フッター、検索 div ホルダー) を保持し、順序付けされていないリストのリスト項目をレンダリングするだけです。ただし、検索をクリックすると、ページ全体が読み込まれます

ここで私はデータを設定しようとしています

//transform POST into GET
    if($this->request->is("post")) {
        $url = array('action'=>'manage');
        $filters = array();

        if(isset($this->data['searchFor']) && $this->data['Search.name']){
            //maybe clean up user input here??? or urlencode??
            $filters['Search.name'] = $this->data['Search.name'];
        }
        //redirect user to the index page including the selected filters
        $this->redirect(array_merge($url,$filters));
    }

    $conditions = array();
    //
    // filter by name
    //
    if(isset($this->passedArgs['Search.name'])) {
        $conditions["Person.first_name LIKE"] = "%".$this->passedArgs["Search.name"]."%";

    }
    //paginate as normal
    $this->paginate = array(
        'conditions' => $conditions,
        'order' => array('Person.first_name ASC'),
        'limit' => 12
    );
    $this->layout = "main";
    $this->set("results",$this->paginate("Person"));
    **$this->render('manage');** // rendering on the element loads everything

クエリから結果を見つけた後、manage.ctp はすべてを読み込みます。

  </div>
<ul id="students-list" class="students-ist">
   <?php

    if(!empty($results)){

        foreach($results as $result){
            echo $this->element('singleuser', array('result' => $result));
        }
    }

    ?>

</ul>

Ajax とフォーム送信を使用して、検索のたびにページ全体をリロードせずに div 内の要素だけを読み込むにはどうすればよいですか。

4

1 に答える 1

1

There are several ways to get part of a full page from server and place only parts of it into page in browser.

Following is submit handler for search form that will make AJAX call. WIthin the AJAX complete callback will replace student list items with new ones

/* place code in script tag or external file after jQuery.js loads*/
$(function(){
    /* adjust selector to match ID of form*/
    $('#searchForm').submit(function(){
          /* sends form data retrieved in php as if form submitted through browser defalt method*/
           /* "this" is the form, serialize will formencode all fields in form*/
          var dataToServer=$(this).serialize();
          $.get( 'pageUrl.php', dataToServer, function(response){
                /* AJAX has returned page, "response" is the full html of page*/
               /* get the items from list from response*/
                var studentListItems= $(response).find('#students-list').html();

                /* replace the list items in active page*/
                $('#students-list').html(studentListItems);

           });
       /* prevent form default submit*/
       return false;
    });

})

Once you get Cake controller returning just the LI's you want, you can dump response straight into the list:

$('#students-list').html(response);
于 2012-12-25T03:22:33.010 に答える