All geek questions in one place

How to get jQuery to work with a prototype

Ok, so here is the situation. Pulled my hair out on this one.

I am a noob. Only for 6 weeks were rails used. I use the standard installation package, and my code heavily uses prototype helpers. As I said, noob;)

So I'm trying to add some jQuery effects like PrettyPhoto. But what happens is that when you first load the page, PrettyPhoto works fine. However, as soon as someone uses the Prototype helper, as a link created using link_to_remote, Prettyphoto stops working.

I tried jRails, all the fixes offered on the jQuery site to stop conflicts ...

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

... even some crazy things like to rename all $ in prototype.js to $$$ to no avail. Either the prototype helpers break, or jQuery breaks.

There seems to be nothing I can do to make them work together.

Any ideas?

Here is part of my 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>

If I put the prototype in front of jquery, the prototype helpers don't work. If I put the noconflict clause, it doesn't work.

Thanks in advance!

Chris

By the way: when I try to do this, from the jQuery site:

<script>
 jQuery.noConflict();

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

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

my page is disappearing!

+3
source share
4 answers

you should use jQuery.noConflict();, and after that all jquery calls should only be done using jQuery()instead ofof $()

+6
source

, .

- javascript. .

jrails, .

:

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

, jquery . jQuery .

, , , .

0

, . , - :

<%= 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 reordering includes, as stated above, means that you can include your inline JS in application.js instead, which some consider tidier.

0
source

change $ character in jQuery in the following files

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

first include the jquery file and then enable the prototype.

Hope this solves the problem.

0
source

Source: https://habr.com/ru/post/1738757/

More articles:


All Articles