RJS error: TypeError: ((position == "before" || position == "after") ? element.parentNode : element).tagName is undefined

Scenario

Error pops out upon clicking a method that RJS from prototype such as page.insert() codes

Analysis

This error occurs when both jQuery classes or plugins and RJS helpers are used. A conflict between the two happens when using the $ symbol.

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $.

Solution

To avoid this, you can use the jQuery.noConflict() similar to the code below

<script type="text/javascript">'
  $.noConflict();
</script>

This function removes all jQuery variables from the global scope, including jQuery itself. Now, edit all your jQuery and use the word jQuery in replacement of the dollar sign ($)

Example, instead of using:

$(document).ready();

you can use:

jQuery(document).ready();

This will solve this error between RJS helpers and jQuery plugins.