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