Код прототипа не работает, когда библиотека jQuyery загружена сверху - PullRequest
Новая
       60

Код прототипа не работает, когда библиотека jQuyery загружена сверху

1 голос
/ 08 октября 2010

Мой прототип код больше не работает, когда я загружаю в библиотеку jquery , даже если jquery - первая загружаемая библиотека.

HTML-код страницы выглядит примерно так: 

<head>
...
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/effects.js"></script>
<script type="text/javascript" src="/js/prototip.js"></script>
<script type="text/javascript" src="/js/dragdrop.js"></script>
<script type="text/javascript" src="/js/default.js"></script>
<script type="text/javascript" src="/js/limitfocus.js"></script>
...
</head>

<body>

<input type="radio" name="useOtherAddress" id="useOtherAddress_y" value="y" onclick="selectAddress()">
<input type="radio" name="useOtherAddress" id="useOtherAddress_n" value="y" onclick="selectAddress()">

<div id="myAddress" style="display: none;">
...
</div>

<script type="text/javascript">
  // the piece of protptype code no longer working 
  function selectAddress () {
    var t = $('myAddress');
    if ($('useOtherAddress_n').checked) {
      Effect.Appear(t);
      return;
    }
    t.hide();
  }
</script>

У кого-нибудь есть идеи? Эта страница:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

предполагает, что сначала загрузка jquery должна сделать все удобным . Но это не так: [

Ответы [ 3 ]

4 голосов
/ 08 октября 2010

Вам нужно позвонить jQuery.noConflict(), например: 

jQuery.noConflict(); //or possibly $j = jQuery.noConflict();
function selectAddress () {

Затем загрузите jQuery last (но до его плагинов), чтобы jQuery.noConflict() вернул $ к его предыдущему значению (Prototype).

2 голосов
/ 08 октября 2010

Если вы можете помочь этому вообще - код, который вы показываете, не показывает никакой настоятельной необходимости использовать обе библиотеки одновременно - в качестве общей политики, использование jQuery и Prototype вместе должно быть последним средством или временным обходным решением, дляпример при переключении фреймворков.

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

Действительно, лучше всего использовать только один JS-фреймворк.

1 голос
/ 08 октября 2010

+ 1 в качестве общей политики, использование jQuery и Prototype вместе должно быть последним средством или временным решением, например, при переключении сред.

Я предполагаю, что вы используете jQuery с переменной $ или используете функцию, которая вызовет конфликт!

когда вы хотите использовать jQuery, используйте jQuery вместо $, как jQuery(#id).click();. в jQuery $ это просто псевдоним для jQuery, поэтому все функции доступны без использования $. Если нам нужно использовать prtotype вместе с jQuery, вы можете вернуть управление $ обратно на prototype с вызовом $.noConflict() если вы хотите использовать $ для обоих, вы можете сделать это. вот как:

... 

<script type="text/javascript" src="/js/effects.js"></script>
<script type="text/javascript" src="/js/prototip.js"></script>
<script type="text/javascript" src="/js/dragdrop.js"></script>
<script type="text/javascript" src="/js/default.js"></script>
<script type="text/javascript" src="/js/limitfocus.js"></script>

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

<body>

<input type="radio" name="useOtherAddress" id="useOtherAddress_y" value="y" onclick="selectAddress()">
<input type="radio" name="useOtherAddress" id="useOtherAddress_n" value="y" onclick="selectAddress()">

<div id="myAddress" style="display: none;">
...
</div>

<script type="text/javascript">
  // the piece of protptype code no longer working 
$.noConflict();
  jQuery(document).ready(function($) {
    //jquery with $

  });
//prototype with $
  function selectAddress () {
    var t = $('myAddress');
    if ($('useOtherAddress_n').checked) {
      Effect.Appear(t);
      return;
    }
    t.hide();
  }
</script>
...