Prototype problem with replace

Question

Hi, in my html page, I have the following:

<div id="rub">
    Select at least one Rub
</div>

In the script code, I have

if ( some condition ... )
  $('rub').replace("Rubs selected:");

Which works fine, but when a second event is triggered, in the code I have

if ( some other condition ... )
  $('rub').replace("Selected at least one item:");

That gives the error

 $("rub") is null

It's as if the rub reference was lost after the first replace. (Also tried with Element.replace with the same result)

Any clues ? Thanks in advance.

Answer 1

You're getting

$("rub") is null

because at that point you are trying to manipulate an element that doesn't exist anymore because you replaced it with a text node.

When you are calling

$("rubs").replace("Rubs selected:");

You are taking a DIV element with an ID of "rubs" and replacing it with a text node with no ID.

You need to use:

$("rubs").replace("<div id='rubs'>Rubs selected:</div>");

or probably better:

$("rubs").update("Rubs selected:");

Remember, when using a JavaScript framework like Prototype, the docs are your friends. When you are having trouble with a function, the first thing you should do is carefully read the docs for that function. I've never used Prototype in my life, all I did was check the docs for the function you were using and the answer to your problem was right on the first line (to be fair though I can see how you might have missed it if you did read the docs).

Hope this helps.