Cakephp with Ajax, this.element.setAttribute is not a function

Question

I'm trying to make a stackoverflow like tags system. I followed this tutorial (in French): http://www.formation-cakephp.com/34/autocomplete-en-ajax which uses Prototype and Scriptaculous. Of course, I adapted it to my project

I get the following error:

this.element.setAttribute is not a function : controls.js Line 86

which corresponds to

this.element.setAttribute('autocomplete','off');

in the control.js file

I'm really new to Ajax, so I don't have a clue on what I'm doing (wrong)...

If you need some code from any file, let me know!

view.ctp:

<div class="input">
<label>Tags :</label>
<?php e($ajax->autoComplete(
    'Tag.tag',
    '/tags/autocomplete',
    array(
        'minChars' => 3,
        'indicator' => 'ajaxloader'
    )
)); ?> 
<div id="ajaxloader" style="display:none;">
    Chargement...
</div>

Controller:

function autocomplete()
{
    $recherche = utf8_decode($this->data['Tag']['tag']);

    $tags = $this->Tag->find(
        'all',
        array(
            'fields' => 'DISTINCT tag',
            'conditions' => "tag LIKE '$recherche%'",
            'order' => 'tag',
            'limit' => 10
        )
    );

    $this->set(compact('tag', 'recherche'));
}

Answer 1

jQuery, scriptaculous, & prototype don't play well together but you can resolve this issue by putting jQuery in no-conflict mode.

var $j = jQuery.noConflict(); // $j is now an alias to the jQuery function; creating the new alias is optional.

Now instead of using the $ to for jQuery use $j so for example:

$j(document).ready(function() { $j( "div" ).hide(); });

For more information on avoiding jQuery conflicts refer to the following: https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Answer 2

It appears that scriptaculous doesn't play well with j-query. When I removed the j-query link I stopped getting an error. This definitely isn't an ideal solution, but I thought I'd share my discovery.