JavaScript - 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? Similar TutorialsHi, all~..According to ECMAScript, the root of the prototype chain is Object.Prototype. Each object has an internal property [[Prototype]] that could be another object or NULL.... However, it also says that every function has the Function prototype object: Function.Prototype, it confused me, because a function is an object, for a function object, what is its function prototype and object prototype..For example: Code: var x = function (n) {return n+1;}; what is the relationships of x, Object.Prototype and Function.Prototype Thx a lot !!!!!!!!! Hi im in the middle of creating my own javascript library but got stuck I can do everything for this library I just got stuck on how to make it flow through a list of strings like jQuery does. For example jQuery allows you to write a string like this: $('li').add('p').css('background-color', 'red'); Which they can select all li tags add a p tag inside then change the background color of that tag, What im asking is how can I go about doing this where I can create a similar system which allows me to flow through my class functions. Right now its a very small code because I started again to allow better overview of where things are but this is it so far. This allows the use of both SDK and $ at the start of the function for example. $.Display({'file':'index.php','id':'divid'}); And SDK.Display({'file':'index.php','id':'divid'}); Code: (function(window) { var $ = { Display: function(info) { this.call(info.file,info.id,'file='+info.file); }, call: function(file,id,parameters) { if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById(id).innerHTML=xmlhttp.responseText; } } xmlhttp.open("POST",file,true) xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded") xmlhttp.send(parameters) }, Flash: function(params) { if(params.file){alert(params.file);} if(params.id){alert(params.id);} } }; // Expose SDK to the global object window.SDK = window.$ = $; })(window); Hey guys! Was wondering if anyone knew a simpel javascript library? With things like alert ,displayDate() and other basic things. Im pretty new to JS so I think that a lib like jquery would be to hard for me right now. Thx // Kiwo Hello, UPJS is an open source JavaScript Library that caters needs and requirements of web developers. It is currently under development, we encourage you to use this Library. For any bug, we will be glad to help you. Please follow upjs on facebook, http://www.facebook.com/pages/upjs/239536299419136 http://www.upjs.org Have a nice day! I read the posting guidelines but I still have questions that I would love to be answered by anyone willing to tolerate me. I started studying javascript when I decided that I wanted to create a dynamic webpage after viewing some books that were made to pageflip with Javascript and after viewing a ton of animations. So I figured since everyone keeps saying Javascript is simple that if all I wanted to do was to make a book extend outwards on mouseover and then open up on click and flip pages which they already have a code for that it wouldn't be so difficult. I've read everything I could practiced a little bit, I'm not fluent but I do have a goal and a time. The problem for me comes up with figuring out what I need to do in order to make it appear as if the book is coming out of a book shelf. There is a lot of information on animations where flat objects rise above clouds. I am thinking that I would have to use some sort of sprite of a row of books both sorta sideways where you can see the side of the book as well as the edge, and both a row of books on a shelf, or perhaps a row of books with some of the books being pulled out and then on mouse over animate the scene so that it looks like the book is being pulled out. Would that work? Or is there a simpler way? Another way or I don't know. Is there a code that can make it look like a book is extending outwards without an animation or would I need to create an animation for that? Thank you. Hi all, can anyone recommend me nice tooltip script which is javascript library independent, meaning no help/code from any of libraries such as (jquery, prototype,scriptalicious, mootools,extjs etc.). Here is the one I particularly like but it uses protoype and that is not option for me now, because I'm just integrating something else into already existing huge script and I don't wanna mess up old functionality or bring some additional unnecessary overhead. Or even better if you can give me some guidelines / pointers , how to make one from scratch that would be acceptable for me also. The most important thing is that it points from above downwards, because I found like dozen of good ones but pointing from below. Here is an example what I mean when I say from pointing from above. Thank you Hi - I have an ASP.Net 4.0 solution that runs fine on a Windows 2008 server. However, I've just been given a new Windows 7 64-bit machine to use as my development machine and I'm having a problem with one of my aspx pages. This page has some javascript on it, which runs fine, but then it gets to the following code: Code: <script type="text/javascript"> //<![CDATA[ var theForm = document.forms['aspnetForm']; if (!theForm) { theForm = document.aspnetForm; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script> This not code that I've written; it's code that's generated client-side that I see as I'm debugging my app in Visual Studio 2010 (trying to figure out what the $^#$ is going on). At any rate, once this code completes, the app does nothing. The debugger should take me to some server-side code, but it doesn't. It just sits there. The result is that the page doesn't do what it's supposed to do (no inserts to databases, no success messages, no nothing). As I said, this problem is restricted to my W7 64-bit machine; it runs fine on W2008. Other pages with javascript in the same solution work fine on my W7 machine. I found a post (http://dopostback.net/index.php/net-...anel-problems/) that discusses a similar issue within an UpdatePanel, but I'm not using UpdatePanel. My page does have hidden controls on it, but so do other pages that work just fine. Does anyone know what could be causing this? Thanks! I have an javascript coding issue with regards to a tabbed menu. The code is supposed to hide the unselected divs and show the selected div, but all divs are showing and no tab is selected when the page initialises. The source code is viewable he http://www.kenaani.co.uk I was following this tutorial: http://www.elated.com/articles/javascript-tabs/ Which works fine in this example: http://www.elated.com/res/File/artic...ript-tabs.html I have tried commenting out the other scripts, and the divs still show on the page, so I don't think its a conflicting issue. Am hoping that someone can spot whatever is going wrong. Qatrix is a new kind of JavaScript library for easily building up high performance web application with less code. And now is released today. The features of Qatrix a Hardware Accelerated Animation Qatrix will use the native CSS3 transition to process the animation as possible. And this kind of native basic process operation will enable hardware acceleration by browser. The animation of Qatrix will be more faster and more smoother. High performance code Qatrix is using more native code and special design to increase the performance. Web application will run much more faster and more efficient. Easy-to-learn The name of functions on Qatrix is familiar with the most popular JavaScript jQuery. It will be much more easy to use without re-learn other new concept and knowledge. Cache system Qatrix included a simple cache system to storage and fetch data with high speed. Incredible size Only 6KB compressed and gzipped file size with 60+ functions. Load script instantly without expectation. Read more and download: http://qatrix.com im currently using a prototype add on for one of my sites and id like to convert it to mootools... problem is, i dont know the first thing about prototype! i stumbled upon this before i learned any javascript and ive gotten to know mootools and like using it... heres the code, let me know if anyone can help! Code: /** * @author Bruno Bornsztein <bruno@missingmethod.com> * @copyright 2007 Curbly LLC * @package Glider * @license MIT * @url http://www.missingmethod.com/projects/glider/ * @version 0.0.3 * @dependencies prototype.js 1.5.1+, effects.js */ /* Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/ */ Glider = Class.create(); Object.extend(Object.extend(Glider.prototype, Abstract.prototype), { initialize: function(wrapper, options){ this.scrolling = false; this.wrapper = $(wrapper); this.scroller = this.wrapper.down('div.scroller'); this.sections = this.wrapper.getElementsBySelector('div.section'); this.options = Object.extend({ duration: 1.0, frequency: 3 }, options || {}); this.sections.each( function(section, index) { section._index = index; }); this.events = { click: this.click.bind(this) }; this.addObservers(); if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration }); // initialSection should be the id of the section you want to show up on load if(this.options.autoGlide) this.start(); }, addObservers: function() { var controls = this.wrapper.getElementsBySelector('div.controls a'); controls.invoke('observe', 'click', this.events.click); }, click: function(event) { this.stop(); var element = Event.findElement(event, 'a'); if (this.scrolling) this.scrolling.cancel(); this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration }); Event.stop(event); }, moveTo: function(element, container, options){ this.current = $(element); Position.prepare(); var containerOffset = Position.cumulativeOffset(container), elementOffset = Position.cumulativeOffset($(element)); this.scrolling = new Effect.SmoothScroll(container, {duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])}); return false; }, next: function(){ if (this.current) { var currentIndex = this.current._index; var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1; } else var nextIndex = 1; this.moveTo(this.sections[nextIndex], this.scroller, { duration: this.options.duration }); }, previous: function(){ if (this.current) { var currentIndex = this.current._index; var prevIndex = (currentIndex == 0) ? this.sections.length - 1 : currentIndex - 1; } else var prevIndex = this.sections.length - 1; this.moveTo(this.sections[prevIndex], this.scroller, { duration: this.options.duration }); }, stop: function() { clearTimeout(this.timer); }, start: function() { this.periodicallyUpdate(); }, periodicallyUpdate: function() { if (this.timer != null) { clearTimeout(this.timer); this.next(); } this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000); } }); Effect.SmoothScroll = Class.create(); Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), { initialize: function(element) { this.element = $(element); var options = Object.extend({ x: 0, y: 0, mode: 'absolute' } , arguments[1] || {} ); this.start(options); }, setup: function() { if (this.options.continuous && !this.element._ext ) { this.element.cleanWhitespace(); this.element._ext=true; this.element.appendChild(this.element.firstChild); } this.originalLeft=this.element.scrollLeft; this.originalTop=this.element.scrollTop; if(this.options.mode == 'absolute') { this.options.x -= this.originalLeft; this.options.y -= this.originalTop; } }, update: function(position) { this.element.scrollLeft = this.options.x * position + this.originalLeft; this.element.scrollTop = this.options.y * position + this.originalTop; } }); G'day, How would I go about copying all the prototype functions AND the constructor from one object into another object, and then call them? Code: function myOriginal() { alert('Hello'); } myOriginal.prototype.example = function() { alert('In example '+this.test); } function myNewThing() { // Copy myOriginal into this object here this.oldconstructor(); // Should now display "Hello" this.test = 'from myNewThing'; this.example(); // Should now display "In example myNewThing" } I know I can use this.example.call(this), but that's not an acceptable solution. I want to deploy this style over dozens, potentially hundreds of objects. Thanks muchly, Your friend from server-side... hi, i'm currently stumped by the following code. what's the point of using x.constructor.prototype? (highlighted in red) why not directly use x.prototype.classname to check whether 'classname' property is in this class? thx in advance Code: function getType(x) { // If x is null, return "null" if (x == null) return "null"; // Next try the typeof operator var t = typeof x; // If the result is not vague, return it if (t != "object") return t; // Otherwise, x is an object. Use the default toString( ) method to // get the class value of the object. var c = Object.prototype.toString.apply(x); // Returns "[object class]" c = c.substring(8, c.length-1); // Strip off "[object" and "]" // If the class is not a vague one, return it. if (c != "Object") return c; // If we get here, c is "Object". Check to see if // the value x is really just a generic object. if (x.constructor == Object) return c; // Okay the type really is "Object" // For user-defined classes, look for a string-valued property named // classname, that is inherited from the object's prototype if ("classname" in x.constructor.prototype && // inherits classname typeof x.constructor.prototype.classname == "string") // its a string return x.constructor.prototype.classname; // If we really can't figure it out, say so. return "<unknown type>"; } Code: /** * @class TestInheritance * * This is a class and it's constructor all in one but the constructor is not set yet */ function TestInheritance(){ this.testName; return this; } /** * @extends Util * Make sure this is called after the constructor/class declaration */ TestInheritance.prototype = new Util(); /** * @ctor TestInheritance * Set it to itself if there isn't an explicit constructor */ TestInheritance.prototype.constructor = TestInheritance; /** * @extends Util * This specifically is set to allow TestInheritance to access it's parent's identity */ TestInheritance.prototype.parent = new Util(); /** * @extends Util * @argument testName String * All functions are called after setting the prototype */ TestInheritance.prototype.setTestName = function(testName){ this.testName = testName; } How would I reference the same Util class on both the prototype and the parent? Anyone wanna give me some pointers on how prototypes work exactly? ;o Especially in the context of this code: Code: var chatscroll = new Object(); chatscroll.Pane = function(scrollContainerId){ this.bottomThreshold = 20; this.scrollContainerId = scrollContainerId; this._lastScrollPosition = 100000000; } chatscroll.Pane.prototype.activeScroll = function(){ var _ref = this; var scrollDiv = document.getElementById(this.scrollContainerId); var currentHeight = 0; var _getElementHeight = function(){ var intHt = 0; if(scrollDiv.style.pixelHeight)intHt = scrollDiv.style.pixelHeight; else intHt = scrollDiv.offsetHeight; return parseInt(intHt); } var _hasUserScrolled = function(){ if(_ref._lastScrollPosition == scrollDiv.scrollTop || _ref._lastScrollPosition == null){ return false; } return true; } var _scrollIfInZone = function(){ if( !_hasUserScrolled || (currentHeight - scrollDiv.scrollTop - _getElementHeight() <= _ref.bottomThreshold)){ scrollDiv.scrollTop = currentHeight; _ref._isUserActive = false; } } if (scrollDiv.scrollHeight > 0)currentHeight = scrollDiv.scrollHeight; else if(scrollDiv.offsetHeight > 0)currentHeight = scrollDiv.offsetHeight; _scrollIfInZone(); _ref = null; scrollDiv = null; } It's code to make the scrollbars autoscroll down. Full article and extra info he http://radio.javaranch.com/pascarell...837038219.html I sort of understand it but I'm not clear on what prototypes are. hi, I'm trying to inherit with prototype but I'm not able to do so. The problem is that I have a few functions which use some common variables and common functions and I want to inherit a Resource object with all these parameters. I also whant this inheritance to be done when I load the function, so no extra functions are loaded unless I need them. Here's the code Code: function Resource(){ this.url=''; this.object=new Object(); this.id=''; this.categories=new Array(); } function Users(){ Users.prototype=new Resource(); this.url='user/'; this.name=''; this.email=''; }; function test(){ var users = new Users(); alert(users.id); }; When I run the test function for the first time I get an undefined. a second time works fine. I I get the prototype definition outside the User() function it also works fine, but I want the inherited function to be loaded when I need it. Any ideas? As always, thank you for your help. Hi, I'm trying to use a javascript tabstrip script called aptabs, which uses prototype.js. However, prototype.js won't load properly, because the following error occurs in prototype.js: destination is undefined on the following line (3042): destination[property] = value.methodize(); The function this line is in is: Code: function copy(methods, destination, onlyIfAbsent) { onlyIfAbsent = onlyIfAbsent || false; for (var property in methods) { var value = methods[property]; if (!Object.isFunction(value)) continue; if (!onlyIfAbsent || !(property in destination)) destination[property] = value.methodize(); } } I've tried using versions 1.6.0 all the way up to 1.6.1, but I still get the same error. Can someone suggest what this error could be caused by and possible fixes? Debbie Hi I am using a program called aptabs which uses the Protoype framework. The problem is that when I create a new tab and refresh the page, the newly created tab disappears. How can I resolve this ? NOTE: The zip file for aptabs is attached. Thanks Hi there I am trying to retrieve xml data using the prototype Ajax.Request. I think I am getting the xml though I am unsure as to how to retrieve the text from the nodes here is the function I am using to try and populate a text field Code: function makeMarkerXml() { new Ajax.Request('coords.xml', { method:'post', onSuccess: function(transport){ ////this will not work///////// var coord = transport.responseXML.childNodes(0).childNodes(0).firstChild.text; /////////////////////////////// }, onFailu function(){ alert('Call failed') } }); } can anyone help? Hi all! I'm new and, well, I don't know a whole lot about javascript, honestly. I'm much more of an artistic design person than I am a coder. That said, I recently made a dropdown menu using an old version of Fireworks, but I've been having trouble getting it working on my site. The menu displays alright, but the dropdown does not appear right below it...instead, it's off and to the right somewhere. For the life of me, and with my limited knowledge, I cannot figure out how to fix it. The menu in question is the 'store' button on the following webpage- http://rlfcomic.com/test2.php# Note how the dropdown just seems to float at an arbitrary spot. Any ideas on what I'm doing wrong? I created the following javascript to display info when you choose from a dropdown <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>View Local Contact </td> <td><select name="ContentListBox" id="ContentListBox" onchange="javascript:ShowDiv();"> <option value="">Select State</option> <option value="AK">Alaska</option> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> </select></td> <td> </td> </tr> </table> <div id="AK" style="display:none;"></div> <div id="AL" style="display:none;"><div class="salesman">Marilyn O. Rogers </div> <div class="salesphone">Phone/Fax: 615-824-7804</div> <div class="salesemail">E-mail: <a href="mailto:morogers1@comcast.net">morogers1@comcast.net</a></div></div> <div id="AR" style="display:none;"><div class="salesman">Lonnie Muse</div> <div class="salesphone">Phone: 432-366-9213</div> <div class="salesemail">E-mail: <a href="mailto:muselon@sbcglobal.net">muselon@sbcglobal.net</a></div></div> When you choose the second one and then the third one the second choice does not disappear and it displays both. How can i refresh in between each one so that is displays only one? |