Prototype, and JQuery inside Rails Application

By -
It has become common practice to use JQuery as the javascript library of choice for Ruby on Rails  applications with the latest versions of rails using JQuery.  But If you have an Rails application that is already using Prototype, it may create problems to replace that with JQuery . And sometimes, you just simply need both to work at the same time.

Use Prototype/Scriptaculous with JQuery

 First, in our application layout, we’re going to get rid of <%=javascript_include_tag :defaults %> and include each javascript file explicitly just to make things a little easy to understand and a little more straight forward.

 So we have replaced defaults with 


<%= javascript_include_tag 'prototype', 'scriptaculous', 'application' %>

Now, we’ll add in JQuery, by downloading the latest version of JQuery from the JQuery Download page from the JQuery Website

<%= javascript_include_tag 'prototype', 'scriptaculous', 'jquery', 'jquery-ui', 'application' %>
 

Right under that line, in your Rails application layout, we’ll insert the one-liner that makes JQuery play nicely with Prototype, YUI, etc.



This will come under script tag 




var $j = jQuery.noConflict();




This allows jquery to be called along with scriptaculous without any conflicts,the only difference is all jquery functions should be called with $j instead of $



e.g. $j('#div_id').stuff instead of $('#div_id').stuff



If you simply want the ability to use both libraries together in your application




Effect.Fade($('element_id'));
$j('#element_id').show();




Notice the first line uses the Prototype element id selector, $ with a Scriptaculous effect, and the second line uses the new noConflict JQuery selector $j. 







































Comments











Post a Comment






























Popular posts from this blog









Inserting and Moving elements inside Ruby Array







By







-















Here's is an array with 5 elements  2.1.2 :001 > arr = ["a", "b", "c", "d", "e"]  => ["a", "b", "c", "d", "e"]  Lets look at few different cases  Insert a new element at starting position  Using unshift 2.1.2 :002 > arr.unshift("f")  => ["f", "a", "b", "c", "d", "e"]  Using insert 2.1.2 :005 > arr.insert(0, "f")  => ["f", "a", "b", "c", "d", "e"] In the above example 0 is the position(index)  Move existing element from one position to another   The element in this case is "e"  Using uniq to show only unique elements  2.1.2 :009 > arr.insert(0, "e").uniq  => ["e", "a", "b", "c", "d"]  With uniq we are only showing unique records but the element is listed 








Read more










Remove duplicates from a JavaScript Array







By







-















In JavaScript, you may combine the indexOf() method and the filter() method to get rid of duplicates from an array    function removeDuplicates(arr) {   return arr.filter((el, index) => arr.indexOf(el) === index); }  let numbers = [1, 2, 3, 3, 4, 4, 5]; let uniqueNumbers = removeDuplicates(numbers);  console.log(uniqueNumbers); // [1, 2, 3, 4, 5]     The removeDuplicates() function in this code accepts an array as an argument and produces a new array that is empty of duplicates. This is accomplished by creating a new array with the filter() method that only contains elements that are unique within the original array. A callback function is provided as an argument to the filter() method, which is used to filter each element of the array. By comparing the current element's index to the output of executing indexOf() on the original array, the callback function determines if the current element exists only once in the array. The element is added to the new array if the two indices a








Read more










Sending Binary Data over the Network with Json







By







-















  First, you need to open the file. Since the file is binary, you have to open it with an additional “b” flag.   Here i am sending a zip file   f = File.open("path/myzip.zip", "rb")      Next, you have to do binary-to-text encoding on the binary file because the JSON  will complain if you try to feed it a binary string. To overcome this obstacle, you need to apply Base64 encoding.   file_content = Base64.b64encode(f.read())      After you have a text representation of the data, you can then use JSON to package it, you can use to_json to convert in to json   {:file=>file_content}.to_json   In your  Rails application you can do this like   render :layout=>false , :json => {:file=> file_content}.to_json   








Read more