Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Конфликт js скриптов помогите решить. (https://javascript.ru/forum/misc/68971-konflikt-js-skriptov-pomogite-reshit.html)

leo83 21.05.2017 15:15

Конфликт js скриптов помогите решить.
 
Добрый день ребята, я большой большой баран в js и прошу вашу помощь в решении проблемы. :help:

Суть проблемы: Имеется сайт online-cam.net, который перевожу на адаптивную верстку с использованием элементов навигации под мобильные устройства, а также общее обновление сайта. На сайте имеются веб камеры, часть из которых мертвые, а часть работают. Если например на странице веб камеры ялты запустить плеер после загрузки страницы с любом браузере на декстопе, то подгрузится окно запуска iVideon и камеру можно смотреть (скрин)

В шапке сайта имеется меню разделов (скрин) при наведении мышкой на которые меню раскрывается и появляются подпункты - страны.

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

Каждый элемент меню для мобильных устройств рабочий

1. рабочий бутерброд (скрин)
2. рабочий поиск (скрин)
3. рабочее меню (скрин)
4. рабочее меню подвала (скрин)
=======================

Проблема заключается в том что все элементы меню работают когда не работает запуск плеера, и наоборот.


За работу элементов отвечают следующие срипты:
<script type="text/javascript" src="/includes/jquery/jquery.js"></script>
<script type="text/javascript" src="/components/video/js/datepicker/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="/components/video/js/datepicker/i18n/jquery.ui.datepicker-ru.min.js"></script>


<script type="text/javascript" src="/components/video/js/common.js"></script>
<script type="text/javascript" src="/core/js/common.js"></script>
<script type="text/javascript" src="/templates/online-cam/js/template.js" ></script>


<script type="text/javascript" src="/templates/online-cam/js/prototype_172.js"></script>
<script type="text/javascript" src="/templates/online-cam/js/scripts.js"></script>
<script type="text/javascript" src="/templates/online-cam/js/cmsmartmenu.js"></script>



Первые три скрипта общие для всех - это подключаемые jQuery

Вторые три скрипта отвечают за работу плеера, пагинации, запускт страниц редактирования

Третьи три скрипта отвечают за работу меню.

Спасибо за помощь всем отозвавшимся за ранее!!

leo83 21.05.2017 16:52

Очень нужна ваша помощь. Буду благодарен материально.

рони 21.05.2017 17:42

leo83,
проблема в 11 строке которая уничтожает jQuery

рони 21.05.2017 18:01

leo83,
самый простой способ открывать все скрипты jQuery и менять все $ на jQuery -
или делать обёртку над каждым скриптом

(function($){ 
    // здесь весь прежний код 

})(jQuery);


проще не использовать prototype и всё что с ним связано

рони 21.05.2017 18:04

leo83,
есть конечно jQuery.noConflict();
но вопрос как его правильно применить в вашем случае

leo83 22.05.2017 13:37

рони, Спасибо за помощь в вопросе попробовал некоторые варианты и собственно почитал множество рекомендаций по конфликту Prototype и jQuery. Обе библиотеки используют символ $ как имя переменной или функции. Есть в сети несколько способов побороть конфликт почти все вы озвучили

1. это замена во всех jQuery скриптах переменной $ на jQuery.

2. обертывание скриптов
(function($){
	 // здесь весь прежний код
})(jQuery);


3. Использование самой функции jQuery.noConflict();

по мотивам этой статьи пытался реализовать функцию jQuery.noConflict();, но у меня ничего не получилось.

<script type="text/javascript" src="/templates/online-cam/js/prototype_172.js"></script>
<script type="text/javascript" src="/templates/online-cam/js/cmsmartmenu.js"></script>

<script type="text/javascript" src="/includes/jquery/jquery.js"></script>

<script type="text/javascript">
   jQuery.noConflict();
</script> 

<script type="text/javascript" src="/templates/online-cam/js/scripts.js"></script>
<script type="text/javascript" src="/components/video/js/datepicker/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="/components/video/js/datepicker/i18n/jquery.ui.datepicker-ru.min.js"></script>
<script type="text/javascript" src="/components/video/js/common.js"></script>
<script type="text/javascript" src="/core/js/common.js"></script>
<script type="text/javascript" src="/templates/online-cam/js/template.js" ></script>



Я сначала подключил библиотеку Prototype
затем её скрипт (хотя не уверен)

Затем объявил о подключении jQuery и вслед за ней объявил о функции jQuery.noConflict();

после этого подключаю все остальные B]jQuery[/b] скрипты

результат: работают все меню (в декстопе и в мобильном формате), но по прежнему не возможно запустить видеоплеер.

что мне делать? прошу помощь за материальное вознаграждение!

leo83 22.05.2017 13:38

Версия Prototype
/*  Prototype JavaScript framework, version 1.7.2
 *  (c) 2005-2010 Sam Stephenson
 *
 *  Prototype is freely distributable under the terms of an MIT-style license.
 *  For details, see the Prototype web site: http://www.prototypejs.org/
 *
 *--------------------------------------------------------------------------*/


Версия jQuery
/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery-1.10.2.min.map
*/

рони 22.05.2017 13:46

leo83,
обычно делают так сначала jquery, потом jquery-ui, потом все!!! скрипты основанные на jquery, потом jQuery.noConflict();
затем prototype и его скрипты

leo83 22.05.2017 14:15

рони, я попробовал по вашему методу:

<script type="text/javascript" src="/includes/jquery/jquery.js"></script>
<script type="text/javascript" src="/components/video/js/datepicker/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="/components/video/js/datepicker/i18n/jquery.ui.datepicker-ru.min.js"></script>
<script type="text/javascript" src="/templates/online-cam/js/scripts.js"></script>
<script type="text/javascript" src="/components/video/js/common.js"></script>
<script type="text/javascript" src="/core/js/common.js"></script>
<script type="text/javascript" src="/templates/online-cam/js/template.js" ></script>

<script type="text/javascript">
   jQuery.noConflict();
</script> 

<script type="text/javascript" src="/templates/online-cam/js/prototype_172.js"></script>
<script type="text/javascript" src="/templates/online-cam/js/cmsmartmenu.js"></script>


пока что не помогло

рони 22.05.2017 14:42

leo83,
у вас на странице много скриптов помимо этих.
помочь вам ничем более не могу, даже за вознаграждение. пишите в раздел работа, может кто откликнется.


Часовой пояс GMT +3, время: 07:50.