Remove Twitter Typeahead from Text Box - javascript

I am trying to disable all text boxes on my form. One of these boxes has a typeahead on it. When I do:
$(#textbox).attr('disabled', true);
It is no longer enabled, but the color does not switch like all of the other text boxes do when they become disabled.
I believe this is due to the twitter typeahead and I am wondering if there is a way around it. Does anyone know how to override the text box background color or remove the typeahead completely when the text box is disabled?
I have tried .unbind() and .addClass("greyBackground") but neither of these seem to do the trick.

If you don't care about maintaining the typeahead.js functionality while the textarea is disabled, you can destroy the typeahead like so:
$('#textbox').typeahead('destroy');
This will reset/remove any attributes/styles typeahead.js may have added. If later on you wanted to add back the typeahead.js functionality, you could reinitialize it with:
$('#textbox').typeahead({ /* configs */ });
Also, typeahead.js doesn't support textarea elements out of the box, so unless you're using a forked version, you shouldn't assume typeahead.js will work as expected.

In Bootstrap 2.2.2 there is no .typeahead('destroy') function, so the following does remove all the listeners it was previously bound to and the DOM element it has created.
$('#textbox').off()
.data('typeahead')
.$menu
.off()
.remove();

Related

Input validation + jquery ui tooltips result in double tooltips

On an internal website I am using input text fields with "required" and "pattern" specified. This results in a tooltip message apparently from the browser (Chrome), saying: Please fill out this field.
By specifying my own text with "title" I can overwrite this, but I need to format the tooltip text with bold, newlines etc. For this reason I have switched to jquery ui.
Now a problem arises, because now I end up with two tooltips. The jquery ui with my text and a native tooltip from Chrome saying "Please fill out this field".
Among others I tried:
::-webkit-validation-bubble-message { display: none; }
document.getElementById("xx").setCustomValidity('')
It seems the first one is not supported anymore. And the second one I cannot get to change anything - besides it seems to just change the text, not fully remove it.
I need the validation, so I cannot remove "required" and I can also not disable validation by using novalidate or similar.
Is there really no way to get rid of this native validation tooltip?
I decided to go for a workaround instead.
Rather than adding my jquery ui tooltip on the textbox itself, I have added a span with an information mark (🛈) after it. Then added the tooltip to this span instead.

Can I use select2 purely as a tokenizer, disabling the dropdown/search/match functionality?

I have multiple instances of select2 elements in my form, but in one of them (which is on a hidden input) I want to just tokenize the input.
I dont want the dropdown to ever show because it always shows "no matches found" and it confuses users. So I need to disable just the dropdown and use select2 as only a tokenizer for that specific element. Is that possible?
(I know I can do this easily with out the plugin but I want to use the plugin as it decorates the tokens and removes icon and it will be uniform with other inputs that use it)
Used the approach described by #Paralife.
Found there is a option dropdownCss which sets the dropdown style. So dropdownCss:{display:'none'} is enough to disable it as well.
I found a solution:
In the constructor, I put the option dropdownCssClass: 'noshow' and then just css it:
.noshow { display:none !important;}
This always hides the whole dropdown.

AspTokenInput Enable And Disable

I used AspTokenInput Which is used as AutoComplete TextBox to create Tags .
I use this Link To know How to Use it.
It's Works Fine For Me and give Result As I want.
Now I want to Make This Control Enabled or Disabled On a Button Click according To Condition.
I Use this on Button Click
AspTokenInput.Enabled = "False"
But it's not Working...
Your problem is that the jQuery Tokeninput field cannot be disabled serverside.
See (http://loopj.com/jquery-tokeninput/) for documentation on this library if you want to try and finagle the js on and off. At a glance, I don't see an enable/disable flag or method. You may need to dig into the ASPTokenInput library to see how it pulls its data source, and then enable/disable the plugin with:
$("#my-text-input").tokenInput("clear"); //disable
$("#my-text-input").tokenInput("/url/to/ASPTokenInput/Datasource/");//reenable
The problem with this approach is that it basically goes around the ASPTokenInput layer, which kind of defeats the point.
My secondary approach was to try a hack, but hiding the dropdown isn't the greatest solution (or even easy in this case), nor is having the check box swap the autocomplete input for another. Swapping text boxes is probably the simplest solution.

How to disable text selection in jquery-UI dialog without disabling form elements

I'm using jQuery-UI to build a site with dialogs containing form inputs (input and select specifically), yet I do not want the user to be able to accidentally highlight the text, radio buttons and elements used in the dialog as this looks ugly (and selecting is surprisingly easy to do by accident on the ipad).
I have been using the jQuery plugin disableTextSelect, and applying it to the dialog class. Yet this makes my input elements unclickable.
Things I've tried so far:
$("#mydialog").children(":not(input)").disableTextSelect() // everything was unselectable
$("#mydialog").disableTextSelect(); $("input","#mydialog").enableTextSelect() // everything was unselectable
Could be a result of your making the entire dialog unselectable - that might be affecting the child inputs as well. You'd need to apply it to the dialog's children excluding inputs, not the dialog itself.
Although it's not ideal, I reproduced the effect of the built-in event by doing:
$("#mydialog").disableTextSelect();
$("input,textarea").mousedown(function (e) {
$(this).trigger('focus');
});

Style / Replace a select box using prototype / scriptactulous

I'm trying to style my select box, I assume I need some type of javascript method.
I'm using rails - and sticking with prototype/scriptactulous.
Does anyone know of any solutions?
EDIT:
CSS doesn't do nearly what I'm trying to accomplish:
alt text http://img16.imageshack.us/img16/1373/dropdownk.png
I wrote a prototype select box control today. It allows styling everything- the select input box, the button, the dropdown box(where options are shown), the scrollbar and its buttons, the options, adding images to options. The class can replace select inputs automatically just by calling the script if select controls have class="replacemeselect" or be called manually. There are a bunch of customization options and you can have multiple styles of selects on a page if you need it. Unlike IPS this class handles keyboard events and has a scrollbar.
You may look at the demo: http://awsumlabs.com/selectreplace and use the library if you like it.
For styling select boxes you actually need js. In CSS you can style everything, but the button. The problem is that the button is os dependent and is not controlled by the browser. So maybe the man asks the right question. I'm searching for a protoype/script.aculo.us solution too. I use these frameworks and I don't want to change to mootools ot jquery.
In fact I found an interesting prototype project- IPS. http://yura.thinkweb2.com/playground/in-place-select/
There are also select multiple controls(I need select for one element only now so maybe I'll stick to ips). livepipe.net/control/selectmultiple is one of them.

Categories