CodeIgniter Forums

Full Version: At my wit's end with Ajax.Updater
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

El Forum

[eluser]myerman[/eluser]
Having a lot of trouble (for some reason) with a VERY SIMPLE ajax application. Goes something like this:

* Db table called bars has ID, NAME, PHONE of bars (as in pubs)
* simple form asks for input from user
* form posts to javascript function that runs a controller function
* controller function runs model query, echos out results

When run as a normal form post, everything is great. But when I turn on the ajax.updater..nothing. Any thoughts would be great. Here's the code.

And yes, I started out the evening with Derek Allard's video tutorial...didn't work for me. I'm probably just really tired and can't see whatever it is that's in front of my face.


CONTROLLER
Code:
class NdaClub extends Controller {

    function NdaClub(){
        parent::Controller();
        $this->load->model('MBars','',TRUE);
    
    }
    
    function index(){
        $data['title'] = "NDA Club - Find a Bar!";
        $this->load->vars($data);
        $this->load->view('_ndaclub');
    }
    
    function findbar(){
        if ($this->input->post('searchterm')){
            echo $this->MBars->findBar($this->input->post('searchterm'));
        }else{
            echo "No form input!";
        }
    }

}



MODEL
Code:
class MBars extends Model {

    function MBars(){
        // Call the Model constructor
        parent::Model();
    }
    
    function findBar($term){
        $this->db->select('name,phone');
        $this->db->like('name',strip_tags($term));
        $this->db->orlike('phone',strip_tags($term));
        $this->db->orderby('name', 'asc');
        $Q = $this->db->get('bars');
    
        if ($Q->num_rows() > 0){
            echo "<ul>";
            foreach ($Q->result() as $row){
                echo "<li><b>".$row->name."</b> - ".$row->phone."</li>\n";
            }
            echo "</ul>";
        }else{
            echo "No bars found!";
        }
        //echo $this->db->last_query();
        //$Q->free_result();        
    
    }
  
  
}//end class



VIEW (partial)

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;&lt;?php echo $title;?&gt;&lt;/title&gt;



[removed]
//&lt;![CDATA[
var base_url = '&lt;?php echo base_url();?&gt;';
//]]>
[removed]
[removed][removed]
[removed][removed]
[removed]

ajaxSearch = function(){
    var url = base_url + 'ndaclub/findbar';
    var parms = "searchterm="+$F('term');
    new Ajax.Updater('search_results',
        url, {
            method:'post',
            evalScripts:true,
            postBody:parms,
            asynchronous:true,
            onComplete:showResponse
             }
        );
}

function showResponse(response){
   $('search_results')[removed] = response.responseText;
}

[removed]
&lt;/head&gt;

&lt;body class="oneColFixCtr"&gt;

<div id="container">
  <div id="mainContent">
    <h1>&lt;?php echo $title;?&gt;</h1>
  &lt;?php
    echo "&lt;form id='searchform' method='post'&gt;";
    $data = array('id'=>'term', 'name'=>'searchterm', 'size'=>25);
    echo form_input($data);
    echo form_submit('submit','find a bar');
    echo form_close();  
  
  ?&gt;
    <br/><br/>
    

    <div id="search_results"></div>


    </div>
</div>
&lt;/body&gt;
&lt;/html&gt;

El Forum

[eluser]myerman[/eluser]
I've reworked a few things (actually a TON of things) and finally resorted to (in some cases) literally copying and pasting Derek Allard's javascript onto my stuff, still with zero effect. Here is the new stuff. I can't believe how long this is taking--it took 15 minutes to code up the PHP, and approximately 11 hours and counting on this crazy Javascript crap.

You'll notice that I have a controller function called getbar()...this I put in just to make sure my brain was working....I can go to http://www.tripledogs.com/ndaclub/getbar/texas and get back a list of bars whose name contain "texas". Same model function as with the form, but that doesn't work:

http://www.tripledogs.com/ndaclub/index



CONTROLLER
Code:
function index(){
        $data['title'] = "NDA Club - Find a Bar!";
        $this->load->vars($data);
        $this->load->view('_ndaclub');
    }
    
    function findbar(){
        $searchterm = $this->input->post('searchterm');
        echo $this->MBars->search($searchterm);
    
    
    }
    
    function getbar($term){
        echo $this->MBars->search($term);
    }


MODEL
Code:
function search($term){
        $this->db->select('name,phone');
        $this->db->like('name',$term);
        $Q = $this->db->get('bars');
    
        if ($Q->num_rows() > 0){
            $string = "<ul>";
            foreach ($Q->result() as $row){
                $string .= "<li><b>".$row->name."</b> - ".$row->phone."</li>\n";
            }
            $string .= "</ul>";
            return $string;
        }else{
            return "No bars found!";
        }
    
    }


VIEW
Code:
&lt;html&gt;
&lt;head&gt;
[removed]
//&lt;![CDATA[
base_url = '&lt;?php echo base_url();?&gt;';
//]]>
[removed]
[removed][removed]
[removed][removed]
[removed][removed]
[removed][removed]
&lt;/head&gt;
&lt;body class="oneColFixCtr"&gt;

<div id="container">
  <div id="mainContent">
    <h1>&lt;?php echo $title;?&gt;</h1>
    
    
    &lt;form id="searchform" method="post" action="&lt;?php echo site_url('ndaclub/findbar');?&gt;"&gt;
    <div>
        <label for="search_term">Search by bar name</label>
        &lt;input type="text" name="search_term" id="search_term" /&gt;
        &lt;input type="submit" value="search" id="search_button" /&gt;
        <div id="autocomplete_choices"></div>
    </div>
    &lt;/form&gt;
    <div id="search_results" style="display:none;">
    
    </div>    
    
    


    &lt;!-- end #mainContent --&gt;</div>
&lt;!-- end #container --&gt;</div>
&lt;/body&gt;
&lt;/html&gt;


JAVASCRIPT

Code:
window.onload = function () {
    new Ajax.Autocompleter("search_term", "autocomplete_choices", base_url+"ndaclub/findbar/", {});

    $('searchform').onsubmit = function () {
        inline_results();
        return false;    
    }
}

function inline_results() {
    new Ajax.Updater ('search_results', base_url+'ndaclub/findbar/', {method:'post', postBody:'seachterm='+$F('search_term')});
    new Effect.Appear('search_results', {duration:1});

}

El Forum

[eluser]myerman[/eluser]
Forget it...I redid it with jquery, works mah-velous.

Code:
$(document).ready(function(){
    $("#search_results").slideUp();
    $("#search_button").click(function(e){
        e.preventDefault();
        ajax_search();
    });
    $("#search_term").keyup(function(e){
        e.preventDefault();
        ajax_search();
    });

});

var timeout = null;

function ajax_search(){
    $("#search_results").show();
    $("#search_results").html('Searching....');
    var search_val=$("#search_term").val();
    //alert(search_val);
    $.post("./findbar", {search_term : search_val}, function(data){
        if (data.length>0){
            $("#search_results").show();
            $("#search_results").html(data);
        }    
    })
}

El Forum

[eluser]Hannes Nevalainen[/eluser]
Hmm, I can't see that you are including your javascript-files..

A suggestion is to download FireBug (a FireFox plugin) it's unvaluable when debugging javascripts

regards
//Hannes

El Forum

[eluser]Derek Allard[/eluser]
Did the files from the video, unaltered, work for you? Also, I second the idea of Firebug - you'll at least be able to tell if the ajax call is getting made.

El Forum

[eluser]Hannes Nevalainen[/eluser]
Yepp, they did. I also jumped across a thing in the javascript listed above..

I suspect you are using Prototype, then you should register your event handlers like this.. (to keep it cross-browser)
Code:
Event.Observe(window,'load',function(){
  //init code here
});

El Forum

[eluser]Derek Allard[/eluser]
Actually Hannes, my question was meant for myerman, but I see now he resolved it, so I guess we're all done here Wink