The Life and Times of Michael Shadle

excellent solution! worked like a charm! thank you!

Can I see your html, I don't understand where to put it. I am not to good with javascript.
Thanks

This also fixes the issue between lightbox2 and jQuery Multi Level CSS Menu #2...

Genious

THIS ROCKS! I been starring at my wordpress theme code for days.. I know it must be some conflict going on there.. and YOU .. YOU GAVE ME THE ANSWER! this is so awesome!

Sorry for being stupid. But I tried the noConflict() function. I placed it RIGHT AFTER jQuery.js is called, but BEFORE prototype is called. In between these two, I had other UI libraries being called as well. I assigned jQuery to new var $j, and I changed the call in my function (which is called after all the libraries) to refer to $j instead of $, it still doesn't work.

It looks like my UI libraries functions are now broken (from the error I am getting like "the.style" is null or not an object).

Can you please help?? Thanks so much in advance!

Honestly, I don't think I can help. I got lucky with this a while ago, and I simply done have the mental patience to try and work with it again... sorry 🙂

Thanks for this great solution.
But I have one problem with this.
I am using "jquery.blockUI.js" also.
I have put "var JQ = jQuery.noConflict();"
I changed all "$" with "JQ" in "jquery.blockUI.js"
but as I use "JQ.blockUI({.......});", I am getting the javascript error that "JQ.blockUI is not a function"...

So what should I do to make working ?

I don't know... I'd try the author of blockUI 🙂

okay, so i'm running proto/jquery together and it works fine on Safari and FF with out having to add jQuery.noConflict(); but it won't work on IE6/7... separately both scripts work fine in IE6/7. When I open my page in IE6/7 the jquey.js works but the proto/scriptac opens my lightbox in a new page... I tried the jQuery.noConflict(); fix with no results. I'm not sure if i'm implementing it properly...i'm new to this and eager to learn. I also tried moving jquery script above the proto script recommended on other sites and nothing.
here is the code i need help with. help me obe wan you're my only hope...
here is the code i need help with.

      var GB_ANIMATION = true;
      $(document).ready(function(){
        $("a.greybox").click(function(){
          var t = this.title || $(this).text() || this.href;
          GB_show(t,this.href,420,450);
          return false;
        });
      });

Sorry dude, but I've got too much on my plate right now to be able to help. I haven't touched this code in a long time.

You should try #jQuery on irc.freenode.net ...

Worked like a charm with mootools and jquery conflict in joomla. I couldn't get virtuemart working, but by simply adding your code "var J = jQuery.noConflict();" all problems disappeared! Many Thanks

i've benn sitting in front of this problem for hours. i knew that there was a conflict, but i couldnt get it to work, since I read this article.
thank you very much

Thank you very much!!! I have searched a lot I finally found this text :)) Great idea! Thanks..

var J = jQuery.noConflict();

at the top of your Jquery function;
then replace all instances of $ with J inside your jQuery function!

Worked perfectly!

@Anonymous
As explained in this post you don't need to replace all your "$" with "J". All you have to do is to use this javascript workaround:

function($){
  // ur code that uses $
  $('#myId').show();
}(jQuery);

Thanx so much!!!! 😀 worked like a charm! 😀

Where do I place the jquery code? Im have a issue with the jquery in featured content glider. Its conflicting with smash galleries and lightbox-plus, any help please?

I been trying to find the anwser for weeks.

Look a couple posts up. That's probably the best answer I'd give.

great, it works.

When i combined a modal dialog box using facebox.js and a slidehow in a page, it did not work.

i put this like the script above:

.......*some jQuery*
.......

var J = jQuery.noConflict();

/*** and then i changed all $ to J in function () ***/

accomplished

thanks

I have the same problem as Dhaval Patel
I am using jQuery.js and dataTable.jQuery.js which conflicts with protoType.js
the noConflict() works perfect for jQuery, but the dataTable.jQuery.js says function not found and tries to look into protoType.js....
Any idea to get arround this.. ??

I can't promise i can help but if you pastebin'ed the source code to dataTable file (which should be the place you need to make a change, not in jQuery.js) perhaps someone can help out or I can find the culprit quick. Javascript gives me a headache. Hence why I love jQuery 🙂

@mike
Put it at the top of you .js file and then replace any '$' you've used. for example:

$(function () {
// your code here
}

becomes:

var J = jQuery.noConflict();
J(function () {
// your code here
}

(Thanks for the post!)

Waouhhh!! What's a wonderfull topic, there was a long time I was looking for this solution !!

Thanks, Thanks and Thanks again!!

Arno

http://htmlerror-info.blogspot.com/2009/12/prototypejs-in-li.....ckbox.html

JQuery continaully saves my sanity from javascript embolisms! Thanks for posting this out there.

Great posting. Thank you so much!!! It works great!!

Worked perfectly!
Thank you...

Hello, when I use this solution IE 8 crashes. The other browser work fine.

Great, I had conflict between two plugins in WordPress (Featured Content Galary and WPReviewengine) and put your line in jquery.js. SOLVED. thx

u r the real genious man.

Hey,

Thanks for this solution, I wrote a small script based on the jTwitter library to fetch my latest tweets and it was conflicting with LightBox, but this solved it 🙂

Cheers!

Hi,

Thank you very much for your idea.

Worked perfectly!

Hey,

Thanks! I was looking for a solution like this.
8)

OK, well! Thanks it worked for me, at last, I was missing all of the other $ in the code. I'm using proto for lightbox and jquery for paging

My code before adding ".noConflict"

        var J = jQuery.noConflict();
            // This demo shows how to paginate elements that were loaded via AJAX
            // It's very similar to the static demo.
        
            /**
             * Callback function that displays the content.
             *
             * Gets called every time the user clicks on a pagination link.
             *
             * @param {int}page_index New Page index
             * @param {jQuery} jq the container with the pagination links as a jQuery object
             */
			function pageselectCallback(page_index, jq){
                var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
                $('#Searchresult').empty().append(new_content);
                return false;
            }
           
            /** 
             * Callback function for the AJAX content loader.
             */
            function initPagination() {
                var num_entries = $('#hiddenresult div.result').length;
                // Create pagination element
                $("#Pagination").pagination(num_entries, {
                    num_edge_entries: 2,
                    num_display_entries: 8,
                    callback: pageselectCallback,
                    items_per_page:1
                });
             }
                    
            // Load HTML snippet with AJAX and insert it into the Hiddenresult element
            // When the HTML has loaded, call initPagination to paginate the elements        
            $(document).ready(function(){      
                $('#hiddenresult').load('snippet.html', null, initPagination);
            });

Code after adding .noConflict, notice the use of J instead of $, which occurs 6 times.

(jquery was placed before prototype)

        var J = jQuery.noConflict();
            // This demo shows how to paginate elements that were loaded via AJAX
            // It's very similar to the static demo.
        
            /**
             * Callback function that displays the content.
             *
             * Gets called every time the user clicks on a pagination link.
             *
             * @param {int}page_index New Page index
             * @param {jQuery} jq the container with the pagination links as a jQuery object
             */
			function pageselectCallback(page_index, jq){
                var new_content = J('#hiddenresult div.result:eq('+page_index+')').clone();
                J('#Searchresult').empty().append(new_content);
                return false;
            }
           
            /** 
             * Callback function for the AJAX content loader.
             */
            function initPagination() {
                var num_entries = J('#hiddenresult div.result').length;
                // Create pagination element
                J("#Pagination").pagination(num_entries, {
                    num_edge_entries: 2,
                    num_display_entries: 8,
                    callback: pageselectCallback,
                    items_per_page:1
                });
             }
                    
            // Load HTML snippet with AJAX and insert it into the Hiddenresult element
            // When the HTML has loaded, call initPagination to paginate the elements        
            J(document).ready(function(){      
                J('#hiddenresult').load('snippet.html', null, initPagination);
            });

Thanks again Mike

sorry, the 1st code without noConflict, shouldn't have the noConflict in the start! cut n paste job, sos

I spent almost 4 hours with this problem. Now it works!

Thanks a lot!

Hugo

thanks alot! been reading jquery doc but didnt understand. it's clearer here. my prob has been solved 🙂

Thank you!!! I'm pretty new to jQuery and this issue was driving me nuts!

Can't thank you enough for the solution.

mozzle

Excellent !! Thank you so much for the sharing!!

Thanks for posting. I had been trying to integrate a jquery slideshow into my magento frontpage and had found the conflict with prorotype.

I had read many of the no conflict workarounds but just couldn't get them to work then I found and tried yours and I now have my navigation back.

If people were to share their coding successes, no matter how small, it would help so much

@craig
That's what I try to do. If I can document something clearly and help someone else out, hopefully it will get out there for other people to benefit from!

@Anonymous
Works perfectly, thanks. For anyone not clear, it has been said above, but you basically have to:

1. Add this line to the top of your script section that first uses jQuery:
var J = jQuery.noConflict();

2. Replace $ with J, e.g.
$("#mysearch").autocomplete becomes J("#mysearch").autocomplete

Note, I only had a small bit of code using jQuery, so this was easy. The rest of my code used prototype.js, which I could leave alone. The reason you might want to use two libraries is if you are meshing two different things together. If you are starting afresh it would be best to avoid the clash in the first place.

StuRB