Ajax and CI : I am lost

TDSPower

Posted: 22 January 2008 04:40 PM

[ Ignore ]

Summer Student

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

sandwormusmc

Posted: 22 January 2008 04:59 PM

[ Ignore ] [ # 1 ]

Grad Student

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

Michael Wales

Posted: 22 January 2008 04:59 PM

[ Ignore ] [ # 2 ]

Lab Technician

Total Posts: 2280

Joined 07-30-2007

We need to see your Javascript.

Signature

Follow me on twitter here.
MichaelWales.com | MichaelWales.info

Profile

TDSPower

Posted: 22 January 2008 05:04 PM

[ Ignore ] [ # 3 ]

Summer Student

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

sandwormusmc

Posted: 22 January 2008 05:15 PM

[ Ignore ] [ # 4 ]

Grad Student

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

Pascal Kriete

Posted: 22 January 2008 05:23 PM

[ Ignore ] [ # 5 ]

Administrator

Total Posts: 3097

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

TDSPower

Posted: 22 January 2008 05:29 PM

[ Ignore ] [ # 6 ]

Summer Student

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

Nick Husher

Posted: 22 January 2008 05:54 PM

[ Ignore ] [ # 7 ]

Research Assistant

Total Posts: 378

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.