Как заставить jQuery работать с Prototype - PullRequest
Новая
       24

Как заставить jQuery работать с Prototype

3 голосов
/ 27 марта 2010

Хорошо, вот ситуация. На этом я выдернул свои волосы.

Я новичок в этом. Использую рельсы только около 6 недель. Я использую стандартный пакет установки, и мой код сильно использует помощников прототипов. Как я уже сказал, нуб;)

Итак, я пытаюсь добавить некоторые эффекты jQuery, например PrettyPhoto. Но происходит то, что при первой загрузке страницы PrettyPhoto работает отлично. Однако, как только кто-то использует помощник по прототипу, например ссылку, созданную с помощью link_to_remote, Prettyphoto перестает работать.

Я пробовал jRails, все исправления, предложенные на сайте JQuery для предотвращения конфликтов ...

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

... даже сделал некоторые безумные вещи, такие как переименование всех $ в prototype.js в $$$ безрезультатно. Либо помощники прототипа ломаются, либо ломается jQuery.

Кажется, я ничего не могу заставить их работать вместе.

Есть идеи?

Вот часть моего application.html.erb 

<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'tooltip' %>
<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'jquery-ui' %>
<%= javascript_include_tag "jquery.prettyPhoto" %>
<%= javascript_include_tag 'prototype' %>
<%= javascript_include_tag 'scriptalicious' %>
</head>
<body>
<script type="text/javascript" charset="utf-8">
  jQuery(document).ready(
    function() {
      jQuery("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Если я поставлю прототип перед jquery, помощники по прототипу не будут работать Если я добавлю предложение noconflict, ни один из них не будет работать.

Заранее спасибо!

Chris

Кстати: когда я пытаюсь это сделать, с сайта jQuery: 

<script>
 jQuery.noConflict();

 // Use jQuery via jQuery(...)
 jQuery(document).ready(function(){
   jQuery("div").hide();
 });

 // Use Prototype with $(...), etc.
 $('someid').hide();
</script>

моя страница исчезает!

Ответы [ 4 ]

6 голосов
/ 27 марта 2010

вы должны использовать jQuery.noConflict(); и после этого все вызовы в jquery должны выполняться только с использованием jQuery() вместо of $()

0 голосов
/ 25 апреля 2010

изменить $ символ на jQuery в следующих файлах 

<%= javascript_include_tag 'jquery-ui' %>
<%= javascript_include_tag "jquery.prettyPhoto" %>

сначала включите файл jquery, а затем включите прототип.

Надеюсь, что это решит проблему

0 голосов
/ 29 марта 2010

Похоже, ты почти у цели. Я думаю, что вы хотите что-то вроде этого: 

<%= javascript_include_tag 'prototype' %>
<%= javascript_include_tag 'scriptalicious' %>
<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'jquery-ui' %>
<%= javascript_include_tag "jquery.prettyPhoto" %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'tooltip' %>

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

  // Use jQuery via jQuery(...)
  jQuery(document).ready(
    function() {
      jQuery("a[rel^='prettyPhoto']").prettyPhoto();
  });

  // Use Prototype with $(...), etc.
  $('someid').hide();
</script>

Я не уверен, какой пример вы нашли на сайте jQuery, но jQuery ("div"). Hide (); похоже, что он скрывает все элементы div на вашей странице, поэтому ваша страница исчезает. Вам не нужно конфликтовать.

Переупорядочение javascript включает в себя, как указано выше, означает, что вместо этого вы можете включить встроенный JS в application.js, что некоторые считают более подходящим.

0 голосов
/ 27 марта 2010

Есть несколько вещей, которые вы можете сделать.

Один из них - проверить порядок загрузки тегов javascript. Обычно приложение должно прийти в конце.

Если вы используете jrails, вам вообще не нужно загружать прототип и библиотеки сценариев.

Я скромно предлагаю вам попробовать следующее: 

<%= javascript_include_tag 'jquery', 'jquery-ui', 'tooltip', 'jquery.prettyPhoto', 'application' %>

Поскольку вы находитесь в начале цикла разработки, вы можете использовать только библиотеки jquery и полностью исключить прототип. На стороне jQuery гораздо больше выбора.

Я не говорю, что это все должны делать, но в вашем конкретном случае это кажется разумным.

...