Mootools.js and jquery conflict

Hi I am using mootools.js and jquery in same page but due to mootools.js my jquery is getting scrwed up. Jquery stop to work.

I am using the code like this for jquery.

<script type="text/javascript">

function callpaper(val)
{
document.getElementById('paper').innerHTML = 'Loading Paper Please wait.....';
var option = 'com_print';
var task = 'call';
var submissiontype = val;
$.ajax({
type: "POST",
url: "index2.php",
data: 'option='+ option +'&task='+task+'&no_html=1&submissiontype='+submissiontype,
success: function(data, status){

document.getElementById('paper').innerHTML = data;
//alert();

}
});
return false;
}
</script>

Printing Option. <br />
<table>

<tr>
<td>
Size :</td>
<td>
<select name="print" onchange="javascript:callpaper('paper');">
<option value="100">
A4</option><option value="200">
B4</option><option value="300">C4</option></select></td>
</tr>
<tr>
<td>
Paper :
</td>

<td>
<div id="paper">
<select name="paper" onchange="">
<option value="">Select Paper</option>
</select>
</div>
</td>
</tr>
</table>

It is giving error..

Error: $.ajax is not a function
Source File: mysitename/index.php?option=com_print&Itemid=7
Line: 293

Where as if I am switching off mootools it works fine
Can anyone tell me any solution to get rid of this error.

Thanks,
Subikar

 

ok guys I solved the problem just upgrading mootools.js version MooTools 1.2.4.

Thanks,
Subikar

 

You can also use jQuery's non-conflict mode:
put jQuery.noConflict(); right after jQuery is included.

 

jQuery.noConflict(); also need change the jquery $ .... to jQuery