I'm having a pretty nasty problem with an auto-completing textbox. I want to initiate an asynchronous PostBack whenever a user selects an item from the auto-completed field and retain the value of the item, rather than the text inputted. This works perfectly when enter is pressed rather than a mouse click.
An example of my issue:
Someone goes to the page, and types 1000 into the textbox. The autocomplete displays 10002, 1000B, and 10000. The user clicks on 1000B and an asynchronous PostBack initiates. Instead of 1000B, the TextBox.Text value is still 1000.
My assumption is that the textbox is initiating the PostBack before the value is actually getting assigned to it. I'm just curious if anyone has any possible solutions for what I'm talking about.
I fixed it in this manner:
As per another question on the site I added an autoPostBack parameter to the options list.
In bottom of the SelectCurrent() function, I added these lines.
if (options.autoPostBackSelection == true) {
__doPostBack($input.id, "");
}
Then, my blur function looked like this:
.blur(function() {
hasFocus = 0;
if (!config.mouseDownOnSelect) {
hideResults();
}
if (options.autoPostBackSelection == true) {
selectCurrent();
}
I actually struggled with this for a bit, my Javascript/DOM event skills aren't very good. Hopefully this helps someone.
Related
I have a Windows Phone 8 project that converts values (i.e.: Celsius to Fahrenheit). There are two TextBox UI elements, one of which is read-only. The user can change the first TextBox to input the value to be converted. He can also press a button to "swap" the two TextBoxes so that he can do the reverse conversion. When the user presses the button, the value from the second TextBox goes into the first TextBox (and vice versa). But it's not the user who changed the value, it's the code who did.
I asked around (on IRC) and researched the subject, but I am a beginner and couldn't understand most of what I have found.
I heard that a simple solution would be to use Data Bindings. I researched the subject, and from what I read, Data Bindings can't solve my problem (correct me if I'm wrong).
I also tried to create a subclass of TextBox, hoping that I could hook in some custom event to it and go further in that direction. But I did not understand how to link the custom TextBox to the UI (in XAML). The way I created the subclass is to just create a new class and add TextBox as the parent. I know there is a template in VS to create a new User Control, and I tried it, but I couldn't understand what I was doing (or what I was supposed to do).
So I have two questions: Am I looking at the problem from the right angle? If yes, how do I create a custom TextBox and link it to the UI? If not, how could I solve my problem?
If your question is how to distinguish if the text got changed by the user or by the code then its simple.
Assuming that when the user types something you'd like to perform method A but when the code changes the text you'd like to perform method B:
In both cases you will need to override the TextBox.TextChanged() event handler.
You will also need a flag variable to tell you if the swap button was pressed or not.
The event handler should be something like this:
{
if (swap_pushed)
{
Method_B();
swap_pushed = false;
}
else
{
Method_A();
}
}
And finally your event handler for swap Button.Click() should be like this:
{
swap_pushed = true;
}
if (Request["__EVENTARGUMENT"] != null && Request["__EVENTARGUMENT"] == "txt2OnClick")
{
txt2_Click();
}
txt2.Attributes.Add("onclick", this.Page.ClientScript.GetPostBackEventReference(txt2, "txt2OnClick")); //within page load
private void txt2_Click()
{
ImageMap1.ImageUrl = "guide/2.jpg";
}
This is a perfect piece of code to have a click event on textbox, with asp.net (C#).
But the only problem is, we cant type when we apply this code to a textbox. So what I did was set the focus txt2.Focus(); then I can type, but the textbox is not getting validated (I have added a regular expression validator) . Any help? Even to have a better onClick event for a textbox than this?
I don't see any point in having click event for text box.. Remove your 'perfect piece of code' and txt2 if not required..If you have added regular expression validator correctly, it will take care of validation..
EDIT:
For changing some text or showing some image, you don't need to post back to server..
You can either use javascript Focus event or jquery to do that..
In the link you provided, all those photos and texts are placed on divs and are already loaded on browser and when textbox gets focus, those div styles are just toggled between none and block..
Something like this(jsFiddle)..
At the moment I have a text box that is bound to a byte property. If the user enters between 0 and 255 the application behaves as expected and the property's setter executes.
However, if the user enters 256 or greater the property's setter does not execute. All that happens is the TextBox becomes outlined in red. I presume this is to indicate that it's an invalid value.
This isn't good enough though. I need to display a messagebox or some note to the user to inform them it's an invalid value. What do I need to do to make this happen?
You need to add a Validation Summary control on the page.
This will be hidden by default, but when the validation error occurs (as in this case when a value greater than 255 is entered) it will appear telling the user what's wrong.
There are several such controls available for WPF, you will need to evaluate them and pick the one that works for you. You will probably need to set some attributes on the data layer to control the exact error message that's displayed.
Another possibility would be to define the TextChanged event of the text box so that it does a Int32.Parse every time the text changes. It can then fire off a message box if the value exceeds 255.
If you want to be mean you can make the maximum length two characters long and force users to input the number in hex.
You can add a validation error handler to the control or window.
In window constructor:
this.AddHandler(Validation.ErrorEvent, new RoutedEventHandler(OnValidationError));
Handler:
private void OnValidationError(Object sender, RoutedEventArgs e)
{
if (e.OriginalSource is DependencyObject)
{
DependencyObject instance = e.OriginalSource as DependencyObject;
if (Validation.GetHasError(instance))
{
System.Collections.ObjectModel.ReadOnlyObservableCollection<ValidationError> errors = Validation.GetErrors(instance);
// todo build message from errors and display
}
}
}
I have an article that covers what you are asking for. The title might not appear to match with what you are asking, but it happens to demo the feature you are asking for.
How to disable a Button on TextBox ValidationErrors in WPF
This will show you how to not only have the red around the TextBox but also how a message too.
I'm currently working on a homework assignment where I need to set up a calculator-type program. It needs to read one or two user-input values (depending on the calculation), and then perform the calculation based on the values.
I currently have
2 textBoxes (tbInput1 and tbInput2),
4 radioButtons,
one button (btnCalc)
a blank label in which the result will be displayed.
Two of the radioButtons (rbtnTrap and rbtnFak) disable the first textBox when checked; the other two need two values to be entered, and for that reason enable both textBoxes when checked. btnCalc is supposed to enable itself when the relevant number of textBoxes have value - the relevant number of textBoxes depends on which radio button is checked.
The problem is that when I check rbtnTrap or rbtnFak (disabling tbInput1) and enter an integer in tbInput2, btnCalc stays disabled.
I'll try to explain what I have so far:
In the _TextChanged event for tbInput1, I have an exact copy of the second if block posted below. tbInput1 is only active when rbtnPot OR rbtnFib are checked, so that control only runs when that is the case.
In the _TextChanged event for tbInput2, I have the below, since tbInput2 is always enabled, and the control must run no matter which radio button is checked, although the control should run differently if i check rbtnTrap OR rbtnFak as opposed to rbtnPot OR rbtnFib.
Or that's my understanding of it. I'm certainly open to suggestions and corrections.
private void tbInput2_TextChanged(object sender, EventArgs e)
{
//For single-field values
if ((rbtnTrap.Checked || rbtnFak.Checked) &&
!string.IsNullOrWhiteSpace(this.tbInput2.Text))
{
btnCalc.Enabled = true;
}
else
{
btnCalc.Enabled = false;
}
// For multi-field values
if ((rbtnPot.Checked || rbtnFib.Checked) &&
(!string.IsNullOrWhiteSpace(this.tbInput1.Text)
&& !string.IsNullOrWhiteSpace(this.tbInput2.Text)))
{
btnCalc.Enabled = true;
}
else
{
btnCalc.Enabled = false;
}
}
Because it is a homework, I am not going to give your the straight answer, but instead a hint: the problem is in the code of the tbInput2_TextChanged event (code that you posted).
When rbtnTrap or rbtnFak are checked, your code will be run following such a path you don't think it will. Set a breakpoint (F9) on the first line of the tbInput2_TextChanged code and run the code step by step (F10) after entering some text in tbInput2.
You will see why your button btnCalc is enabled as you think it is, but disabled in the next moment.
Feel free to comment if you need more help afterwards. :)
EDIT
The problem comes from your if blocks. When one of rbtnTrap and rbtnFak is checked:
your code will run in the if clause of the first block and then do btnCalc.Enabled = true; but...
it will also run in the else clause of the second block (because (rbtnPot.Checked || rbtnFib.Checked) is false) and thus do btnCalc.Enabled = false;.
I'm not sure how much I understand your problem (I'm sorry, the explanation was a bit all over the place), but one thing that I do see, is that you're only implementing your tests in one event when you have two controls to check.
It sounds like a simple problem, but I really can't understand what is implemented where and who is supposed to do what, so if my 2 cents above were useless and you can explain the question again, that'll probably help in finding a solution
I'm trying to show data into one JQuery Autocomplete Dropdown. The information is retrieved from one dynamic ASPX:
$("#<%= this.txt.ClientID %>").autocomplete('<%=this.ResolveUrl("~/Page.aspx") %>')
Obviously I don't want make more GETs than necessary, so I have a bit of control with a Java Timer (on every keypress):
if (timerActive) {
stopTimer();
}
timer = setTimeout('obtainItems()', 800);
timerActive = true;
And the obtain items does:
$("#<%= this.txt.ClientID %>").autocomplete('<%=this.ResolveUrl("~/Page.aspx") %>')
stopTimer();
This thing works in general, but I've seen some special behaviour with arrows and AvPag. When the records of the dropdown are displayed, if I press AvPag the component selects the correct record, but after two seconds comes back to the previous one.
My first theory was that the .autocomplete was resetting the focus, but I have noticed that this is not correct. I thought that it was a bug (BUG LINK) but it doesn't work too.
Please, if somebody can help... thanks a lot!
Does it work as desired without the timer?
I'm guessing your onkeypress event is fired, user selects what they want, then the timer event fires which resets the items.
add a variable
var selected = false;
and attach a selected event to your autocomplete and set selected = true
have your obtainItem look like this:
function obtainItems()
{
if (!selected)
{
$("#<%= this.txt.ClientID %>").autocomplete('<%=this.ResolveUrl("~/Page.aspx") %>')
stopTimer();
}
}