CODEWITHSUNDEEP
conflictjquery
Dev Guy
Dev Guy

Reputation: 520

Conflict jQuery Tabs

I am using following script for tab slides on my magento store. It looks like it is causing jQuery conflict. I tried using jQuery.noConflict() but it didnt help. 

<script type="text/javascript">
            var current = 0;
            $('tabs').firstDescendant().className += ' active-tab';
            var active_tab = $('tabs').firstDescendant().firstDescendant().firstDescendant();
            var motion = false;
            function move_to(to, el){    
               if (!motion) {
                el.parentNode.parentNode.className += ' active-tab';
                if (active_tab) {
                active_tab.parentNode.parentNode.className = 'corner-left-top';
                }
                active_tab = el;    
                move = (current - to)*690;
                new Effect.Move($('tabber'), { x: move, beforeStart:function(){ motion = true;},afterFinish:function(){motion = false;}});
                current = to;
               }
            }        
        </script>

Here is the PHP code for the script:

<div id="tabs" class="tabs">
    <?php $tabs = 0; ?>
    <?php if ($_description = $this->getChildHtml('description')):  ?>
    <div id="width-tab" class="corner-left-top">
        <div class="corner-right-top" >
            <div class="border-top" onclick="move_to(<?php echo $tabs; $tabs++;?>, this)">
                <h3 style="color:#000;"><?php echo strtoupper($this->__('Overview')); ?></h3>
            </div>
        </div>
    </div> 
    <?php endif;?>
    <div id="width-tab-2" class="corner-left-top">
        <div class="corner-right-top">
            <div class="border-top" onclick="move_to(<?php echo $tabs; $tabs++;?>, this)">
                <h3 ><?php echo strtoupper($this->__('Specification')); ?></h3>
            </div>
        </div>
    </div>
    <?php  if ($_product->isSaleable() && $this->hasOptions()):?>
        <div id="width-tab-3" class="corner-left-top">
            <div class="corner-right-top">
                <div class="border-top" onclick="move_to(<?php echo $tabs; $tabs++;?>, this)">
                    <h3><?php echo strtoupper($this->__('Buy')); ?></h3>
                </div>
            </div>
        </div>
        <?php endif; ?><br class="clear-block" />


<ul id="tabber">
    <li id="container_1" class="tabs-list">Product Description</li>
    <li id="container_2" class="tabs-list">Product Specifications</li>                                      
    <li id="container_3" class="tabs-list">Add to Cart button</li>
</ul>

Issue: The id container_3 contains a "Add to Cart" button <button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button> which wont work.

Please Any help will be appreciated.

Thanks

Upvotes: 2

Views: 681

Answers (3)

Zachary Kniebel
Zachary Kniebel

Reputation: 4774

For starters, try setting move to be a local variable (var move...) and second, I'm pretty sure that there is no firstDescendant method, unless you're using your own custom script. Regardless, try using $("tabs").children().first() instead, as that custom script could be causing the conflict.

EDIT 1:

change your code to wrap whatever you can in a $(document).ready() - this will ensure that all of your dynamically and subsequently added elements are included in the collections populated by using the jQuery selectors. Also set any selectors used multiple times to variables to improve efficiency. Code:

var current = 0;
var motion = false;
var active_tab;

function move_to(to, el) { ..... }

$(document).ready(function () {
    var $tabs = $("tabs");
    $tabs......
    active_tab = .....
    /* note that I stopped coding here because I think that you may have 
       gone in the wrong direction for a few of these lines*/
});

EDIT 2:

remove the onclick event handler from the HTML element for the add to cart button and move it to the $(document).ready() handler in jQuery (let's try to keep all the script in the same place - at least for now):

$(document).ready(function() { 
    $(".btn-cart").click(function () {
       //assuming the id of the form is productAddToCartForm and the form data is
       //already filled out:
       $("#productAddToCartForm").submit()
    });
});

Upvotes: 1

Ayman Safadi
Ayman Safadi

Reputation: 11552

If you're having a conflict with Prototype because of the $ symbol, you can solve this by wrapping your jQuery logic in this:

(function($) {
    // jQuery logic here
})(jQuery);

Upvotes: 1

elclanrs
elclanrs

Reputation: 94101

firstDescendant() is not a jQuery method. That seems from the good ol' Prototype. I think you got some tutorials or something mixed up.

Also, you need to run your script on DOM ready unless it's embedded after the markup, but in production you'd separate these files anyway.

Upvotes: 3

Related Questions