2012-05-04 18 views
1

(元の質問)私はwebappの特定のアクティブなキーワードを制御するためにjquery UIの選択可能なスクリプトを使用しています。ここをクリックしてください:www.rickymason.net/letschat/main/home参考用jquery uiの "selectable" - codeigniterモデル関数を呼び出す必要があります

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

そして、ここに私の現在のビューのコードです:

アプリケーション/メイン/ 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>"; 
} ?> 

答えて

3

編集:私は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)/ config.phpのこの記事の下部にあるクエリ文字列を有効にすると呼ばれるセクションはそれを行う方法について説明し

http://codeigniter.com/user_guide/general/urls.html

3)フィルタを受け取るアクションを作成する

私はcontr ollerは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; 
?> 
+0

素晴らしいです!ありがとうございました。私はできるだけ早く実装しようとします。正解であなたに戻ってきます。 –

+0

最初のjavascriptコードはカテゴリを選択不可にしているようです。それはテストするのが難しくなります; D。なぜこれが起こっているかもしれないのか? –

+0

私はそれほど確信していません。あなたはjavascriptのエラーが表示されますか? Chromeでは、F12キーを押してConsoleをクリックすると表示されます。 Firefoxでは、新しいバージョンを使用している場合や、Firebugをインストールしている場合も同じことが言えます。 – lbstr

関連する問題