Part of the EllisLab Network
   
 
Ajax and CI : I am lost
Posted: 22 January 2008 03:40 PM   [ Ignore ]  
Summer Student
Avatar
Total Posts:  25
Joined  12-31-2007

Hello,

I am working on my CI project.

I meet an error with the Autocompletion with the CI Ajax Library.

I create a controller which will show the form :

class Accueil extends All_accueil {
...
        function
test(){
            $this
->load->view('javascript_test');
        
}
        
        
function auto(){
              
echo("<ul id=\"categorie_auto_complete\"><li>TEst</li><li>123</li></ul>");
        
}
...
}

Here is the view (form), the input type text categorie is normally autocompleted (with the LI created with auto())...

<form action="test.hpp" name="a">

<
div id=\"categorie_auto_complete\" style="height:30px; width:100px; background-color:grey;"></div>
        <
input type="text" id="categorie" name="categorie" size="20">
        <
input type="submit" value="Tester">
<?
echo $this->ajax->auto_complete_field('categorie',array('url' => '/accueil/auto'));
?>

Nothing appears when i write some text on the input text…

When I look on firebug :

Erreur : $(element) has no properties
Fichier source : http://localhost/magnet/system/javascript/prototype.js
Ligne : 987

Don’t understand where is the problem with such an implicit error !

Thanks a lot,

François

Profile
 
 
Posted: 22 January 2008 03:59 PM   [ Ignore ]   [ # 1 ]  
Grad Student
Avatar
Rank
Total Posts:  49
Joined  11-26-2007

I’m not too familiar with the prototype framework, but it looks like it’s having trouble selecting the id of the element on line 987 of the prototype.js code.  Can you post that snippet of code also?

In MooTools, which I’ve been (successfully, so far) using with CI, I can call /controller/functionName through an AJAX call and specify the updated id within the ajax object as such:

--removed--

Is it a similar setup with Prototype?

Profile
 
 
Posted: 22 January 2008 03:59 PM   [ Ignore ]   [ # 2 ]  
Moderator
Avatar
RankRankRankRank
Total Posts:  2139
Joined  07-30-2007

We need to see your Javascript.

 Signature 

Follow me on Twitter
MichaelWales.com

Profile
 
 
Posted: 22 January 2008 04:04 PM   [ Ignore ]   [ # 3 ]  
Summer Student
Avatar
Total Posts:  25
Joined  12-31-2007

Thanks for these very fast answers… I don’t think the problem is in the prototype javascript ! It is a JS Framework reference as you know.

I post some line where the error is indicated :

  hide: function(element) {
  $(element).style.display = ‘none’;
  return element;
  },

  show: function(element) {
  $(element).style.display = ‘’;
  return element;
  },

  remove: function(element) {
  element = $(element);
  element[removed].removeChild(element);
  return element;
  },

Profile
 
 
Posted: 22 January 2008 04:15 PM   [ Ignore ]   [ # 4 ]  
Grad Student
Avatar
Rank
Total Posts:  49
Joined  11-26-2007

Try using this in your view instead of what you have:

echo $this->ajax->auto_complete_field('changeMe*',array('url'=>'/accueil/auto','update'=>'categorie'));

The ‘update’ parameter should specify which DOM ID the JavaScript will change when it runs ...

*<change this to the DOM ID of your form>

Profile
 
 
Posted: 22 January 2008 04:23 PM   [ Ignore ]   [ # 5 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  2474
Joined  01-07-2008

Could you post the code that gets generated here:

echo $this->ajax->auto_complete_field('categorie',array('url' => '/accueil/auto'));

I’m not familiar with the library, but I do use prototype on a regular basis and it works fine with CI.

 Signature 
Profile
MSG
 
 
Posted: 22 January 2008 04:29 PM   [ Ignore ]   [ # 6 ]  
Summer Student
Avatar
Total Posts:  25
Joined  12-31-2007

I am so a dumb… I do not deserve your precious help…

I put scriptaculous before prototype…


And we have to put :

For others noobs, I put the final code :

<?
$this
->load->helper('url');
//echo base_url().'system/javascript/prototype.js';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<
html>
<
head>
  <
title>javascript_test</title>
  
  
</
head>
<
body>

  <
form action="test.hpp">
    <
input type="text" id="categorie" name="categorie" size="20" />
    <
div id="blabla">qqqqqqqqq</div>
    <
input type="submit" value="Tester" />
    
<?
  
echo $this->ajax->auto_complete_field('categorie', array('update' => 'blabla','url' => 'auto'));
  
?>
</form>
</
body>
</
html>

Sorry again

Profile
 
 
Posted: 22 January 2008 04:54 PM   [ Ignore ]   [ # 7 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  344
Joined  09-11-2006

Just so you know, the ExpressionEngine Forum is wreaking havoc on your examples. It’ll hack out anything that even starts to resemble a cross-site scripting attack. wink

 Signature 

employer | twitter | rockets

Profile
 
 
Posted: 22 January 2008 04:55 PM   [ Ignore ]   [ # 8 ]  
Summer Student
Avatar
Total Posts:  25
Joined  12-31-2007

I’ll protect my DB query, no problem. Thanks

Profile
 
 
   
 
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 719, on June 06, 2008 10:16 AM
Total Registered Members: 77565 Total Logged-in Users: 18
Total Topics: 101557 Total Anonymous Users: 1
Total Replies: 544401 Total Guests: 208
Total Posts: 645958    
Members ( View Memberlist )
Newest Members:  semperjrawhallshiusbozzlynobluffkatiejameshsmith101dddougalcampinggreaterphoenix54