I've been struggling for days trying to solve two broken jQuery issues. I've been under the assumption that it's a continuing conflict between jQuery and Prototype, though I'm not entirely sure now as I've solved a few other issues by rearranging the order of load, but not these last two. I hope I'm not overstepping my boundaries by asking about two issues here. I believe them to be connected, that's why I'm putting them in one post.
Before listing the problems, I'd like to note that I've moved all of my javascript files to be loaded from page.xml.
The order is:
<!-- jQuery -->
<action method="addJs"><script>infortis/jquery/jquery-1.7.2.min.js</script></action>
<action method="addJs"><script>infortis/jquery/jquery-noconflict.js</script></action>
<!-- Plugins -->
<action method="addJs"><script>infortis/jquery/plugins/matchMedia.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/matchMedia.addListener.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/enquire.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/jquery.easing.min.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/jquery.tabs.min.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/jquery.accordion.min.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/jquery.owlcarousel.min.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/imagesloaded.js</script></action>
<action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
<action method="addJs"><script>customscroll/jquery.mCustomScrollbar.js</script></action>
<action method="addJs"><script>chat/moment.min.js</script></action>
<action method="addJs"><script>chat/livestamp.js</script></action>
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
<action method="addJs"><script>scriptaculous/effects.js</script></action>
<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action method="addJs"><script>scriptaculous/controls.js</script></action>
<action method="addJs"><script>scriptaculous/slider.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
<action method="addJs"><script>varien/form.js</script></action>
<action method="addJs"><script>varien/menu.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
Issue #1 If you couldn't tell, I'm using the Ultimo theme (hence the infortis and jQuery). The theme provides a hover dropdown for mini compare and mini cart at the top of the page.
This is when you're logged out:
And this is when you're logged in:
This one is especially hard to debug because I can't see anything with Firebug. (Strange to me, because I was able to debug a navigation dropdown by hovering over it and getting an error in Firebug's console.)
Issue #2 Within the customers account information page, they can change their password by selecting a checkbox and then the form is displayed.
Checkbox input:
<li class="control">
<input type="checkbox" name="change_password" id="change_password" value="1" onclick="setPasswordForm(this.checked)" title="<?php echo $this->__('Change Password') ?>"<?php if($this->getCustomer()->getChangePassword()==1): ?> checked="checked"<?php endif; ?> class="checkbox" /><label for="change_password"><?php echo $this->__('Change Password') ?></label>
</li>
Inline script in the customer/form/edit.phtml:
<script type="text/javascript">
//<![CDATA[
var dataForm = new VarienForm('form-validate', true);
function setPasswordForm(arg){
if(arg){
jQuery('current_password').up(3).show();
jQuery('current_password').addClassName('required-entry');
jQuery('password').addClassName('required-entry');
jQuery('confirmation').addClassName('required-entry');
}else{
jQuery('current_password').up(3).hide();
jQuery('current_password').removeClassName('required-entry');
jQuery('password').removeClassName('required-entry');
jQuery('confirmation').removeClassName('required-entry');
}
}
<?php if($this->getCustomer()->getChangePassword()): ?>
setPasswordForm(true);
<?php endif; ?>
//]]>
</script>
And the error:
TypeError: jQuery(...).up is not a function
I understand this is a long stretch to find a fix without me giving the entire site. I'm really just asking if there's anything that anyone can see from the code given that may be causing the problem. The password issue is a priority, as I can always just edit the cart/compare dropdowns to link to their respective pages.
