CodeIgniter Forums
CI view and Ajax question - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived General Discussion (https://forum.codeigniter.com/forumdisplay.php?fid=21)
+--- Thread: CI view and Ajax question (/showthread.php?tid=21406)

CI view and Ajax question - El Forum - 08-09-2009

[eluser]shiroin[/eluser]
So I have been trying to build part of my application with some ajax autocomplete code.

When I load my view file separately with the URI: http://localhost/ci/application/views/ac_view.php

The autosuggest works perfectly fine.

But when I load it as a view in CI: http://localhost:8888/ci/index.php/ac1/load/

The autosuggest doesn't work.

I tried to do some debugging, it seems that the javascripts are working, but somehow, when it is loaded as a view, the $.post() part doesn't work:
Code:
$.post("/ci/index.php/ac1/getNames/", {queryString: ""+inputString+""}, function(data)

Help? I included the complete codes.

My autocomplete controller: controllers/ac1.php
Code:
class ac1 extends Controller{

  function ac1(){
    parent::Controller();
  }
  
  function index(){
    
  }

  function load(){
    $this->load->view('ac_view');
  }
  
  function getNames(){
    $queryString = $this->input->post('queryString',TRUE);
    if(!$queryString)return;
    
    if(strlen($queryString)>0){
          $sql = "SELECT name FROM type WHERE type.name LIKE '$queryString%' LIMIT 10";
          $query = $this->db->query($sql);
          if(($query->num_rows())>0)
           foreach ($query->result() as $result)
            echo '<li oonClick="fill(\''.$result->name.'\');">'.$result->name.'</li>';
           //oonClick = onClick, edited to work on the forum
      else echo '&nbsp;';
      }
  }
}

My AJAX Code: views/ac_view.php
Code:
<scr1pt type="text/javascript" src="jquery-1.2.1.pack.js"></scr1pt>
<scr1pt type="text/javascript">
    function lookup(inputString) {
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("/ci/index.php/ac1/getNames/", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup
    
    function fill(thisValue) {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }
</scr1pt>

My HTML Form in ac_view.php
Code:
<div>
                Type your county:
                <br />
                &lt;input type="text" size="30" value="" id="inputString"&gt;
            </div>
            
            <div class="suggestionsBox" id="suggestions" style="display: none;">
                <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                <div class="suggestionList" id="autoSuggestionsList">
                    &nbsp;
                </div>
            </div>

Please help me!

And much thanks in advance! =)

CI view and Ajax question - El Forum - 08-09-2009

[eluser]elvix[/eluser]
from a brief look (without consulting any references), you might want to see if your $.post() statement is passing the inputString correctly. Usually, values need to be enclosed in quotes. If you put a single quote in each double quoted block surrounding inputString, that might help.

But a better suggestion is to use Firefox and the Firebug plugin for debugging. It's invaluable for debugging javascript errors and helping with ajax calls, etc.

Oh, and you should consider upgrading your JQuery too. Current version is 1.3.2, I believe. Smile