Magento should have some JS (using Prototype) to handle that functionality. It sounds like that functionality no longer works.
Both Protoype and jQuery use the
$ variable for selecting elements. In Prototype,
$ is a shortcut for
document.getElementById. The code to get an input element with the id
region would look like this :
var field = $('region'); However, if
$ refers to the jQuery library, this code would instead try to locate a
<region> element, just like
$('body') would match the
The solution to this is preventing jQuery from causing the conflict. Immediately after jQuery is included on the page, execute this JS:
jQuery.noConflict(). This causes jQuery to give the
$ variable back to Prototype, thus resolving the conflict and fixing the standard Magento JS.
Any custom code expecting
$ to refer to jQuery will now break. There are two possible solutions:
jQuery in all your code (messy, time-consuming)
- Wrap it in a closure, essentially creating an alias of
$ = jQuery only for the code within that closure.
Here's what the closure looks like:
// Outside of here, $ might refer to Prototype or jQuery - we simply don't know
// Your code goes here. Any reference to $ inside here will always be for jQuery
Here's a quick example:
// $ refers to the Prototype function
// $ now refers to jQuery
Hope that helps!