Develop Reference

ExtJS4 Change TextField emptyText on the Fly

How do I change my textfield's emptyText field on the fly?
I've tried:
myTextField.emptyText = 'new empty text';
myTextField.emptyText = 'new empty text';
myTextField.applyEmptyText();
myTextField.emptyText = ['new empty text'];
myTextField.emptyText = ['new empty text'];
myTextField.applyEmptyText();
I realize that applyEmptyText() is not listed in the API docs but I thought I'd give it a shot as this worked in previous versions. I've also read that one needs to add the brackets too.
I've printed myTextField to the console and I see the emptyText property set to what I want but the field in the browser is not updating.

I love ExtJS and all that it brings to the table but nuances like this (trying to get dynamically updated emptyText to work) really slow down development. None of the other SO posts on this issue have resolved the problem for me (emptyText just wouldn't update).
After several hours "fighting with my tools" and dozens of different permuations I came up with the following simple fix - just add a myTextField.reset(); to your code block.
myTextField.emptyText = 'new empty text';
myTextField.applyEmptyText();
myTextField.reset();
Hope this saved someone else some time.

Your first attempt should work as expected. However, as you can see in the source, there are certain criteria to be met before the placeholder is set. Your best bet is to place a breakpoint in the applyEmptyText function and debug it.
applyEmptyText : function(){
var me = this,
emptyText = me.emptyText,
isEmpty;
if (me.rendered && emptyText) {
isEmpty = me.getRawValue().length < 1 && !me.hasFocus;
if (Ext.supports.Placeholder) {
me.inputEl.dom.placeholder = emptyText;
} else if (isEmpty) {
me.setRawValue(emptyText);
me.valueContainsPlaceholder = true;
}
//all browsers need this because of a styling issue with chrome + placeholders.
//the text isnt vertically aligned when empty (and using the placeholder)
if (isEmpty) {
me.inputEl.addCls(me.emptyCls);
}
me.autoSize();
}
}

Through debugging it seems like the Text.inputEl.dom.placeholder property was not being set during my event in time to update the field. Based on the reset source above, I found that just setting the Text.inputEl.dom.placeholder in my code worked.

This applyEmptyText method is definately buggy!!
Look at the code, and imagine you want to set a zero as emptyText....
Look at the if conditions:
if (me.rendered && emptyText)
when emptyText = 0 , in the condition it will be as a false interpretated..... it's then with this code impossible to set the zero as emptyText!!!!

jquery masked input plugin to not clear field when errored

I'm looking at the http://digitalbush.com/projects/masked-input-plugin/
I'm calling it like this:
$(control).mask('999-999-9999');
And I don't want it to throw away the users input if something is wrong, e.g. they haven't finished
[407-555-____]
If you leave the field after having typed this much, it clears it. I'd like to leave it so they can finish later.
I'm new to jQuery, and I've looked through his source, but I can't find any way to do that, nor can I find any way to edit it to accomplish what I want, because the code is arcane to my eyes.

Set autoclear option to false.
$(control).mask('999-999-9999', {autoclear: false});

It looks like I should just make the whole mask optional:
mask('?999-999-9999')
That way the control thinks what the user has is "valid" and I can continue. Even though it isn't really the optional part of the mask.

You should delete statement input.val(""); in checkVal() function for a proper solution.
If you're using minified version, you should search and delete statement:
if(!a&&c+1<i)f.val(""),t(0,k);else

Try update file jquery.maskedinput.js
In function function checkVal(allow) set parameter allow on true. Its help for me.
function checkVal(allow) {
allow = true; ///add this command
//..............
}

In addition to removing the input.val("") in checkVal() you can also change the call to clearBuffer.
In the original code it is: clearBuffer(0, len); removing all user input.
if you change this to clearBuffer(lastMatch + 1, len); the user input will be displayed, followed by the mask placeholders that are still needed to complete correct input.
I have also added a user message in the .bind. This works for us, as we are using the MaskedInput for exactly one type of input. I'm checking for any input going further than position 7, because that's where the user input starts.
Here is what I did:
.bind("blur.mask", function() {
// find out at which position the checkVal took place
var pos = checkVal();
// if there was no input, ignore
if (pos <=7) {input.val(""); clearBuffer(0, len);}
// if the user started to input something, which is not complete, issue an alert
if (pos > 7 && pos < partialPosition) alert("Tell the user what he needs to do.");
if (input.val() != focusText)
input.change();
})

Adding Placeholder could solve the problem.
$(control).mask('999-999-9999');
Add an empty place holder into mask. see below
$(control).mask('999-999-9999', { placeholder: "" });
which would replace _ on the input text field by default. so there would bot be any _ left if the input length is dynamic and not fixed.

Looking for into the pluging script the unmask method.
$('#checkbox').unmask();

How do I validate entry before input value is set?

I'm having a really strange problem. Here's my current Javascript:
jQuery('.highlightableTDCell input').keydown(function () {
var val = jQuery(this).val();
if (!GridView.prototype.validateStandardCellNumberFormat(val)) {
return false;
}
else return true;
});
When I use this, I can still get away with entering an illegal character, but no more than that. I'm really confused because I thought this would happen first.

Inside of the keydown event, the element.value has not yet been updated to account for the key that is currently being pressed. If you want to stop the key from hitting the input box, you need to interrogate the event.which and see if it is a key you want to allow or not.

The event is raised before the new content entered the input (letting you cancel the default behavior.)
You can use something like this, to get the new content:
$('.highlightableTDCell input').keypress(function(e){
var temp = this.value + String.fromCharCode(e.which)
return GridView.prototype.validateStandardCellNumberFormat(temp)
});
Note that it's not full proof. like when the user entered the new char in the middle of the input.
Validation should be done only on blur. With HTML5 it should be better, but not all browsers support it yet.
Tip: this.value == jQuery(this).val() There is no need to create jQuery object to get the value

jQuery(formElement).val(null) : inconsistent results in different browsers

The code is here:
http://jsfiddle.net/jf7t2/1/
Please run it on the latest versions of all browsers, and see for yourself. When the button is clicked, on:
on Chrome (and Safari of course) it just doesn't select anything, instead creates some ghostly empty option
on Firefox and Opera, it works the way I expect and want it to work, de-selects all options
on Internet Explorer, it does nothing
So, which one is the expected behaviour?

If you look at the jQuery 1.5.1 source code line 1970 you'll see this:
// Treat null/undefined as ""; convert numbers to string
if ( val == null ) {
val = "";
So the expected behavior is the same as if you gave the empty string as argument.
If you continue to line 1984 you'll see this:
} else if ( jQuery.nodeName( this, "select" ) ) {
var values = jQuery.makeArray(val);
jQuery( "option", this ).each(function() {
this.selected = jQuery.inArray( jQuery(this).val(), values ) >= 0;
});
if ( !values.length ) {
this.selectedIndex = -1;
}
So the expected behaviour is:
if there is an option with an empty string value, choose that.
if not set selectedIndex = -1
From here on it is up to the browser to determine what to do if selectedIndex is set to -1
Looking at the msdn library it says:
The selectedIndex property returns -1
if a select object does not contain
any selected items. Setting the
selectedIndex property clears any
existing selected items.
So in ie the expected behavior seems to be that it will de-select all options
The same goes for the MDC documentation and thus firefox, where theya re very explicit about it
Returns the index of the currently
selected item. You may select an item
by assigning its index to this
property. By assigning -1 to this
property, all items will be
deselected.
It seems webkit based browsers have a different take on things.
If you google "webkit selectedIndex" you will see quite a few bug report regarding the select tag, so maybe it's just funky ;)
Come to think of it, this is a bug in jQuery since it is a library that should be able to behave the same across browsers - it should be reported ;)

which one is expected behaviour?
jQuery's val() function is documented to take a string value or an array of string values, so there is no defined behaviour.
Try val([]) to select nothing, or to restore the original value use the defaultSelected property:
$('#select option').each(function() {
this.selected= this.defaultSelected;
});

I forked your jsfiddle with one that I think can help you:
http://jsfiddle.net/marcosfromero/AYLrT/
I tested it in IE, Firefox and Chrome
jQuery("#button").click(function(event){
var select = jQuery("#select");
// Button click will try to find a "none" option (with no value)
if(select.find('option.none').length===0) {
// If it's not found, it creates the option
select.prepend('<option value="" class="none"></option>');
}
// And then it selects it
select.val('');
});
// When select value is changed...
jQuery('#select').change(function() {
var me = $(this);
// ... to something different than empty ("")...
if(me.val() !== '') {
//... it removes that option
me.find('option.none').remove();
}
});

None of those behaviors are unreasonable.
In Chrome, it makes sense because you are setting the value to nothing, so it displays nothing.
In IE, it makes sense because you are not changing to a valid value, so it changes nothing.
If you want all the browsers to behave like Firefox, just set the value to 1.

Why JavaScript IF only works once?

I have JavaScript code which copies the value of input file and paste it in the text box in real time.
<script>
function copyit(){
var thephoto=document.getElementById('thephoto').value;
var fileonchange=document.getElementById('fileonchange').value;
if(!thephoto==fileonchange){
document.getElementById('fileonchange').value=thephoto;
}
}
window.setInterval("copyit()", 500);
</script>
Choose File : <input type="file" id="thephoto"><br>
Here Is the file name : <input type="text" id="fileonchange">
Sadly this only works once and then stops pasting the value when changing the file again. (I mean you should reload the page to make it work again)
Does IF have a cache or something? You can try the code by yourself to see.

The syntax is wrong. You need the != operator to denote inequality:
if (thephoto != fileonchange) {
The !thephoto actually inverses its boolean representation (i.e. true becomes false and vice versa, also null becomes true). The == actually compares the equality of the both operands.

Try changing the IF line to:
if(thephoto!=fileonchange){

BalusC is completely right, but IMHO using a timer every 500ms to do this simple task seems pretty heavy.
Why don't you simply use the onchange event of the <input type="file" />?, e.g.:
window.onload = function () {
var thephoto = document.getElementById('thephoto');
var fileonchange = document.getElementById('fileonchange');
thephoto.onchange = function () {
// this function will be executed when the user changes the file
fileonchange.value = this.value;
};
};
Check the above example here.

The input element, as the W3C says, accepts the onchange method. Why don't you do:
<input type="file" id="thephoto" onchange="copyit()">
Instead of using the dreaded setInterval?

Use !== for strict inequality.
Or, if you want to use something similar to the syntax you've written, do this:
if(!(thephoto==fileonchange)){