title: jquery ui's"selectable" - need to call codeigniter model function
body: <p>(Original Questions) I am using jquery ui's selectable script to control specific active keywords in my webapp. View here: <a href="http://rickymason.net/letschat/main/home" rel="nofollow">www.rickymason.net/letschat/main/home</a> for reference</p>
  
  <p>I have very little experience with javascript and I'm trying to figure out how to launch a function I have in my main model. </p>
  
  <p>Updated function based on answers:</p>
  
  <p>I have updated my code to support the new JSON/AJAX format. This required me to create an active/inactive session filter so that the user can add filters normally, and always use AJAX to update the thread list. This just made more sense to me.</p>
  
  <p>Here is the code I have currently, which still is not working.  I am attempting to make it so when the user clicks on a selectable category (through Jquery UI), the divID associated with the selection is passed through AJAX and returns a threadlist array that updates the div id ="board".</p>
  
  <p>Here is my current Controller set up:</p>
  
  <pre><code>public function home($page = 'home')
      {
          $data['user_id'] = $this-&gt;tank_auth-&gt;get_user_id();
          $data['username'] = $this-&gt;tank_auth-&gt;get_username();
          $data['threads'] = $this-&gt;thread_model-&gt;session_load();
          $data['title'] = ucfirst($page); // Capitalize the first letter
          $data['page'] = $page;
          $this-&gt;load-&gt;view('templates/head', $data);
          $this-&gt;load-&gt;view('templates/nav', $data);
          $this-&gt;load-&gt;view('main/newthread', $data);
          $this-&gt;load-&gt;view('main/addfilter', $data);
          $this-&gt;load-&gt;view('main/checkbox', $data);
          $this-&gt;load-&gt;view('main/displayfilter',$data);
          $this-&gt;load-&gt;view('main/board', $data);
          $this-&gt;load-&gt;view('templates/footer');
      }
  
      public function updatefilters($filters)
      {
          $filterarray = split("|", $filters);
          $this-&gt;thread_model-&gt;create_session_filter($filterarray); 
          $threadarray = $this-&gt;thread_model-&gt;get_threads();
          $data['json'] = '{"content":' + $threadarray + '}';
          $this-&gt;load-&gt;view('json_view', $data); // See step 4!!!
      }
  </code></pre>
  
  <p>Here is my current model code:</p>
  
  <pre><code>    public function get_threads()
      {
              $filter = $this-&gt;session-&gt;userdata('filter');
              $num_tags = count($filter);
              if ($num_tags &gt; 0 &amp;&amp; $num_tags &lt;= 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&lt;$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-&gt;db-&gt;query($sql);
              $thread = $query-&gt;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-&gt;session-&gt;userdata('filter') == TRUE) {
              $sessionfilter = $this-&gt;session-&gt;userdata('filter');
              $new = array_merge($sessionfilter, $filter['filter']);
              $this-&gt;session-&gt;unset_userdata('filter');
              $filter['filter'] = $new;
              $this-&gt;session-&gt;set_userdata($filter);
          } else {
              if (!$filterstring) {} else {
              $this-&gt;session-&gt;set_userdata($filter);
              }
          }
      }
  
      public function create_session_inactive_filter($filterstring)
      {
          $filterarray[] = $filterstring;
          $filter['inactivefilter'] = $filterarray;
          if ($this-&gt;session-&gt;userdata('inactivefilter') == TRUE) {
              $sessionfilter = $this-&gt;session-&gt;userdata('inactivefilter');
              $new = array_merge($sessionfilter, $filter['inactivefilter']);
              $this-&gt;session-&gt;unset_userdata('inactivefilter');
              $filter['inactivefilter'] = $new;
              $this-&gt;session-&gt;set_userdata($filter);
          } else {
              if (!$filterstring) {} else {
              $this-&gt;session-&gt;set_userdata($filter);
              }
          }
      }
  </code></pre>
  
  <p>And here is my current view code:</p>
  
  <p>application/main/json_view.php</p>
  
  <pre><code>&lt;?php
  header("Content-Type: application/json");
  echo $json;
  ?&gt;
  </code></pre>
  
  <p>aplication/main/bdisplayfilter.php</p>
  
  <pre><code>&lt;script&gt;
      $(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: "&lt;div&gt;All my new threads that I want to show up&lt;/div&gt;" }
                  // 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);
              }
          }); }
      });
  &lt;/script&gt;
  &lt;ol id="selectable"&gt;
      &lt;li class="ui-state-default" id="everything"&gt;Everything!&lt;/li&gt;
      &lt;li class="ui-state-default" id="entertainment"&gt;Entertainment&lt;/li&gt;
      &lt;li class="ui-state-default" id="sci/tech"&gt;Sci/Tech&lt;/li&gt;
      &lt;li class="ui-state-default" id="news"&gt;News&lt;/li&gt;
      &lt;?php 
  
      if ($this-&gt;session-&gt;userdata('inactivefilter') == true) {
              $inactivefilter = $this-&gt;session-&gt;userdata('inactivefilter');
              foreach ($inactivefilter as $new)
                  {
                      echo "&lt;li class='ui-state-default' id='custom'&gt;$new&lt;/li&gt;";
                  }
          }
      ?&gt;
  &lt;/ol&gt;
  &lt;?php
  if ($this-&gt;session-&gt;userdata('inactivefilter') == true) {
  echo "&lt;form action='".base_url()."main/clear_filter'&gt;&lt;input type='submit' value=clear&gt;&lt;/form&gt;";
  } ?&gt;
  </code></pre>