Forum: Ruby on Rails javascript using jQuery.js and prototype.js doesnt work 2get

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
D5df29c19c70eadbe96e184581f1fb2b?d=identicon&s=25 Radha Langde (radha)
on 2009-02-26 07:20
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
    <script>
    jQuery.noConflict();
    </script>
bt of no use. problem remains the same...

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

thankx..
A1b97dafea62b11e7b3bef338ce3fe83?d=identicon&s=25 Billy Hsu (cfc)
on 2009-02-26 07:23
(Received via mailing list)
include jquery and use jQuery.noConflict(); before you include
prototypeand
try again.

On Thu, Feb 26, 2009 at 2:20 PM, Radha Langde <
rails-mailing-list@andreas-s.net> wrote:

> I tried using
>
> >
>


--
TWRUG Blog:
http://blog.rubyonrails.org.tw

CFC on Rails:
http://zusocfc.blogspot.com

Only two surfaces of a box:
http://blog.pixnet.net/zusocfc
D5df29c19c70eadbe96e184581f1fb2b?d=identicon&s=25 Radha Langde (radha)
on 2009-02-26 08:48
Billy Hsu wrote:
> include jquery and use jQuery.noConflict(); before you include
> prototypeand
> try again.
>
> On Thu, Feb 26, 2009 at 2:20 PM, Radha Langde <
> rails-mailing-list@andreas-s.net> wrote:
>
>> I tried using
>>
>> >
>>

   I did the same thing...
 first in included jQuery.js then
<script>
    jQuery.noConflict();
    </script>
 and at last prototype.js.. bt nt working..

below is my rhtml file...and i followed the sequence given below... My
scripts.js is using jQuery.js.. Is it the proper sequence or do i need
alteration... plz reply as early as u can...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title><% if @artist %><%= @artist.name %> <%=
section_title(params[:controller]) %> : <% end %>DashGo</title>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <%= stylesheet_link_tag "style" %>
    <%= stylesheet_link_tag "print", :media => "print" %>
    <link rel="icon" type="image/png" href="/images/favicon.png">
    <%= javascript_include_tag "jquery" %>
    <%= javascript_include_tag "jquery.color.js" %>
    <%= javascript_include_tag "scripts" %>
    <script>
    jQuery.noConflict();
    </script>
    <%= javascript_include_tag 'prototype' %>
</head>

  <body>

    <%= yield %>

    <%= render :partial => 'layouts/footer' %>

    <%= render :partial => 'layouts/google_analytics' %>
  </body>
</html>

thanks

>
>
> --
> TWRUG Blog:
> http://blog.rubyonrails.org.tw
>
> CFC on Rails:
> http://zusocfc.blogspot.com
>
> Only two surfaces of a box:
> http://blog.pixnet.net/zusocfc
A1b97dafea62b11e7b3bef338ce3fe83?d=identicon&s=25 Billy Hsu (cfc)
on 2009-02-26 08:58
(Received via mailing list)
I usually named $j for jQuery.
<script>
  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>
  var $j = jQuery.noConflict();
</script>
<%= javascript_include_tag "jquery.color", "scripts" %>

On Thu, Feb 26, 2009 at 3:48 PM, Radha Langde <
rails-mailing-list@andreas-s.net> wrote:

> >>
> below is my rhtml file...and i followed the sequence given below... My
> section_title(params[:controller]) %> : <% end %>DashGo</title>
>    </script>
>  </body>
> > CFC on Rails:
> > http://zusocfc.blogspot.com
> >
> > Only two surfaces of a box:
> > http://blog.pixnet.net/zusocfc
>
> --
> Posted via http://www.ruby-forum.com/.
>
> >
>


--
TWRUG Blog:
http://blog.rubyonrails.org.tw

CFC on Rails:
http://zusocfc.blogspot.com

Only two surfaces of a box:
http://blog.pixnet.net/zusocfc
D5df29c19c70eadbe96e184581f1fb2b?d=identicon&s=25 Radha Langde (radha)
on 2009-02-26 13:08
Billy Hsu wrote:
> I usually named $j for jQuery.
> <script>
>   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>
>   var $j = jQuery.noConflict();
> </script>
> <%= javascript_include_tag "jquery.color", "scripts" %>
>
> On Thu, Feb 26, 2009 at 3:48 PM, Radha Langde <
> rails-mailing-list@andreas-s.net> wrote:
>
>> >>
>> below is my rhtml file...and i followed the sequence given below... My
>> section_title(params[:controller]) %> : <% end %>DashGo</title>
>>    </script>
>>  </body>
>> > CFC on Rails:
>> > http://zusocfc.blogspot.com
>> >
>> > Only two surfaces of a box:
>> > http://blog.pixnet.net/zusocfc
>>
>> --
>> Posted via http://www.ruby-forum.com/.
>>
>> >
>>
> Hi..
  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..

  How to modify scripts.js.. below is the script.



/*
  DashGo scripts (utilizing jQuery 1.2.3)
  Developed by Noah Lazar, Saforian
*/

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

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

  // Insert document icons
  $("a[href$=pdf]").not(":has(img)").append('<img class="icon"
src="/images/icon_pdf.gif" width="14" height="14" alt=" (PDF)">');
  $("a[href$=doc]").not(":has(img)").append('<img class="icon"
src="/images/icon_word.gif" width="14" height="14" alt=" (Word
Document)">');
  $("a[href$=xls]").not(":has(img)").append('<img class="icon"
src="/images/icon_excel.gif" width="14" height="14" alt=" (Excel
Spreadsheet)">');
  $("a[href$=ppt]").not(":has(img)").append('<img class="icon"
src="/images/icon_powerpoint.gif" width="14" height="14" alt="
(Powerpoint Presentation)">');

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

  // Popup Help
  initPopupHelp();

  // Hide/show boxes
  initToggleBoxes();

  // Collapsable boxes
  initCollapsables();

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

  // Selectable data tables
  initSelectables();

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

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

});



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

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


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

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

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

    return false;
  });

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

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

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

    });

    return false;
  });

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

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

    return false;
  });

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

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

    return false;
  });


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


}


// Selectable data tables
function initSelectables() {

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

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

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

  });

}


// Collapsable boxes
function initCollapsables() {

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

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

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

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

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

    return false;
  });
}


// Popup Help
function initPopupHelp() {

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


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

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

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


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

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

}



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

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


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

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


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

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

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

  });

}

>
> --
> TWRUG Blog:
> http://blog.rubyonrails.org.tw
>
> CFC on Rails:
> http://zusocfc.blogspot.com
>
> Only two surfaces of a box:
> http://blog.pixnet.net/zusocfc
A1b97dafea62b11e7b3bef338ce3fe83?d=identicon&s=25 Billy Hsu (cfc)
on 2009-02-26 15:34
(Received via mailing list)
(function($){// Code
$(document).ready(function(){});
})(jQuery);

On Thu, Feb 26, 2009 at 8:08 PM, Radha Langde <
rails-mailing-list@andreas-s.net> wrote:

> > jquery.color.js and scripts.js after you define jQuery.noConflict();
> >> >>
> >> --
> i tried using jQuery in place of $ in scripts.js. it had been working
>  Developed by Noah Lazar, Saforian
>  $("a[href$=pdf]").not(":has(img)").append('<img class="icon"
>
>  // Collapsable boxes
>  // Yellow fade messages (requires jquery.color.js plugin)
>
>    // Show destination box
>    var link = this;
>
>
>
> }
>    var url = $(this).attr("rel");
>  // Collapse closed boxes
>    $(this).parents(".collapsable").toggleClass("closed");
> }
>
>
>    })
> bottom:"+=20" }, "fast");
>  $("table.selectable tr").hover(function(){
>  $("#artistinfo input[type=text]").addClass("typetext");
>    div.title = this.title || this.alt;
>
> > Only two surfaces of a box:
> > http://blog.pixnet.net/zusocfc
>
>
>
> --
> Posted via http://www.ruby-forum.com/.
>
> >
>


--
TWRUG Blog:
http://blog.rubyonrails.org.tw

CFC on Rails:
http://zusocfc.blogspot.com

Only two surfaces of a box:
http://blog.pixnet.net/zusocfc
40db9e75b3f5899258e3bdc0c9210154?d=identicon&s=25 Conrad Taylor (conradwt)
on 2009-02-27 04:07
(Received via mailing list)
On Wed, Feb 25, 2009 at 10:20 PM, Radha Langde <
rails-mailing-list@andreas-s.net> wrote:

> I tried using
>    <script>
>    jQuery.noConflict();
>    </script>
> bt of no use. problem remains the same...
>
> any suggestions are greatly appriciated.........
>
> thankx..


Hi, please read the following:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Good luck,

-Conrad
B25b3a7c9551b6bbd93d635affb69d77?d=identicon&s=25 Andy Rappaport (arappaport)
on 2009-09-23 14:15
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
This topic is locked and can not be replied to.