Javascript dropdown checklist failing due to prototype library

JavaScript
1

I am trying to use a javascript plugin for jQuery library that transforms a regular select html element into a dropdown checkbox list (Dropdown Check List, see http://code.google.com/p/dropdown-check-list/), however I believe that the prototype library that I am loading immediately after the jquery library is still conflicting with it somehow even though I modified my code to reflect the following changes (which is supposed to allow the use of prototype with jquery):

http://docs.jquery.com/Using_jQuery_with_Other_Libraries (Including jQuery before Other Libraries)

My code (in a cold fusion environment, which should be irrelevant) looks like this:



<html>
 <head>
  <SCRIPT LANGUAGE="JavaScript" SRC="js/jQuery/jquery.js" TYPE="text/javascript"></SCRIPT>
  <SCRIPT LANGUAGE="JavaScript" SRC="js/prototype.js" TYPE="text/javascript"></SCRIPT>
  <script language="javascript" type="text/javascript" src="js/jQuery/ui.core.js"></script>
  <script language="javascript" type="text/javascript" src="js/jQuery/ui.dropdownchecklist.js"></script>
  <script language="javascript" type="text/javascript">
	jQuery(document).ready(function() {
		jQuery("#cbo_status").dropdownchecklist({ width: 200, maxDropHeight: 120 });
	});
  </script>
 </head>
 <body>
  <select id="cbo_status" name="cbo_status" multiple="multiple">
   <option value="-1">All</option>
   <option value="1" SELECTED>Assigned</option>
   <option value="2" SELECTED>In Progress</option>
   <option value="3" SELECTED>Complete</option>
   <option value="4" SELECTED>Verified Resolved</option>
   <option value="5" SELECTED>Will not be addressed</option>
   <option value="6" SELECTED>Wishlist</option>
  </select>
 </body>
</html>

When I run the debugger, here’s the error I’m still receiving:

Error: Object doesn’t support this property or method (pointing to the line below, character 3)
jQuery(“#cbo_status”).dropdownchecklist({ width: 200, maxDropHeight: 120 });

Does anyone have any idea why this might still be failing? :confused:

2

When I try out your sample code in a local environment, with all of the appropriate scripts loading, it works fine.

To help further we would need to investigate some test code that’s up on the web.

3

I’ve tried enabling jQuery.noConflict(); and I still receive the exact same error so that’s why I tried this:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries#Including_jQuery_before_Other_Libraries

Even if that suggestion is wrong because loading prototype after jQuery clobbers jQuery’s $ object (and you might be right that it is wrong because taking that approach still doesn’t fix my problem), I’m still not sure where to go from here!

4

I’ve checked and re-checked and I’m positive that the jQuery library is definitely loading and exists on the page!

I’ve attached a copy of the html source produced by ColdFusion. I had to omit a few things due to company privacy policies, but nothing I ommited was important or had anything to do with the form and the dropdown checklist functionality. Everything you see should be all you need, I hope! :slight_smile:

5

Let’s go back then to my original post, post #2.

Have you confirmed that no_conflict is enabled with jQuery?
You do know that loading prototype after jQuery clobbers jQuery’s $ object, don’t you?

http://api.jquery.com/jQuery.noConflict/ has the details on how to run jQuery compatibly together with other libraries, such as prototype.

6

lol … thanks pmw57, but I already included that link in my original post and I tried all those suggestions with no luck! Any other thoughts?

7

Have you checked that the jQuery library is actually loading and exists on the page?

Other than that, you may need to provide us with a test page for us to diagnose further.

8

This may be of some use.

Using jQuery with Other Libraries