How to debug a jQuery / JavaScript conflict?

问题:

I have two WebUsercontrols(.ascx) in my aspx page. One is for slide show and another one is for FullCalendar. Both are working fine while running Separately, but when I run both User controls in same page script conflict error occurs, as follows:

Error description is:

Script are:

SlideShow.ascx

<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
    function pageLoad(sender, args) {

        var $slides = $('.slide'),
         slideWidth = $slides.width(),
         numberOfSlides = $slides.length,
         speed = 5000,
         $holder = $slides.wrapAll('<div id="slidesHolder"></div>').css('float', 'left').parent().width(slideWidth * numberOfSlides);

        setInterval(changePosition, speed);

        function changePosition() {
            $holder.animate({
                'marginLeft': 0 - slideWidth
            }, function () {
                $holder.css('marginLeft', 0).children().first().appendTo($holder);
            });
        }

    }
</script>

FullCalendar.ascx

<script src="http://code.jquery.com/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
<script src="../Styles/fullcalendar.min.js" type="text/javascript"></script>
<script src="../Scripts/calendarscript.js" type="text/javascript"></script>

I have tried for noConflict. If i use noConflict one of the script is not working.

回答1:

Try to Run after removing this : ../Scripts/jquery-1.4.1.js

If it is working then ok else

Try to put this at the bottom of your page

<script type="text/javascript">
    function pageLoad(sender, args) {

        var $slides = $('.slide'),
         slideWidth = $slides.width(),
         numberOfSlides = $slides.length,
         speed = 5000,
         $holder = $slides.wrapAll('<div id="slidesHolder"></div>').css('float', 'left').parent().width(slideWidth * numberOfSlides);

        setInterval(changePosition, speed);

        function changePosition() {
            $holder.animate({
                'marginLeft': 0 - slideWidth
            }, function () {
                $holder.css('marginLeft', 0).children().first().appendTo($holder);
            });
        }

    }
</script>

use <script>jQuery.noConflict();</script> and replace the word jquery from $

回答2:

<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>

After including jQuery, you should call $.noConflict(). This will remove the "$" from the global namespace:

<script language="javascript">
    var $j = jQuery.noConflict();
</script>

At this point, you should use $j instead of $ if you want to call jQuery code. Or you could use a trick by wrapping the $ symbol in a closure

<script type="text/javascript">
    function pageLoad(sender, args) {

        var $jslides = $j('.slide'),
         slideWidth = $jslides.width(),
         numberOfSlides = $jslides.length,
         speed = 5000,
         $jholder = $jslides.wrapAll('<div id="slidesHolder"></div>').css('float', 'left').parent().width(slideWidth * numberOfSlides);

        setInterval(changePosition, speed);

        function changePosition() {
            $jholder.animate({
                'marginLeft': 0 - slideWidth
            }, function () {
                $jholder.css('marginLeft', 0).children().first().appendTo($jholder);
            });
        }

    }
</script>

Hope this helps..!!

Happy Coding :)