0

I'm trying to disable a jQuery UI combobox I've created. I have searched, but come up with nothing that works yet.

Here's some JSFiddle:

...
$(function() {
    $( "#userInfo" ).combobox();
    $( ".custom-combobox-input").attr("placeholder", "(Pay Band GS 1-15/rank)");
    $( "#userInfo input" ).attr('disabled', true);
    $( "#userInfo button" ).attr('disabled', true);
});

that I've programmed and tried the best answer I have found at ComboBox disable:

...
$("#box3").combobox(); // init autocomplete combobox 3

// set initial state of generated combobox 2
$("#test2 input").attr('disabled',true);
$("#test2 button").attr('disabled',true);  

// set initial state of generated combobox 3
$("#test3 input").attr('disabled',true);
$("#test3 button").attr('disabled',true);

. It looked like it was going the right direction. I was able to disable their "box1", but can't seem to do it with mine. Yet, my combobox() is a little later in its inception, being jQuery 11. But that may have nothing to do with it.

trout0525
  • 41
  • 7
  • Looking at the source in your fiddle, it's a click method on an anchor tag that's offering the dropdown with all the pay ranks. If you can include the source for that combobox in yours, change the .click() method to return false when the control is disabled, instead of running the rest of the code in that same click() method. – Blamkin86 Jun 03 '15 at 17:39
  • @Blamkin86 Thank you for a response. I believe the code for the click() method is hidden somewhere in the jquery-ui.js code. Is there anything that can be done with that to override it or alter it? Thank You. – trout0525 Jun 04 '15 at 14:38
  • If you take a look at your jsFiddle, you'll see $() code creating an anchor. That anchor is the button to the right of your dropdown. To open the dropdown, JQuery coded that anchor with a .mousedown and .click methods. The .mousedown method determines if the control was already open. The .click method checks the wasopen variable to decide whether to show or hide the list of dropdown options. So, what you're wanting to do is stop that .click() method from activating when the control is disabled, then re-enable that click method for when the control is enabled. – Blamkin86 Jun 04 '15 at 15:04
  • The best way I can think of to do this is to first remove the existing .click method. You can learn about that here: http://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in-jquery Next you'll need to write your own .click method, attach it to that same anchor, and make it decide whether to open based on both the wasopen variable, and whether the control is disabled. – Blamkin86 Jun 04 '15 at 15:04
  • By the way - I'd just be done with this brain damage. Take a look at the .chosen dropdown. It's much better and doesn't have all this nonsense going on. http://harvesthq.github.io/chosen/ – Blamkin86 Jun 04 '15 at 15:05
  • @Blamkin86 Wow. I really like the 'chosen' select box. I downloaded it, and can get the file to run off a local file, i.e. C:\Users\trout0525\Downloads\jQuery Chosen Plugin\index.html, but when I try to run it off the server, it seems to error out, or not implement the plugin, and leaves things as simple select boxes. – trout0525 Jun 04 '15 at 17:42
  • So, I'm back to trying to get the jQuery UI combobox going. Needless to say, I can't seem to get the 'off' function to work, http://jsfiddle.net/trout0525/o2042e9x/2/ – trout0525 Jun 04 '15 at 17:42
  • I do agree the jQueryUI isn't that well written but it seems to be the best I have to go on now. Not that I can exactly write anything better with my time, currently. If you have anymore thoughts they would be much appreciated. Thanks a lot for your help. – trout0525 Jun 04 '15 at 17:43
  • @Blamkin86 OK, never mind the bit about not getting the 'chosen' plugin to work. I realized, I had to use a to get it to work properly. The server defaults the IE browser to Document Mode: IE7 standards. Anyway, the sample index.html works now. For the actual page, it works OK, except the select is held within a div that is only so tall, and gets chopped off. Whereas the jQuery UI would overshadow the div with the dropdown. It just doesn't seem to end. Thanks for you r help. Any help with the chop off, other than increase the DIV size? ;o) – trout0525 Jun 04 '15 at 18:26
  • Yeah, you can do a lot of styling with the chosen stuff. I changed several default properties myself. In your own CSS file, or on the HTML page proper after the chosen CSS file, try this: fieldset.chosenFieldSet { overflow: visible; } – Blamkin86 Jun 04 '15 at 19:07
  • If Chosen works for you, and you can get your styling the way you want it, I'll add a proper 'answer' to your question so you can accept it :) – Blamkin86 Jun 04 '15 at 19:11
  • @Blamkin86 Things seem to be going fairly well with this implementation of the select box/chosen plug-in . I had to do some z-index setting of the select box's div, but it seems to be working fine. I just have one last problem, I think. I've got an entry from a DB that matches a value in the select box. When I try to use the $("#userInfo").val(itemToSelect), it doesn't seem to work. I've also tried a filter like this: http://stackoverflow.com/questions/496052/jquery-setting-the-selected-value-of-a-select-control-via-its-text-description. Neither work. Thoughts? Thanks in advance. – trout0525 Jun 05 '15 at 14:44
  • @Blankin86 Never mind about the selected option. It's a little more tricky than just $("#userInfo").val(itemToSelect). You also have to do a $("#userInfo").trigger("chosen:updated"). I finally found it after I read the documentation. - "When in doubt, read the manual" We are almost there. I just have to disable it now. I'll check the manual for that too. Thanks. – trout0525 Jun 05 '15 at 15:23
  • @Blamkin86 OK. We are almost there. I used another trigger event to disable the select box, $( "#userInfo" ).prop('disabled', true).trigger("chosen:updated");, and it works fine to stop anymore selection. Now I'm getting really knit-picky. When it is disabled, I want the background color to change. I'll look into the CSS. I'm about to mark this as the answer, and I should do it right now, but I want to get it totally working before I give it a full thumbs up. Thanks again for the recommendation. – trout0525 Jun 05 '15 at 15:48
  • @Blamkin86 Alright. I realize the colors are customized from the jQuery UI, so please forget I asked. Thank You SOOO Much for your help. I think this will do it. Thumbs Up. Please add an answer so I can give you credit. – trout0525 Jun 05 '15 at 16:56
  • Sorry I was offline for several days there. Glad you got it sorted out! – Blamkin86 Jun 08 '15 at 16:07

1 Answers1

0

While this doesn't technically answer your specific question, I strongly urge you to spend a little time learning "Chosen." It's a JQuery plugin, and does most of what you're after. On top of that, learning a JQuery plugin is always a good idea. There's lots of other good ones out there.

Blamkin86
  • 877
  • 7
  • 8