jquery ui的“selectable” - 需要调用codeigniter模型函数

Question

（原始问题）我正在使用 jquery ui 的可选脚本来控制我的 webapp 中的特定活动关键字。在此处查看：www.rickymason.net/letschat/main/home 供参考

我对 javascript 的经验很少，我正在尝试弄清楚如何启动我在主模型中拥有的功能。

根据答案更新函数：

我已更新我的代码以支持新的 JSON/AJAX 格式。这需要我创建一个活动/非活动会话过滤器，以便用户可以正常添加过滤器，并始终使用 AJAX 更新线程列表。这对我来说更有意义。

这是我目前拥有的代码，但仍然无法正常工作。我试图做到这一点，因此当用户单击可选类别（通过 Jquery UI）时，与选择关联的 divID 通过 AJAX 传递并返回一个线程列表数组，该数组更新 div id =“board”。

这是我当前的控制器设置：

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

这是我当前的视图代码：

应用程序/main/json_view.php

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

应用程序/main/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;
?>