Jquery и прототип без конфликта

У меня конфликт между jquery и прототипом.

HTML 

<!DOCTYPE html>
<html>
    <head>
        <title>Nor-Avetisyan</title>
        <link rel="stylesheet" type="text/css" href="views/css/style.css" />
        <link rel="stylesheet" href="views/css/calendarview.css">
        <script src="views/js/jquery-2.0.1.min.js"></script>
        <script>jQuery.noConflict();</script>
        <script src="views/js/prototype.js"></script>
        <script src="views/js/calendarview.js"></script>
        <script>
            function setupCalendars() {
                // Embedded Calendar
                Calendar.setup(
                        {
                            dateField: 'embeddedDateField',
                            parentElement: 'embeddedCalendar'
                        }
                )

                // Popup Calendar
                Calendar.setup(
                        {
                            dateField: 'popupDateField',
                            triggerElement: 'popupDateField'
                        }
                )
            }

            Event.observe(window, 'load', function() {
                setupCalendars()
            })
        </script>
    </head>
    <body>
        <div id="site-page">
            <div id="site-under-header">
                <a class="flag-arm" href="#"></a>
                <a class="flag-en" href="#"></a>
                <div class="clear"></div>
            </div>
            <div id="site-header">
                <div id="site-header-center"></div>
            </div>
            <div id="site-content-container">
                <div id="site-menu">
                    <a id="menu-glxavor" href="#"></a>
                    <a id="menu-mermasin" href="#"></a>
                    <a id="menu-usucich" href="#"></a>
                    <a id="menu-ashakert" href="#"></a>
                    <a id="menu-shrjanavartner" href="#"></a>
                    <a id="menu-norutyunner" href="#"></a>
                    <a id="menu-mankapartez" href="#"></a>
                    <a id="menu-nyuter" href="#"></a>
                    <a id="menu-bajanortagrvel" href="#"></a>
                </div>
                <div id="site-content">
                    <div id="site-content-left">
                        <h1>ՆՈՐ ԿԱՌՈՒՑՎՈՂ ԴՊՐՈՑԱՇԵՆՔ</h1>
                        <div id="site-content-dproc">
                            <div id="corner-calq"><div><a href="#">Ավելին</a></div></div>
                        </div>
                    </div>
                    <div id="site-content-right">
                        <div id="embeddedExample" style="">
                            <div id="embeddedCalendar" style="margin-left: auto; margin-right: auto">
                            </div>
                        </div>
                        <div id="site-content-ushadrutyun">
                            Հատուկ ուշադրության 
                            արժանի
                            հայտարարությունների
                            նյութերի համար
                        </div>
                    </div>
                    <div style="clear:left;"></div>
                    <div id="site-content-news">
                        <h1>ՆՈՐՈՒԹՅՈՒՆՆԵՐ</h1>
                        <div class="site-news-grey">
                            1
                        </div>
                        <div class="site-news-grey">
                            2
                        </div>
                        <div class="clear"></div>
                        <div class="site-news-grey">
                            3
                        </div>
                        <div class="site-news-grey">
                            4
                        </div>
                    </div>
                    <div id="site-content-social">
                        <a id="social-twitter" href="#"></a>
                        <a id="social-youtube" href="#"></a>
                        <a id="social-facebook" href="#"></a>
                        <a id="social-google" href="#"></a>
                        <a id="social-dasaran" href="#"></a>
                    </div>
                </div>
                <div class="clear"></div>
                <a id="kap" href="#"></a>
                <div id="site-footer">
                    <div>
                        «Հայ կրթություն» կրթական հիմնադրամ
                        Երևան Հարավ-Արևմտյան Ա1 թաղամաս, Օհանով 20  Հեռ. 72 84 40
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('#corner-calq').hide();
            $('#site-content-dproc').mouseover(function() {
                $('#corner-calq').fadeIn(1000);
            });
            $('#site-content-dproc').mouseout(function() {
                $('#corner-calq').fadeOut(1000);
            });
        </script>
    </body>
</html>

Ошибка консоли: Uncaught TypeError: невозможно вызвать метод «скрыть» null

Я поставил jQuery.noConflict(); но никакого эффекта.

Можете ли вы опубликовать какие-либо решения для этого?


html jquery prototypejs
person Community    schedule 01.06.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

jQuery.noConflict() — это не какая-то волшебная пыль, которая некими таинственными силами устраняет конфликты между библиотеки. Его цель вполне ясна: 1) восстановить исходное значение глобальной переменной $ и, при желании, 2) ввести другой псевдоним, который будет использоваться вместо jQuery.

Что вам может понадобиться сделать, так это следующее:

<script src="views/js/prototype.js"></script>
<script src="views/js/jquery-2.0.1.min.js"></script>
<script>var jQ = jQuery.noConflict();</script>

Затем вы можете использовать эту переменную jQ так же, как вы использовали $:

jQ('#corner-calq').hide();
jQ('#site-content-dproc').mouseover(function() {
    jQ('#corner-calq').fadeIn(1000);
});
jQ('#site-content-dproc').mouseout(function() {
    jQ('#corner-calq').fadeOut(1000);
});

Хотя я, вероятно, предпочел бы оставить код как есть, а не рассматривать его в рамках самовызывающейся анонимной функции.

(function($) {
    $('#corner-calq').hide();
    $('#site-content-dproc').mouseover(function() {
        $('#corner-calq').fadeIn(1000);
    });
    $('#site-content-dproc').mouseout(function() {
        $('#corner-calq').fadeOut(1000);
    });
})(jQuery);
person raina77ow    schedule 01.06.2013
comment
Теперь я понимаю, что не делает конфликт. Спасибо, raina77ow! :) - person ; 01.06.2013