# javascript using jQuery.js and prototype.js doesnt work 2get

**URL:** <https://discuss.rubyonrails.org/t/javascript-using-jquery-js-and-prototype-js-doesnt-work-2get/39805>\
**Category:** rubyonrails-talk\
**Created:** [February 26, 2009, 6:20am UTC](https://discuss.rubyonrails.org/t/javascript-using-jquery-js-and-prototype-js-doesnt-work-2get/39805 "2009-02-26T06:20:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![11175](https://avatars.discourse-cdn.com/v4/letter/1/8edcca/32.png) [@11175](https://discuss.rubyonrails.org/u/11175)\
**Post date:** [February 26, 2009, 6:20am UTC](https://discuss.rubyonrails.org/t/javascript-using-jquery-js-and-prototype-js-doesnt-work-2get/39805/1 "2009-02-26T06:20:40Z")

</div>

Hi........

M hving javascript "scripts.js" which uses jQuery.js in rails application. bt when it is used along with prototype.js, one of the javascripts which hs been included first in my application.rhtml fails...

Do some1 hv any solution how to make both the scripts work 2gether...

I tried using &nbsp;&nbsp;&nbsp;&nbsp;\<script\> &nbsp;&nbsp;&nbsp;&nbsp;jQuery.noConflict(); &nbsp;&nbsp;&nbsp;&nbsp;\</script\> bt of no use. problem remains the same...

any suggestions are greatly appriciated.........

thankx..

---

<div class="post-metadata">

**Author:** ![CFC](https://avatars.discourse-cdn.com/v4/letter/c/e9a140/32.png) [@CFC](https://discuss.rubyonrails.org/u/CFC)\
**Post date:** [February 26, 2009, 6:22am UTC](https://discuss.rubyonrails.org/t/javascript-using-jquery-js-and-prototype-js-doesnt-work-2get/39805/2 "2009-02-26T06:22:36Z")

</div>

include jquery and use jQuery.noConflict(); before you include prototype

and try again.

---

<div class="post-metadata">

**Author:** ![CFC](https://avatars.discourse-cdn.com/v4/letter/c/e9a140/32.png) [@CFC](https://discuss.rubyonrails.org/u/CFC)\
**Post date:** [February 26, 2009, 7:57am UTC](https://discuss.rubyonrails.org/t/javascript-using-jquery-js-and-prototype-js-doesnt-work-2get/39805/3 "2009-02-26T07:57:42Z")

</div>

I usually named $j for jQuery.

Then, you can use $j(…) to do something with jQuery and use $ to do something with Prototype.

I think maybe you must modify some code in scripts.js or try include jquery.color.js and scripts.js after you define jQuery.noConflict();

\<%= javascript\_include\_tag “jquery” %\>

\<%= javascript\_include\_tag “jquery.color”, “scripts” %\>

---

<div class="post-metadata">

**Author:** ![11175](https://avatars.discourse-cdn.com/v4/letter/1/8edcca/32.png) [@11175](https://discuss.rubyonrails.org/u/11175)\
**Post date:** [February 26, 2009, 12:08pm UTC](https://discuss.rubyonrails.org/t/javascript-using-jquery-js-and-prototype-js-doesnt-work-2get/39805/4 "2009-02-26T12:08:16Z")

</div>

Billy Hsu wrote:

> I usually named $j for jQuery. \<script\> &nbsp;&nbsp;var $j = jQuery.noConflict(); \</script\>
> 
> Then, you can use $j(...) to do something with jQuery and use $ to do something with Prototype. I think maybe you must modify some code in scripts.js or try include jquery.color.js and scripts.js after you define jQuery.noConflict();
> 
> \<%= javascript\_include\_tag "jquery" %\> \<script\> &nbsp;&nbsp;var $j = jQuery.noConflict(); \</script\> \<%= javascript\_include\_tag "jquery.color", "scripts" %\>
> 
> > \>\> below is my rhtml file...and i followed the sequence given below... My section\_title(params[:controller]) %\> : \<% end %\>DashGo\</title\> &nbsp;&nbsp;&nbsp;\</script\> \</body\> \> CFC on Rails: \> [http://zusocfc.blogspot.com](http://zusocfc.blogspot.com) \> \> Only two surfaces of a box: \> [http://blog.pixnet.net/zusocfc](http://blog.pixnet.net/zusocfc)
> > 
> > -- Posted via [http://www.ruby-forum.com/](http://www.ruby-forum.com/).
> > 
> > \>
> 
> Hi..

&nbsp;&nbsp;Thanks for the suggestion.. bt it fails... below is my scripts.js file... and it fails with the error

$("table.data tr:nth-child(even)") is null

i tried using jQuery in place of $ in scripts.js. it had been working properly. all the functionalities were working. but wen i implemented lightbox, lightbox was not working properly. bt wen i undo the changes in scripts.js lightbox works fine..

&nbsp;&nbsp;How to modify scripts.js.. below is the script.

/\* &nbsp;&nbsp;DashGo scripts (utilizing jQuery 1.2.3) &nbsp;&nbsp;Developed by Noah Lazar, Saforian \*/

/\* --- Initialize page --- \*/ $(document).ready(function(){

&nbsp;&nbsp;// Stripe row colors &nbsp;&nbsp;$("table.data tr:nth-child(even)").not(".even").not(".odd").addClass("even");

&nbsp;&nbsp;// Insert document icons &nbsp;&nbsp;$("a[href$=pdf]").not(":has(img)").append('\<img class="icon" src="/images/icon\_pdf.gif" width="14" height="14" alt=" (PDF)"\>'); &nbsp;&nbsp;$("a[href$=doc]").not(":has(img)").append('\<img class="icon" src="/images/icon\_word.gif" width="14" height="14" alt=" (Word Document)"\>'); &nbsp;&nbsp;$("a[href$=xls]").not(":has(img)").append('\<img class="icon" src="/images/icon\_excel.gif" width="14" height="14" alt=" (Excel Spreadsheet)"\>'); &nbsp;&nbsp;$("a[href$=ppt]").not(":has(img)").append('\<img class="icon" src="/images/icon\_powerpoint.gif" width="14" height="14" alt=" (Powerpoint Presentation)"\>');

&nbsp;&nbsp;// CSS3 first and last child replacement &nbsp;&nbsp;$(".columns .col:last-child").addClass("last-child"); &nbsp;&nbsp;$(".three .col:first-child").addClass("first-child");

&nbsp;&nbsp;// Popup Help &nbsp;&nbsp;initPopupHelp();

&nbsp;&nbsp;// Hide/show boxes &nbsp;&nbsp;initToggleBoxes();

&nbsp;&nbsp;// Collapsable boxes &nbsp;&nbsp;initCollapsables();

&nbsp;&nbsp;// IE6 interface fixes &nbsp;&nbsp;if ($.browser.msie && $.browser.version \<= 6) { &nbsp;&nbsp;&nbsp;&nbsp;initIE6(); &nbsp;&nbsp;}

&nbsp;&nbsp;// Selectable data tables &nbsp;&nbsp;initSelectables();

&nbsp;&nbsp;// Yellow fade messages (requires jquery.color.js plugin) &nbsp;&nbsp;$(".notice, .warning").animate({ backgroundColor:"#e7e7e7" }, 2200);

&nbsp;&nbsp;// Select box navigation &nbsp;&nbsp;("select[rel=redirect]").change(function(){ &nbsp;&nbsp;&nbsp;&nbsp;location.href = $(this).val(); &nbsp;&nbsp;});

});

// Toggle hide/show/edit for boxes function initToggleBoxes(){

&nbsp;&nbsp;// Hidden box initialization &nbsp;&nbsp;$("#artistinfo").hide();

&nbsp;&nbsp;// Show box &nbsp;&nbsp;$("a[rel=show]").click(function(){

&nbsp;&nbsp;&nbsp;&nbsp;// Show destination box &nbsp;&nbsp;&nbsp;&nbsp;$(this.hash).slideToggle("fast");

&nbsp;&nbsp;&nbsp;&nbsp;// Hide this link (close link should be within box) &nbsp;&nbsp;&nbsp;&nbsp;$(this).hide();

&nbsp;&nbsp;&nbsp;&nbsp;return false; &nbsp;&nbsp;});

&nbsp;&nbsp;// Hide box &nbsp;&nbsp;$("a[rel=hide]").click(function(){ &nbsp;&nbsp;&nbsp;&nbsp;var link = this;

&nbsp;&nbsp;&nbsp;&nbsp;// Hide box &nbsp;&nbsp;&nbsp;&nbsp;$(this.hash).slideToggle("fast", function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Show original open link &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("a[href=" + link.hash + "][rel=show]").show();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Cancel edit mode if possible &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(link.hash).find("div.edit:visible a[rel=cancel]").click();

&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;return false; &nbsp;&nbsp;});

&nbsp;&nbsp;// Edit fields &nbsp;&nbsp;$("a[rel=edit]").click(function(){

&nbsp;&nbsp;&nbsp;&nbsp;// Hide the "view" box and show the "edit" box &nbsp;&nbsp;&nbsp;&nbsp;$(this.hash) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.find("div.view").hide() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.siblings("div.edit").show();

&nbsp;&nbsp;&nbsp;&nbsp;return false; &nbsp;&nbsp;});

&nbsp;&nbsp;// Cancel editing fields &nbsp;&nbsp;$("a[rel=cancel]").click(function(){

&nbsp;&nbsp;&nbsp;&nbsp;// Hide the "edit" box and show the "view" box &nbsp;&nbsp;&nbsp;&nbsp;$(this.hash) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.find("div.edit").hide() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.siblings("div.view").show();

&nbsp;&nbsp;&nbsp;&nbsp;return false; &nbsp;&nbsp;});

&nbsp;&nbsp;// Delete links &nbsp;&nbsp;$("a[rel=delete]").click(function(){ &nbsp;&nbsp;&nbsp;&nbsp;return confirm("Are you sure you want to delete this item?"); &nbsp;&nbsp;});

}

// Selectable data tables function initSelectables() {

&nbsp;&nbsp;$("table.selectable tr:has(td)").click(function(){

&nbsp;&nbsp;&nbsp;&nbsp;if ($(this).hasClass("active")) { return; }

&nbsp;&nbsp;&nbsp;&nbsp;// Go to destination based on row URL &nbsp;&nbsp;&nbsp;&nbsp;var url = $(this).attr("rel"); &nbsp;&nbsp;&nbsp;&nbsp;if (url != "") { location.href = url; }

&nbsp;&nbsp;});

}

// Collapsable boxes function initCollapsables() {

&nbsp;&nbsp;// Collapse closed boxes &nbsp;&nbsp;$(".collapsable.closed\>.wrapper").hide();

&nbsp;&nbsp;// Add wrapper link for title text (to allow for keyboard navigation) &nbsp;&nbsp;$(".collapsable .title\>h3").not(":has(a)").wrapInner("\<a href='#' class='toggle'\>\</a\>");

&nbsp;&nbsp;// Process toggle &nbsp;&nbsp;$(".collapsable .title\>h3\>a.toggle").click(function(){

&nbsp;&nbsp;&nbsp;&nbsp;// Slide up and change arrow &nbsp;&nbsp;&nbsp;&nbsp;$(this).parents(".collapsable").toggleClass("closed");

&nbsp;&nbsp;&nbsp;&nbsp;if ($.browser.msie && $.browser.version \<= 6) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Animation does not work in IE6 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).parents(".title").siblings(".wrapper").toggle(); &nbsp;&nbsp;&nbsp;&nbsp;} else { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).parents(".title").siblings(".wrapper").slideToggle("fast"); &nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;return false; &nbsp;&nbsp;}); }

// Popup Help function initPopupHelp() {

&nbsp;&nbsp;// Since we're fading, apply opacity fix to Firefox &nbsp;&nbsp;if ($.browser.mozilla && $(".help").size() \> 0) { &nbsp;&nbsp;&nbsp;&nbsp;$("body").css("opacity", ".99999"); &nbsp;&nbsp;}

&nbsp;&nbsp;// Add wrapper &nbsp;&nbsp;$(".help").wrapInner('\<span class="text"\>\</span\>');

&nbsp;&nbsp;// Hide text &nbsp;&nbsp;$(".help .text").hide();

&nbsp;&nbsp;// Insert help icon &nbsp;&nbsp;$(".help").append('\<img class="helpicon" src="/images/icon\_help.gif" alt="Help" width="14" height="14"\>');

&nbsp;&nbsp;$(".help") &nbsp;&nbsp;&nbsp;&nbsp;// Hover action &nbsp;&nbsp;&nbsp;&nbsp;.hover(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Fade in help text &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).find("span.text:hidden").animate({ opacity:"show", bottom:"-=20" }, "normal"); &nbsp;&nbsp;&nbsp;&nbsp;},function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Fade out help text &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).find("span.text:visible").animate({ opacity:"hide", bottom:"+=20" }, "fast"); &nbsp;&nbsp;&nbsp;&nbsp;})

&nbsp;&nbsp;&nbsp;&nbsp;// Keyboard tab access &nbsp;&nbsp;&nbsp;&nbsp;.focus(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Fade in help text &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).find("span.text:hidden").animate({ opacity:"show", bottom:"-=20" }, "normal"); &nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;.blur(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Fade out help text &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).find("span.text:visible").animate({ opacity:"hide", bottom:"+=20" }, "fast"); &nbsp;&nbsp;&nbsp;&nbsp;});

}

// IE6 fixes for missing CSS features function initIE6(){

&nbsp;&nbsp;// Support :hover on selectable rows &nbsp;&nbsp;$("table.selectable tr").hover(function(){ &nbsp;&nbsp;&nbsp;&nbsp;$(this).addClass("hover"); &nbsp;&nbsp;}, function(){ &nbsp;&nbsp;&nbsp;&nbsp;$(this).removeClass("hover"); &nbsp;&nbsp;});

&nbsp;&nbsp;// Add [rel=delete] replacement class &nbsp;&nbsp;$("a.button[rel=delete]").addClass("reldelete");

&nbsp;&nbsp;// Add [type=text] replacement class &nbsp;&nbsp;$("#artistinfo input[type=text]").addClass("typetext");

&nbsp;&nbsp;// PNG support &nbsp;&nbsp;$("img[src$=png]").each(function(){ &nbsp;&nbsp;&nbsp;&nbsp;var src = this.src; &nbsp;&nbsp;&nbsp;&nbsp;var div = document.createElement("div");

&nbsp;&nbsp;&nbsp;&nbsp;// Set replacement div properties &nbsp;&nbsp;&nbsp;&nbsp;div.id = this.id; &nbsp;&nbsp;&nbsp;&nbsp;div.className = this.className; &nbsp;&nbsp;&nbsp;&nbsp;div.title = this.title || this.alt; &nbsp;&nbsp;&nbsp;&nbsp;div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizing='scale')"; &nbsp;&nbsp;&nbsp;&nbsp;div.style.width = this.width + "px"; &nbsp;&nbsp;&nbsp;&nbsp;div.style.height = this.height + "px";

&nbsp;&nbsp;&nbsp;&nbsp;// Replace image with transparent div &nbsp;&nbsp;&nbsp;&nbsp;this.replaceNode(div);

&nbsp;&nbsp;});

}

---

<div class="post-metadata">

**Author:** ![CFC](https://avatars.discourse-cdn.com/v4/letter/c/e9a140/32.png) [@CFC](https://discuss.rubyonrails.org/u/CFC)\
**Post date:** [February 26, 2009, 2:34pm UTC](https://discuss.rubyonrails.org/t/javascript-using-jquery-js-and-prototype-js-doesnt-work-2get/39805/5 "2009-02-26T14:34:06Z")

</div>

(function($){

// Code

$(document).ready(function(){});

})(jQuery);

---

<div class="post-metadata">

**Author:** ![Con](https://avatars.discourse-cdn.com/v4/letter/c/9fc29f/32.png) [@Con](https://discuss.rubyonrails.org/u/Con)\
**Post date:** [February 27, 2009, 3:06am UTC](https://discuss.rubyonrails.org/t/javascript-using-jquery-js-and-prototype-js-doesnt-work-2get/39805/6 "2009-02-27T03:06:25Z")

</div>

Hi, please read the following:

[http://docs.jquery.com/Using\_jQuery\_with\_Other\_Libraries](http://docs.jquery.com/Using_jQuery_with_Other_Libraries)

Good luck,

-Conrad

---

<div class="post-metadata">

**Author:** ![11175](https://avatars.discourse-cdn.com/v4/letter/1/8edcca/32.png) [@11175](https://discuss.rubyonrails.org/u/11175)\
**Post date:** [September 23, 2009, 12:15pm UTC](https://discuss.rubyonrails.org/t/javascript-using-jquery-js-and-prototype-js-doesnt-work-2get/39805/7 "2009-09-23T12:15:44Z")

</div>

Billy Hsu wrote:

> include jquery and use jQuery.noConflict(); before you include prototypeand try again.

Thanks. Simply moving the JS include of prototype.js after all of my other JS includes did the trick for me. AJAX now works for my rails app. Andy