[solved] getElements and inject question

keiron77 · by **keiron77** on Wed Feb 03, 2010 1:02 pm

I have only just started looking at Mootools(v 1.11) to solve a particular problem that needs to be done in this framework rather than my normal approach in JQuery. I need to insert some html after an element that I can only identify by name (not id).

In the head I have:

Line number On/Off | Expand/Contract | Select all

<script src="media/script/mootools/mootools.js" type="text/javascript"></script>

Html element:

Line number On/Off | Expand/Contract | Select all

<div id="tabGeneral">
<input name="ta" type="text"/>
</div>

My JS script (after the html element)

Line number On/Off | Expand/Contract | Select all

<script type="text/javascript">
$('tabGeneral').getElements('input[name=ta]').inject("<strong>Hello World!</strong>","after");
</script>

I have tried several approaches and nothing seems to work.

daKmoR · by **daKmoR** on Wed Feb 03, 2010 1:10 pm

getElements with give you back an array, so you need to take the first one or use getElement; inject needs an element

Line number On/Off | Expand/Contract | Select all

$('tabGeneral').getElements('input[name=ta]')[0].inject(new Element('strong', { html: "Hello World!"}),"after");

keiron77 · by **keiron77** on Wed Feb 03, 2010 2:27 pm

That isn't working for me. When the page loads Firebug says:

C.parentNode is null
break;case"after":var B=C.getNext();if...stChild;if(D){C.insertBefore(this,D);
(mootools.js (line 63))

In addition to that I see adding html isn't quite as simple as I was thinking, to add a button with a JS function would that be:

Line number On/Off | Expand/Contract | Select all

$('tabGeneral').getElements('input[name=ta]')[0].inject(new Element('input', { type: "button", value: "Insert", onclick: "BrowseFileServer('ta')"}),"after");

daKmoR · by **daKmoR** on Wed Feb 03, 2010 7:31 pm

oh...

mootools 1.11

and yeah I forgot to replace inject with grab... but yeah mootools 1.11...

Line number On/Off | Expand/Contract | Select all

new Element('strong').setText("Hello World!").injectAfter( $('tabGeneral').getElements('input[name=ta]')[0]);

http://jsfiddle.net/wZQxz/

keiron77 · by **keiron77** on Wed Feb 03, 2010 8:26 pm

Thanks daKmoR.

Using the snippet of code you wrote, plus your link to jsfiddle.net and I bit of research I got it all working:

Line number On/Off | Expand/Contract | Select all

new Element('input', {type:'button',value:'Insert', id:'tainsert', onclick:'BrowseFileServer('ta')'}).injectAfter( $('tabGeneral').getElements('input[name=ta]')[0]);

[solved] getElements and inject question

[solved] getElements and inject question

Re: getElements and inject question

Re: getElements and inject question

Re: getElements and inject question

Re: getElements and inject question

Who is online