CODEWITHSUNDEEP
jquerymootoolsconflict
Akjethwani
Akjethwani

Reputation: 15

Cannot Solve Jquery and Mootools Clash

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

Upvotes: 0

Views: 456

Answers (1)

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

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.

Upvotes: 1

Related Questions