how do you pass a variable' value inside prototype's $() utility method?

Question

function insertChildDiv(parentId)
{
  var ChildComment = new Element('div', {'class':'padding'});
  ChildComment.update('testing');
  $().insert(ChildComment);
}

i want the value of parentId inside the $() in the line

$().insert(ChildComment);

i already tried

$('parentId').insert(ChildComment);

but it evaluates the parentId as string and is looking for a div with an element id of "parentId" so the error will be $("parentId") is null

also tried

$(parentId).insert(ChildComment);

but its returning the error "$(parentId).insert is not a function"

btw the script is called by this html

<a href="#" onclick="insertChildDiv(123456)" id="123456more">Replies and more</a>

Answer 1

You'd use $(parentId).insert(...) normally.

Wouldn't $(parentId + 'more').insert(...) work in your specific case?

Answer 2

$() accepts a string or a DOM element as parameter

Edited to reflect edits in original Q.

$(parentId) will work as long as the id is valid.

the id passed to the function is "123456" and the id you're looking for is "123456more". Also, what you're passing is an integer (123456) not a string. At any rate, since they don't match, prototype isn't finding it. also, the id should not begin with a number: IE8 will fail on it as the w3c specs say the id attribute cannot begin with a number (if I recall correctly)

Try changing the html to

<a href="#" onclick="insertChildDiv('more123456')" id="more123456">Replies and more</a>

and it should work

Answer 3

the parentId's value is the id of the div where this <a href="#" onclick="insertChildDiv('more123456')" id="more123456">Replies and more</a> is located. I passed this parentId's value in the function insertChildDiv() so that the inserted child div will be nested in this parent's div. also the id of the a tag id="more123456" will be used to change the href value into a value that will hide the inserted child div

thanks i will rename my element's ids to make the first characters into letters.

if i remove the single qoutes that wrap the parentId inside the $() ex. $(parentId).insert(ChildComment); the error returned is:

$(parentId).insert is not a function

if i wrap the parentId in single quotes, prototype will not find a div with an id of 'parentId' error will be $("parentId") is null

Answer 4

THIS to the rescue. "this" refers to the element itself, so pass the element reference to your function, not a string.

<div onclick="insertChildDiv(this)">###</a>

<script type='text/javascript'>
function insertChildDiv(element) {
    $(element).insert(new Element('div',{'class':'padding'}).update('testing'))
}

// or if you want to add an ID:

function insertChildDiv(element) {
    $(element).insert(new Element('div',{'class':'padding',id:'more'+element.id}).update('testing'))
}

</script>

Answer 5

Your original function works with the argument passed into $() ...

function insertChildDiv(parentId)
{
  var ChildComment = new Element('div', {'class':'padding'});
  ChildComment.update('testing');
  $(parentId).insert(ChildComment);
}

Here's a test case:

Passing a variable to $()

Answer 6

wow thank you very much to all! now it works. for the benefit of others that may come across this same scenario here is what i think happened: DONT USE NUMBERS ONLY as ID for ELEMENT (even if the word "id" suggests that it should be a number.) and YES if you really need a number on that id, concat even a single letter in the beginning of the id ex. the id im using now is id="parent123456"