2014-10-03 5 views
0

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

---- голова ----

<head> 
    <link rel="stylesheet" type="text/css" href="fancystyle1/styles.css" > 
    <link rel="stylesheet" type="text/css" href="css/style.css" > 

    <script src="fancystyle1/js/vendor/jquery-1.9.0.min.js"></script> 
    <script src="fancystyle1/js/vendor/modernizr.js"></script> 

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
     <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>--> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

     <script> 
      $(document).ready(function() { 
      $("#datepicker").datepicker(); 
      }); 
     </script> 

<script src="fancystyle1/js/jquery.simple.select.js"></script> 
      <script type="text/javascript"> 
       $(function() { 
        $('select').selectBoxes(); 
       });    
      </script> 

</head> 
+1

Избегайте использования двух версий jQuery на вашем веб-сайте, если сможете. jQuery Version 1.11.1 - ваш лучший выбор для совместимости с более старым браузером. В противном случае просто придерживайтесь самой высокой версии (1.9.0) и выгружайте другую (1.6.2). –

+0

Вы также должны показать свою комбинированную страницу, а не две отдельные страницы. Тогда совет о том, что изменить, будет конкретным :) –

+0

Ответ обновлен ниже. Включает стили, а затем скрипты (всего 1 jQuery и что перед другими скриптами), а затем код, специфичный для страницы, в конце тела. –

ответ

0

Вы включали библиотеку JQuery дважды, здесь:

<script src="fancystyle1/js/vendor/jquery-1.9.0.min.js"></script> 

и здесь:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

Это является причиной конфликт. Просто удалите 2-ю строку из вашего кода.

+0

Эти примеры кода показаны двумя отдельными страницами.Комбинированный результат не отображается, поэтому вам нужно также увидеть окончательную версию, прежде чем говорить «удалить вторую строку» :) –

+0

Удаление второго останавливает сборщик дат от работы, к сожалению, хотя ... –

+0

Извините, истинный синий, должен был сделать это более ясно ... этот код на одной странице .. просто попробовал разделить его на просмотр –

0

Избегайте использования двух версий jQuery на своем веб-сайте, если сможете. jQuery Version 1.11.1 - ваш лучший выбор для совместимости с более старым браузером. В противном случае просто придерживаться вашей высшей версии (1.9.0) и сваливать другой (1.6.2)

элементы отсутствуют из вашего примера (например, выбор), но вы хотите что-то вроде этого сейчас:

<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <link rel="stylesheet" type="text/css" href="fancystyle1/styles.css" > 
    <link rel="stylesheet" type="text/css" href="css/style.css" >  
    <script src="fancystyle1/js/vendor/jquery-1.9.0.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <script src="fancystyle1/js/vendor/modernizr.js"></script> 
    <script src="fancystyle1/js/jquery.simple.select.js"></script> 
</head> 

<body> 
    <input id="datepicker" style="width: 100px;"/> 
    <script type="text/javascript"> 
    $(function() { 
     $('select').selectBoxes(); 
     $("#datepicker").datepicker(); 
    });    
    </script> 
</body> 

Примечания:

  • Включите скрипты в элемент головки (по крайней мере, на данный момент, так что вы можете найти их легко). Изменения эффективности/кэширования/связывания приходят позже.
  • Включите jQuery перед пользовательским интерфейсом jQuery и перед любыми другими скриптами, использующими jQuery.
  • Включите только 1 версию jQuery , если вы можете. Поддержка нескольких одновременных версий - кошмар.
  • Query 1.11.1 - текущая лучшая/последняя версия для более старой поддержки браузера.
  • JQuery, специфичный для страницы, завернут в обработчик событий DOM ready, поэтому он может идти в любом месте страницы. В конце body является общей позицией, но в head также отлично.
Смежные вопросы