CODEWITHSUNDEEP
javascriptjqueryhtml
yaqoob
yaqoob

Reputation: 1062

jQuery Conflicting scripts

i have a jQuery v1.11.1 linked to my webpage along with other libraries (not jQuery, but runs with jQuery) everything works fine, until i add the show/hide function. The function works fine itself, tested on JSFiddle

But, it stops other functions to work. So i add the jQuery.noConflict the results remain the same, Show/hide does not work and stops other scripts too.

The jQuery:

<script type="text/javascript">
var jq11 = jQuery.noConflict(true);
(function($) {
    $(document).ready(function() {
        $(".order-button").click(function() {
            $("#order-form").toggle();
            $(".order-button").hide();
        });
    });
}(jq11));
</script>

The HTML:

<a href="#" class="order-button">Place Order</a>

<div id="order-form">
<h3>some contents</h3>
</div>

The SCRIPTS Stops Working:

<script type="text/javascript" src="/static/js/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/static/js/menus.js"></script>
<script type="text/javascript" src="/static/js/fitvid.js"></script>
<script type="text/javascript" src="/static/js/theme.js"></script>
<script type="text/javascript" src="/static/js/portfolio.js"></script>
<script type="text/javascript" src="/static/js/slider.js"></script>

************ UPDATE ************

This fiddle has all the libraries/plugins along with the show/hide code which isn't working on the fiddle as well => http://jsfiddle.net/devyaqoob/k3036fbv/

Upvotes: 0

Views: 277

Answers (2)

Parkash Kumar
Parkash Kumar

Reputation: 4730

There are three issues appearing from your fiddle:

1 - "Cannot read property 'msie' of undefined" from slider.js and portfolio.js

Reason: jquery.browser.msie is not supported in jquery-1.9.1 version.

Solution: Add jquery-migrate-1.1.1.js will resolve these two.

2 - "Cannot read property 'top' of undefined" from aniheader.js

Reason: Your html doesn't contain jQuery('#content-container') selector.

Solution: Either add html for this selector in your page or add check in plugin incase of undefined.

3 . "undefined is not a function" from page script toggle code.

Reason: jQuery initilized with jQuery keyword.

Solution: Replace $ with jQuery and insert this code immediately after including jQuery.

So, your view structure (html) should look like following:

<html>
    <head>
        <title>jQuery conflicting script(s)</title>
        <script type="text/javascript" src="/static/js/jquery.min.js"></script>     

        <script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery(".order-button").click(function() {
                    jQuery("#order-form").toggle();
                    jQuery(".order-button").hide();
                });
            }); 
        </script>

        <script type="text/javascript" src="/static/js/jquery-migrate-1.1.1.js"></script>
        <script type="text/javascript" src="/static/js/menus.js"></script>
        <script type="text/javascript" src="/static/js/theme.js"></script>
        <script type="text/javascript" src="/static/js/slider.js"></script>
        <script type="text/javascript" src="/static/js/fitvid.js"></script>
        <script type="text/javascript" src="/static/js/aniheader.js"></script>
        <script type="text/javascript" src="/static/js/jquery.blockUI.min.js"></script>
        <script type="text/javascript" src="/static/js/portfolio.js"></script>
        <script type="text/javascript" src="/static/js/classie.js"></script>
        <script type="text/javascript" src="/static/js/jquery.cookie.min.js"></script>

        <style>
            #order-form { display: none; }
        </style>

    </head>

    <body>
        <a href="#" class="order-button">Place Order</a>
        <div id="order-form">
            <h3>Place Your Order</h3>
        </div>
    </body>
</html>

Note: The above code is tested locally using given plugins.

Upvotes: 1

Rahul Desai
Rahul Desai

Reputation: 15501

Try using the working code below. I have replaced $ with jq11.

Also, have this jQuery code after you have included other libraries.

var jq11 = jQuery.noConflict(true);

jq11(document).ready(function() {
  jq11(".order-button").click(function() {
    jq11("#order-form").toggle();
    jq11(".order-button").hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="order-button">Place Order</a>

<div id="order-form">
<h3>some contents</h3>

Upvotes: 1

Related Questions