SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    NS, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Javascript dropdown checklist failing due to prototype library

    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_...ther_Libraries (Including jQuery before Other Libraries)

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

    Code:
    <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?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    This may be of some use.

    Using jQuery with Other Libraries
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    NS, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    NS, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Attached Files Attached Files

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Brad_Armitage View Post
    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!
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    NS, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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_...ther_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!

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •