Javascript using jQuery.js and prototype.js doesnt work 2get


#1

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

bt of no use. problem remains the same…

any suggestions are greatly appriciated…

thankx…


#2

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

On Thu, Feb 26, 2009 at 2:20 PM, Radha L. <
removed_email_address@domain.invalid> 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


#3

Billy H. wrote:

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

On Thu, Feb 26, 2009 at 2:20 PM, Radha L. <
removed_email_address@domain.invalid> wrote:

I tried using

I did the same thing…
first in included jQuery.js then

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…

<% if @artist %><%= @artist.name %> <%= section_title(params[:controller]) %> : <% end %>DashGo
<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' %>
<%= yield %>

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

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

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


#4

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” %>

On Thu, Feb 26, 2009 at 3:48 PM, Radha L. <
removed_email_address@domain.invalid> wrote:

below is my rhtml file…and i followed the sequence given below… My
section_title(params[:controller]) %> : <% end %>DashGo

> 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


#5

Billy H. wrote:

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” %>

On Thu, Feb 26, 2009 at 3:48 PM, Radha L. <
removed_email_address@domain.invalid> wrote:

below is my rhtml file…and i followed the sequence given below… My
section_title(params[:controller]) %> : <% end %>DashGo

> 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(’(PDF)’);
$(“a[href$=doc]”).not(":has(img)").append(’(Word 
Document)’);
$(“a[href$=xls]”).not(":has(img)").append(’(Excel 
Spreadsheet)’);
$(“a[href$=ppt]”).not(":has(img)").append(’(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("");

// 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(’’);

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

// Insert help icon
$(".help").append(’Help’);

$(".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


#6

(function($){// Code
$(document).ready(function(){});
})(jQuery);

On Thu, Feb 26, 2009 at 8:08 PM, Radha L. <
removed_email_address@domain.invalid> 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


#7

Billy H. 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


#8

On Wed, Feb 25, 2009 at 10:20 PM, Radha L. <
removed_email_address@domain.invalid> wrote:

I tried using

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