Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-11-2008, 10:21 PM   PM User | #1
joet86
New to the CF scene

 
Join Date: Jul 2008
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
joet86 is an unknown quantity at this point
Prototype/Scriptaculous Autocompleter IE Issue

Hello all. I am attempting to add to the DOM using the following function, which utilizes Scriptaculous's Builder and Autocompleter libraries:

Code:
var add_number = 1;
function addInput() {	
    if (add_number <= 4) {
        var element = Builder.node('div', [
            Builder.node('label'),
            Builder.node('input',
                {type: 'text',
                 id: 'searchterm' + add_number,
                 className: 'text',
                 name: 'searchterm' + '[' + add_number + ']'}),
            Builder.node('div', { id: 'hint' + add_number, className: 'autocomplete' }),
            Builder.node('input',
                {type: 'hidden',
                 id: 'class_id' + add_number,
                 name: 'class_id' + '[' + add_number + ']'}),
        ]);
        var js = Builder.node('script');
        // the following must be done to appease IE, since IE does not like appending <script>s to the DOM
        js.type = 'text/javascript';
        js.text = 'new Ajax.Autocompleter("searchterm' + add_number + '", "hint' + add_number + '", "class_search.php", {minChars: 2, afterUpdateElement : getSelectedId' + add_number + ', parameters : \'num=' + add_number + '\'}); function getSelectedId' + add_number + '(text, li) { $(\'' + 'class_id' + add_number + '\').value=li.id; }';
        var rlink = Builder.node('a', { href: '#' }, 'Remove');
        rlink.onclick = function() {$(element).remove(); add_number--;}
        element.appendChild(js);
        element.appendChild(rlink);

        $('moreClasses').appendChild(element);
        add_number++;
    }
}
This function is used to add up to 4 text inputs to the page, each creating a new Ajax.Autocompleter. This code works great in Firefox and Safari, but in IE, the Autocompleter is messed up. I tried rewriting the function using Javascript's DOM functions (createElement, setAttribute, etc.), but had the same problem. Any suggestions? Thanks in advance!

-JoeT
joet86 is offline   Reply With Quote
Old 07-13-2008, 09:56 AM   PM User | #2
GJay
Senior Coder

 
Join Date: Sep 2005
Posts: 1,791
Thanks: 5
Thanked 36 Times in 35 Posts
GJay is on a distinguished road
you don't need to insert a new script tag, you can just create the autocompleters along with the rest of your code
__________________
My thoughts on some things: http://codemeetsmusic.com
And my scrapbook of cool things: http://gjones.tumblr.com
GJay is offline   Reply With Quote
Old 07-14-2008, 03:35 PM   PM User | #3
joet86
New to the CF scene

 
Join Date: Jul 2008
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
joet86 is an unknown quantity at this point
I got it, thanks!
joet86 is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 01:26 PM.


Advertisement
Log in to turn off these ads.