How to use AJAX and JQuery on same page

If you are about to use AJAX and JQuery coding on the same page, it won’t work.

Don’t worry. Here is the solution,

Add this line on your layout or view file, wherever necessary

<head>

<script type=”text/javascript”>JQuery.noConflict();</script>

</head>

and then,

  • When calling jquery use ‘jQuery’ instead of ‘$’
  • When calling lightbox(ajax) use ‘document.getElementById’ instead of ‘$’

Example

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Money Bee</title>
<link rel=”stylesheet” href=”stylesheets/login/style.css” type=”text/css” />

<link rel=”stylesheet” type=”text/css” href=”stylesheets/login/jquery-foxiblob-0.1.css” />

<%= javascript_include_tag ‘prototype.js’, ‘lightbox.js’%>
<%= stylesheet_link_tag ‘lightbox’%>
<script type=”text/javascript” src=”javascripts/login/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”javascripts/login/jquery-foxiblob-0.1.min.js”></script>
<script type=”text/javascript” src=”javascripts/login/jquery.corners.min.js”></script>
<script type=”text/javascript”>jQuery.noConflict();</script>
</head>

<body>
<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(‘#menu_list’).foxiblob({opacity:0.6});
});
</script>

<script>jQuery(document).ready( function(){
jQuery(‘.rounded’).corners(“10px”);
});</script>

On the above, i have called many JQuery plugins and also used lightbox which gives AJAX request.

By inserting a line, <script type=”text/javascript”>jQuery.noConflict();</script> i made it work on the same page.