Accordion error through Prototype

Accordion error through Prototype

I am trying to use the jQuery accordion in my JSP but encounter some issues from Prototype 1.4.0. I have no way of booting Prototype from the application (especially since it's included in the page that encapsulates mine, of which I have no access or control), so I'm left trying to make the two coexist well enough.

The code is pretty basic and rudimentary at this point, but I'm simply trying to prove the two can coexist and go from there. Running the page displays everything correctly with the first accordion open. Clicking on the second one closes the first and displays the second but leaves me with the following error and a dead widget:

Message: Array length must be assigned a finite positive number

Line: 464

Char: 5

Code: 0

URI: http://localhost:8080/energy/javascript/ajax/prototype-1.4.0.js

-------------- code ---------------------

<script type="text/javascript" src="<%=request.getContextPath() %>/javascript/energy/jquery/development-bundle/jquery-1.4.2.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/javascript/energy/jquery/development-bundle/ui/jquery.ui.core.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/javascript/energy/jquery/development-bundle/ui/jquery-ui-1.8.5.custom.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/javascript/energy/jquery/development-bundle/jquery-1.4.2.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/javascript/energy/jquery/development-bundle/ui/jquery.ui.widget.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/javascript/energy/jquery/development-bundle/ui/jquery.ui.tabs.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/javascript/energy/jquery/development-bundle/ui/jquery.ui.accordion.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/javascript/energy/jquery/development-bundle/ui/jquery.ui.dialog.js"></script>

<link type="text/css" href="<%=request.getContextPath() %>/javascript/energy/jquery/development-bundle/demos/demos.css" rel="stylesheet" />

<script>

var jQ = jQuery;

jQ.noConflict();

jQ(document).ready(function($) {

jQ( "#jqAccordion" ).accordion();

});

</script>

<div class="demo">

<div id="jqAccordion">

<h3><a href="#">Search by ID</a></h3>

<div>

<form class="feedbackform">

<div class="fieldwrapper">

<label for="username" class="styled">Order/DTN/BOL #</label>

<div class="thefield">

<input type="text" id="username" value="" size="30" />

</div>

</div>

<div class="buttonsdiv">

<input type="submit" value="Search" style="margin-left: 150px;" />

</div>

</form>

</div>

<h3><a href="#">Search by Date</a></h3>

<div>

<form class="feedbackform">

<div class="fieldwrapper">

<label for="agegroup" class="styled">Specific Period</label>

<div class="thefield">

<select id="agegroup">

<option value="2.1">7 Days</option>

<option value="3">10 Days</option>

<option value="4.1">14 Days</option>

<option value="5.2">30 Days</option>

<option value="5.3">45 Days</option>

</select>

 -OR-

</div>

<div class="fieldwrapper">

<label for="from_dt" class="styled">Date Range</label>

<div class="thefield">

<input type="text" id="from_dt" value="" size="10" style="width:100px"/>

  to  

<input type="text" id="to_dt" value="" size="10" style="width:100px"/>

</div>

</div>

<div class="buttonsdiv">

<input type="submit" value="Search" style="margin-left: 150px;" /> <input type="reset" value="Reset" />

</div>

</div>

</form>

</div>

</div>

</div>

Topic Participants
mark.ruch19
zytszone