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..
include jquery and use jQuery.noConflict(); before you include prototype
and try again.
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” %>
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" %>
>> 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);
});
}
(function($){
// Code
$(document).ready(function(){});
})(jQuery);
Hi, please read the following:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Good luck,
-Conrad
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