0

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:

logged out

And this is when you're logged in:

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.

  • you combine js and check. i think its work perfactely. combine js using admin->configuration->admin->devloper setting – Jigs Parmar Mar 8 '17 at 4:53
  • While I imagine this will increase load times, it wouldn't really effect errors, would it? I mean merging the scripts wouldn't do anything to prevent a conflict if one were still present. – taskle Mar 9 '17 at 1:29
0

So after major trial and error testing, the following combinations have worked, along with an edit to a JavaScript file that is loaded in the footer of the pages (only when customers are logged in).

app/design/frontend/theme/customtheme/layout/page.xml:

          <!-- Prototype -->
          <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>

          <!-- 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>infortis/jquery/jquery-noconflict.js</script></action>

And within my custom chat module's Javascript file (js/chat/chat.js) I changed the following variable declaration

 var $ = jQuery 

to

 var $jq = jQuery.noConflict();

The mini compare and mini cart dropdowns are working properly again, as well as a number of other problematic jQuery bugs throughout my site. I'm a bit confused as to why

var $ = jQuery 

wasn't good enough though. If anyone could shed light on the reason, it would be awesome.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.