Part of the EllisLab Network
   
 
Ajax and CI : I am lost
Posted: 22 January 2008 02: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 02: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 02:59 PM   [ Ignore ]   [ # 2 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  2264
Joined  07-30-2007

We need to see your Javascript.

 Signature 

Become a fan of the CodeIgniter Cookbook (estimated: Fall 2010).

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

Profile
 
 
Posted: 22 January 2008 03: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 03: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 03:23 PM   [ Ignore ]   [ # 5 ]  
Moderator
Avatar
RankRankRankRankRank
Total Posts:  2822
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 03: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 03:54 PM   [ Ignore ]   [ # 7 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  382
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 

flickr | twitter | rockets

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

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

Profile
 
 
Posted: 04 January 2010 02:17 AM   [ Ignore ]   [ # 9 ]  
Summer Student
Total Posts:  1
Joined  01-04-2010

Greetings!

Having a hard time on using ajax:

$this->ajax->auto_complete_field(‘username’, array(‘url’ => ‘controller/ajax_search’, ‘update’ => ‘div id’));

instead of displaying the list or username, it display the whole webpage like (controller/index).

i wonder why.. i’m newbie BTW.

Thanks for sharing your small time.

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 819, on March 11, 2010 10:15 AM
Total Registered Members: 119706 Total Logged-in Users: 32
Total Topics: 125901 Total Anonymous Users: 1
Total Replies: 662431 Total Guests: 328
Total Posts: 788332    
Members ( View Memberlist )