jQuery has an AUTO-COMPLETE that they have as the solution to drop down - and I definitely use it - extensively.
But sometimes a simple 3 or 4 or even 20 option drop down is nicer. I could probably write it myself - they certainly don't seem to be complicated - it's all about having it look like a jQuery widget and use that same theme settings and such.
I recently moved to the next version of jQuery because I was finding problems that the newer version fixed. I do not recall anything breaking because of poor backward compatibility - after the move all seemed ok.
I am deathly afraid to move to the next version of SlickGrid - that version just came out. I was taking a big gamble using a grid that I did not code myself - but after a while my JS skills became good enough for me to both debug and hack the grid code itself.
I don't know much about DoJo but the selector logic in jQuery is really cool - look at some of this code.
Code:
function makeReader(strId, blnDisplay, objReturn) {
var wesRP = $("#" + strId);
if (wesRP.find(".acs-panel-btn-close").length == 0) {
$("#acs-button-list .acs-panel-btn-close").clone().prependTo("#" + strId).removeAttr("id").attr("title", "Close Reader Panel");
$("#acs-button-list .acs-panel-btn-prev").clone().appendTo("#" + strId).removeAttr("id").removeClass("acs-panel-btn-prev")
.addClass("acs-reader-prev-next-hidden").addClass("acs-panel-btn-reader-prev");
$("#acs-button-list .acs-panel-btn-next").clone().appendTo("#" + strId).removeAttr("id").removeClass("acs-panel-btn-next")
.addClass("acs-reader-prev-next-hidden").addClass("acs-panel-btn-reader-next");
wesRP.append('<span class="acs-reader-cache"></span><span class="acs-reader-totalcols"></span>');
if (!blnDisplay) {
$("#acs-button-list .acs-panel-btn-refresh").clone().appendTo("#" + strId).removeAttr("id");
}
$("#acs-button-list .acs-panel-btn-print").clone().appendTo("#" + strId).removeAttr("id");
wesRP.append('<span class="acs-reader-aggregators"></span>'
+ '<div class="acs-reader-grid"></div>');
That is one hell of a lot of DOM manipulation happening with very obvious method names and DOM target identifiers.
This code takes a RETURN status for whether a report has completed from an AJAX call - based on what comes back it messes with HTML content - find all the buttons with .ACS-DOWNLOAD as a CLASS and adds DATA to those DOM objects - and removes and sets various flags in the DOM.
Code:
} else if (objReturn.reportstatus) {
if (objReturn.message == "S") {
var t = setTimeout("ctrlWebService('reportstatus', '" + objReturn.rptid + "','','" + strWho + "')", 1500);
} else {
switch (objReturn.message) {
case "C":
$("#" + strWho).find(".acs-report-status")
.html("Report Status: Completed")
.parent()
.find(".acs-download")
.data("rptid", objReturn.rptid)
.closest('.acs-ddreflector')
.removeClass("acs-report-running")
.addClass("acs-report-complete");
break;
case "E":
$("#" + strWho).find(".acs-report-status")
.html("Report Status: Selection Errors")
.closest('.acs-ddreflector')
.removeClass("acs-report-running");
break;
case "Q":
$("#" + strWho).find(".acs-report-status")
.html("Report Status: Query produced no results!")
.closest('.acs-ddreflector')
.removeClass("acs-report-running");
break;
}
}
If DoJo looks and acts just like this then your have to dig deeper for differences that might be meaningful to you.