jquery ui的“可選” - 需要調用codeigniter模型函數

Question

（原始問題）我使用jquery ui的可選腳本來控制我的webapp中的特定活動關鍵字。 在此處查看： www.rickymason.net/letschat/main/home以供參考

我對javascript的經驗很少，我想弄清楚如何在我的主模型中啟動一個函數。

根據答案更新功能：

我已更新我的代碼以支持新的JSON / AJAX格式。 這需要我創建一個活動/非活動會話過濾器，以便用戶可以正常添加過濾器，並始終使用AJAX來更新線程列表。 這對我來說更有意義。

這是我目前的代碼，但仍然無效。 我試圖在用戶單擊可選類別（通過Jquery UI）時這樣做，與選擇關聯的divID通過AJAX傳遞並返回更新div id =“board”的threadlist數組。

這是我當前的Controller設置：

public function home($page = 'home')
    {
        $data['user_id'] = $this->tank_auth->get_user_id();
        $data['username'] = $this->tank_auth->get_username();
        $data['threads'] = $this->thread_model->session_load();
        $data['title'] = ucfirst($page); // Capitalize the first letter
        $data['page'] = $page;
        $this->load->view('templates/head', $data);
        $this->load->view('templates/nav', $data);
        $this->load->view('main/newthread', $data);
        $this->load->view('main/addfilter', $data);
        $this->load->view('main/checkbox', $data);
        $this->load->view('main/displayfilter',$data);
        $this->load->view('main/board', $data);
        $this->load->view('templates/footer');
    }

    public function updatefilters($filters)
    {
        $filterarray = split("|", $filters);
        $this->thread_model->create_session_filter($filterarray); 
        $threadarray = $this->thread_model->get_threads();
        $data['json'] = '{"content":' + $threadarray + '}';
        $this->load->view('json_view', $data); // See step 4!!!
    }

這是我目前的型號代碼：

    public function get_threads()
    {
            $filter = $this->session->userdata('filter');
            $num_tags = count($filter);
            if ($num_tags > 0 && $num_tags <= 8) {
                $sql_select = "SELECT DISTINCT t.* ";
                $sql_from = " FROM ";
                $sql_where = " WHERE ";
                $sql_joins = "";
                $sql_order = "ORDER BY t.timestamp DESC";
                for ($i=0;$i<$num_tags;++$i) {
                    if ($i==0) {
                    $sql_from .= " filter AS f ";
                    $sql_where .= " f.tag LIKE '%" . $filter[0] . "%'";
                    $sql_joins .= " INNER JOIN filter_thread AS ft ON ft.filter_id = f.filter_id
                                    INNER JOIN thread AS t ON ft.thread_id = t.thread_id";
                    }
                    else {
                    $sql_where .= " OR f.tag LIKE '%" . $filter[$i] . "%'";
                    }
                }
            } else {
                break; 
            }
            $sql = $sql_select . $sql_from . $sql_joins . $sql_where . $sql_order;

            $query = $this->db->query($sql);
            $thread = $query->result_array();
        return json_encode($thread); //I am aware this is not correct
    }

    public function create_session_filter($filterstring)
    {
        $filterarray[] = $filterstring;
        $filter['filter'] = $filterarray;
        if ($this->session->userdata('filter') == TRUE) {
            $sessionfilter = $this->session->userdata('filter');
            $new = array_merge($sessionfilter, $filter['filter']);
            $this->session->unset_userdata('filter');
            $filter['filter'] = $new;
            $this->session->set_userdata($filter);
        } else {
            if (!$filterstring) {} else {
            $this->session->set_userdata($filter);
            }
        }
    }

    public function create_session_inactive_filter($filterstring)
    {
        $filterarray[] = $filterstring;
        $filter['inactivefilter'] = $filterarray;
        if ($this->session->userdata('inactivefilter') == TRUE) {
            $sessionfilter = $this->session->userdata('inactivefilter');
            $new = array_merge($sessionfilter, $filter['inactivefilter']);
            $this->session->unset_userdata('inactivefilter');
            $filter['inactivefilter'] = $new;
            $this->session->set_userdata($filter);
        } else {
            if (!$filterstring) {} else {
            $this->session->set_userdata($filter);
            }
        }
    }

這是我當前的查看代碼：

應用/主/ json_view.php

<?php
header("Content-Type: application/json");
echo $json;
?>

aplication /主/ bdisplayfilter.php

<script>
    $(function() {
        $( "#selectable" ).selectable({
            selected: updateFilters,
            unselected: updateFilters
        });
        function updateFilters(ev, ui){    
        alert ("hello");
        // get the selected filters
        var $selected = $('#selectable').children('.ui-selected');
        // create a string that has each filter separated by a pipe ("|")
        var filters = $selected.map(function(){return this.id;}).get().join("|");
        $.ajax({
            url: '/main/updateFilters', //see step 2
            data: { filters: filters },
            success: function(data){
                // data is whatever json you decide to return from the server.
                // An easy way to do things is have data look like this:
                // { content: "<div>All my new threads that I want to show up</div>" }
                // then, you can replace some element on the page with the new content
                // For example, say your container has an id of threadContainer:
                $('#select').replaceWith(data.content);
            }
        }); }
    });
</script>
<ol id="selectable">
    <li class="ui-state-default" id="everything">Everything!</li>
    <li class="ui-state-default" id="entertainment">Entertainment</li>
    <li class="ui-state-default" id="sci/tech">Sci/Tech</li>
    <li class="ui-state-default" id="news">News</li>
    <?php 

    if ($this->session->userdata('inactivefilter') == true) {
            $inactivefilter = $this->session->userdata('inactivefilter');
            foreach ($inactivefilter as $new)
                {
                    echo "<li class='ui-state-default' id='custom'>$new</li>";
                }
        }
    ?>
</ol>
<?php
if ($this->session->userdata('inactivefilter') == true) {
echo "<form action='".base_url()."main/clear_filter'><input type='submit' value=clear></form>";
} ?>

Answer 1

編輯：我已經更新了ajax調用的url和數據部分，並添加了一個額外的步驟來啟用查詢字符串參數。

1）進行AJAX調用

您將需要對選定和未選擇的呼叫進行相同的呼叫，因為您可以擁有多個過濾器，並且您需要相應地更新這兩個事件。 所以，我將定義一個兩個事件都可以調用的公共函數。

$(function() {
    $( "#selectable" ).selectable({
        selected: updateFilters,
        unselected: updateFilters
    });   
    function updatefilters(ev, ui){
        // get the selected filters
        var $selected = $('#selectable').children('.ui-selected');
        // create a string that has each filter separated by a pipe ("|")
        var filters = $selected.map(function(){return this.id;}).get().join("|");
        $.ajax({
            url: '/index.php',
            data: { c: main, m: updateFilters, filters: filters },
            success: function(data){
                // data is whatever json you decide to return from the server.
                // An easy way to do things is have data look like this:
                // { content: "<div>All my new threads that I want to show up</div>" }
                // then, you can replace some element on the page with the new content
                // For example, say your container has an id of threadContainer:
                $('#threadContainer').replaceWith(data.content);
            }
        });
    }
});

2）在application / config.php中啟用查詢字符串參數

本文底部的“啟用查詢字符串”一節介紹了如何執行此操作： http ： //codeigniter.com/user_guide/general/urls.html

3）創建將接收過濾器的操作

請注意，我正在使用一個名為Page的控制器（它將存在於/application/controllers/page.php中）。 此操作（updateFilters）可以存在於您想要的任何控制器中。

class Page extends CI_Controller {

    function __construct()
    {
        parent::__construct();
    }

    function index()
    {
    }

    function updateFilters($filters)
    {
        $filterarray = split("|", $filters);
        create_session_filter($filterarray); 

        $articlesHTML = getThreadList($filterarray); // See step 4!!!
        $data['json'] = '{"content":' + $articlesHTML + '}';
        $this->load->view('json_view', $data); // See step 5!!!
    }

    /* I've updated this slightly to accept an array */
    public function create_session_filter($filterarray)
    {
        $filter['filter'] = $filterarray;
        //... the rest of your stuff you already had
    }
}

4）實現getThreadList方法

如果你已經為此設置了一些東西，我認為你沒有提到過。 這將基本上采用一組過濾器，然后基於此呈現線程列表。

5）創建json_view（如果還沒有）

這將設置內容類型，以便瀏覽器知道內容是json。

在/application/views/json_view.php中：

<?php
header("Content-Type: application/json");
echo $json;
?>