Cannot Solve Jquery and Mootools Clash

Question

I am a beginner... I have used Two Jquery ( One is Jquery For Pop up-"Kind Of ajax" from Color Box and Another is Jquery for Load More Options that Fetches Data-Again Ajax) It is Clashing/Conflicting with Mootools(For Calender Functionality). here is My Calling Code..

<script type="text/javascript" src="cal/js/mootools-1.2.4-core.js"></script>
<script type="text/javascript" src="cal/js/mootools-1.2.4.4-more.js"></script>
<script type="text/javascript" src="cal/js/calendar-eightysix-v1.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script src="javascripts/popup-jquery/jquery.popup.googleapis.js"></script>
<script src="javascripts/popup-jquery/jquery.colorbox.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    // For jQuery scripts
(function($){   
    $(document).ready(function(){
    //Calling Pop-up 
        $(".example5").colorbox();

        //Calling More Button
        $('.more').live("click",function() 
            {
                var ID = $(this).attr("id");
                if(ID)
                {
                    $("#more"+ID).html('<img src="load/moreajax.gif" />');
                    $.ajax({
                        type: "POST",
                        url: "load/ajax_more_calender_content.php",
                        data: "lastmsg="+ ID, 
                        cache: false,
                        success: function(html){
                            $("div#updates").append(html);
                            $("#more"+ID).remove();
                            }
                        });
                }
                else
                {
                    $(".morebox").html('The End');
            }
        return false;
        });
    });
})(jQuery);


    (function($) {
        window.addEvent('domready', function() {

    //Example XIII
        var calendarXIII = new CalendarEightysix('exampleXIII', { 'injectInsideTarget': true, 'alwaysShow': true,'draggable': true, 'pickable': true });
        calendarXIII.addEvent('rendermonth', function(e) {
            //The event returns all the date related elements within the calendar which can easily be iterated
            e.elements.each(function(day) {
                day.set('title', day.retrieve('date').format('%A %d %B'));




                    day.setStyles({  'cursor': 'pointer' }).addEvent('click', function() { window.location='../calender.php?date='+day.retrieve('date').get('date')+'&month='+day.retrieve('date').get('month')+'&year='+day.retrieve('date').get('year'); } );             
            });
        });
        calendarXIII.render(); //Render again because while initializing and doing the first render it did not have the event set yet

    });
})(document.id);
</script>

I Have Read in Many Forums and implemented it in the above mentioned manner, the Working Code is only the Pop-up And Load More Option(jQuery) But not Calender(mootools). and still the code is not working... Any Help will be Highly appreciable...!!!! Thanking You

I remember that I was using something like `$.jQuery()` instead `$()` for defining the selectors but you should do one thing before doing this, I can't remember right now, do a search on the net. I think it's the best way and I tested it with MooTools, no conflict occurred at all. — MahanGM, Jan 05 '12 at 13:47
Thank You Sir... But the jquery is Working its the Mootools that is not working .... I tried your Suggestion But the Same Problem is Still Panicking me... — Akjethwani, Jan 05 '12 at 13:51
Found it in my previous works. First I did a `jQuery.noConflict();` next I use `jQuery('')` for selectors. Try this and report me! — MahanGM, Jan 05 '12 at 14:04
NO sir It is not Working Still... The jQuery Plugin was Already Working it was the Mootools Plugin that is not working... I think it have got something Wrong with The Mootools Code... that is not Working So, I have Kept the Code As Above Only and Checked it in Console of the Firebug... it shows Error in the mootools-1.2.4-core.js and Gives the Error Cannot Create Append Child...!!! Do you Have any Idea of Mootools working mechanism... If You Have Please Check My Mootools Code Part... — Akjethwani, Jan 05 '12 at 14:15
Do you have a link? Or a JS fiddle so we can help you debug properly? — Tim Wickstrom, Jan 06 '12 at 17:33

score 1 · Answer 1 · answered Jan 05 '12 at 14:34

1

you are fixing your instantiation but is the calendar picker plugin using document.id or $? this calendar script has things like this.target = $(target); - edit it and fix to document.id or put in a closure like your instantiation.

also, you should load mootools and its dependencies last - if $ is defined elsewhere, it automatically reverts to document.id since v1.2.4. you may also want to look at Arian's DatePicker on the mootools forge, it's for mootools 1.3+ and is written in a way that does not clash.

answered Jan 05 '12 at 14:34

Dimitar Christoff

26,147
8
50
69

Thank You Sir Actually i m a Beginner... I Dont Exactly Know How to Edit the Major Coding Things Like You mentioned this.target=$(target);.. to Document.id... Please Help me with That also...? also the Calender i m using is the one which have the got dates as the link that passed the current date to new page that processes the data According to the Data passed... i have searched alot of calenders for this and at last i found this calender... now to start all over again will be like hell.... please help me with this... thanking you... – Akjethwani Jan 05 '12 at 14:43

Cannot Solve Jquery and Mootools Clash

1 Answers1