View Full Version : jQuery and Ajax Conflict

09-22-2010, 04:21 PM
Hi guys,

Using jQuery Tabs to display some data but I also have an AjaxExpansion (WebObjects/WOnder feature) on the page. WOnder is smart and only includes the following on the page if Ajax is used:

<script type="text/javascript" src="/cgi-bin/WebObjects/.../WonderLatest/Frameworks/Ajax/Ajax/build/Ajax.framework/WebServerResources/prototype.js"></script>
<script type="text/javascript" src="/cgi-bin/WebObjects/.../WonderLatest/Frameworks/Ajax/Ajax/build/Ajax.framework/WebServerResources/effects.js"></script>
<script type="text/javascript" src="/cgi-bin/.../WonderLatest/Frameworks/Ajax/Ajax/build/Ajax.framework/WebServerResources/wonder.js"></script>

The above scripts are written to the page at the very end of the head section.

On the page I have the following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

<div id="tabs">
<li><a href="#section-1" title="">Latest press</a></li>
<li><a href="#section-2" title="">Latest PR</a></li>
<div id="section-1">Section 1</div>
<div id="section-2">Section 2</div>

When done this way the Ajax is broken but the jQuery tabbing works.

When I move the jQuery scripts into the head, the Ajax scripts which are written after the jQuery take precedence and the Ajax works but the jQuery tabs is broken.

I have been scratching my head and need help. Any help appreciated.


09-22-2010, 06:05 PM
I'm not familiar with Wonder, but it's including the Prototype JS library on your page.

Use jQuery noConflict() (http://api.jquery.com/jQuery.noConflict/) to make them play nice together.