prototype.js / jQuery.js conflict and resolution

when you use jQuery and prototype javascript frameworks togather on the same page, it creates conflicts.

jQuery has provided a resolution to this conflict. The resolution goes as below:

Overriding the $-function:

1) you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();

     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>

 </html>

2) Additionally, there's another option. If you want to make sure that
jQuery won't conflict with another library - but you want the benefit
of a short name, you could do something like this:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     var $j = jQuery.noConflict();

     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

For more information on the above topic please refer to http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Ajax.Updater syntax

new Ajax.Updater(window.opener.document.getElementById(‘facilityBookingFrm’), saveBookingUrl, {asynchronous:true, evalScripts:true, method:’POST’, onComplete:function(request, json){ setCalendar(‘\”+objDateS+\”‘);  setTargetDate(‘event2’, ‘\”+objDateS+\”‘ ); timeSlotsArray = new Array(); timeSlotsConflictArray = new Array();  thirdClick = false; clearBoxes(0); eval(‘\”+evalToScript+\”‘); Calendar.setup({ inputField : ‘start_date’, ifFormat : ‘%b, %d %Y’, button : ‘f_trigger_c’, align : ‘Tl’, position : positionArr,  singleClick : true }); Calendar.setup({ inputField : ‘end_date’, ifFormat : ‘%b, %d %Y’, button : ‘e_trigger_c’, align : ‘Tl’, position : positionEArr,  singleClick : true }); }, onLoading:function(request, json){}, parameters: { startDate: fab_starttime, selectedSlot: selectedSlot, repeatWeekly: fab_repeat_weekly, repeatWeekday: fab_repeat_weekday, repeat: fab_repeat, reminder_tim: fab_sendreminder_type, reminder_mins: fab_sendreminder_beforemins, fac_id: fac_id, endDate: fab_endtime, selectedConflictSlot: selectedConSlot, reConflicts: reConflicts, currdateStr: currdateStr, otherHVar: otherHVar, conflictResol: ‘1’ } });

The syntax goes as follows:

new Ajax.Updater ( ‘elementToBeUpdated’, ‘urlInRequest’, { asynchronous:true, evalScripts:true /* true or false*/, method: ‘POST’ /*’POSTorGET’*/, onComplete:function(request, json){ /*Action after completion of request */ } , onLoading:function(request, json){ /*Action while loading */ }, parameters: { /* post parameters to be passed*/ } } )