Client-Side Validation in a Modal Popup? - c#

I've got a gridview/formview, master/detail relationship going on.
When I click a button in my formview (item template), I display an ajaxcontroltoolkit modal popup.
On this popup there is a textbox (several, actually). I want to validate the data in this textbox (at least six digits, so far I'm using a regex validator) before I dismiss the popup.
The validator works, but I can still dismiss the form by clicking OK. What I'd like to do is have the ok button on the popup disabled until the data is good.
I have tried fiddling with some stuff in javascript, but I couldn't make it work, as there seems to be some issues regarding finding controls in a formview.
Any ideas?
Thanks in advance.

Without a postback
You should be able to find a control using the following technique in JavaScript:
$document.getElementById('<%=btnSubmitForm.ClientID%>').disabled = true;
If you're using RegularExpressionValidator, this forum suggests a quick (albeit hacky) way to check and see if your form is valid, without doing a postback:
http://forums.asp.net/t/1114240.aspx
With a postback
You could put the Submit button in its own UpdatePanel, if it isn't already in one, and enable/disable it in the code behind, depending on the value of the validator's IsValid property.
If you're unable to get the enable/disable functionality working, you could simply keep the modal open, so the user can't close it until they enter valid inputs or click Cancel:
protected void BtnSubmitClick(object sender, EventArgs e)
{
if (!regexValidator.IsValid)
{
modalPopupExtender.Show();
}
}

Related

web page doesn't recognize text has been entered in textbox

So I'm setting the value of a textbox, then I'll click a button to submit the search. The value in the textbox is showing what I want, but when I trigger the click of the button, the website gives me an error message on the page as if the textbox value is empty (even though I'm looking at it and it's showing what I wanted).
Now if I manually click on the button, it still thinks the textbox is empty. But if I manually click on the textbox (just click, don't change anything), then manually click on the button, it works.
So apparently there's something happening behind the scenes that requires the textbox to have had the focus before the page will recognize what's been typed in.
private void SetText(string elementID, string text)
{
foreach (HtmlWindow hw in this.webBrowser1.Document.Window.Frames)
{
HtmlElement element = hw.Document.GetElementById(elementID);
if (element != null)
{
element.SetAttribute("value", text);
// here's where I'm trying things
break;
}
}
}
Here's what I've tried (not sure all of these were even valid things, but I tried them anyway:
I've tried setting the focus on the textbox and then removing it by setting it on the button -- element.Focus() and then button.Focus() before clicking the button.
I've tried invoking the changed event -- element.InvokeMember("change"), element.InvokeMember("changed"), element.InvokeMember("onchange"), element.InvokeMember("textchanged").
I've tried invoking the focus event -- element.InvokeMember("focus").
I've tried invoking the lostfocus event -- element.InvokeMember("lostfocus").
I have no idea what it is that the webpage is expecting to be triggered when someone actually types into the textbox, but it's apparently preventing the page from "seeing" what's been placed in there by my code.
Any ideas?
Turns out there were 3 textboxes (each with a slightly different name) that are somehow interconnected. The value of all 3 must be set before the button will work properly. I thought I'd tried that, but perhaps I didn't do all 3 before, or maybe I had them in the wrong order. Ugh.

displaying message box using javascript by avoiding postback like click events. The ok, cancel buttons should only close the messgae box

i faced a situation when the user clicks on any button or linkbutton on page it should display messagebox. so i am displaying message box by addin javascript function to window.onbeforeunload.
Till now it works fine. i just want not to display the message box when the user clicks on ok or cancel button without doing any postback events. So i kept "return false" on ok and cancel button. When i click on these ok , cancel button its displaying another message box in IE as "Message from web page false".
Mmm... I question this technique in two ways:
Why do you expect 'return false' to consistently suppress this event for your ok and cancel buttons? Why would IE suppress the event based on a return value of false?
What's this business of attaching to the window.onbeforeunload event? Should you not be responding to a click event on these elements?
Honestly it sounds like IE is providing a reasonable action based on your code: the onbeforeunload event is firing, and it's displaying a messagebox of false, which is what you're returning.
Here's a couple of ideas.
a. Instead of using return false to suppress the messagebox for your ok and cancel buttons, in your callback function, use and if/then to check and see if one of these was clicked. If so, just return and do not execute the code for the modal.
b. Bind all buttons, links, and inputs to the click event, instead of onbeforeunload. Then use the check in (a) above in the same way.
Using jQuery to bind the event:
$(document).ready( function(){
$('button').on('click', function(e) {
if ((e.target.id === 'ok') || (e.target.id === 'cancel')) {
return();
} else {
// display message box
}
})
});
Hope this helps!
DISCLAIMER: I haven't actually seen the code, so this is sort of a shot in the dark.

popup window according to CheckBox checked

If user don't checked, I want to show asp:ModalPopupExtender and get numeric value from this form.
I'm using asp.net wizard control. I don't know "finish" button id. Can somebody help me?
You should set the target of the ModalPopupExtender as a dummy control, i.e., a hidden Button, LinkButton,... that never is going to be clicked by the user.
The Wizard control have a method called FinishButtonClick. Here is where you have to check the state of the CheckBox and show or not the popup calling to the method Show() of the ModalPopupExtender. You also can call to the Click() method of the hidden control or do it with JavaScript usign the BehaviourID of the ModalPopupExtender. Your choice.
Cheers!
To get "Finish" button id, just open the page in browser & view the rendered html code (Right Click -> View Source). From their you can get the finish button id.
And after getting "Finish" button id, you can easily associate a Client-Side event to do the required job.

How to handle JavaScript's confirm dialog box on GridView's PageIndexChanging event?

What I'm trying to do is when the user tries to go to a different page inside a GridView control, I want to display JavaScript's confirm dialog box. If the user clicks on OK then the page should change. If not the page should not.
What I've done at the moment is display the confirm dialog box when the GridView 's PageIndexChanging event is fired, but I can't seem to find a way to check which button was clicked on in the confirm dialog box and how to handle it.
Also, the GridView is inside an UpdatePanel and the ScriptManager.RegisterStartupScript method is being used to display the confirm dialog box.
First, you need to register your script in the scriptmanager's DataItem list. Then create the client side scripting that handles this event.
You can also do so via the following method: ScriptManager.RegisterClientScriptBlock. Here is its documentation.
You can refer to some samples.

Postback on a submit button

I have a page that has 4 tables. Initially when the page is loaded, it shows 1 & 2. Thats working fine. On Post back(When Submit is clicked), it should show 3 & 4. Even thats working fine(code shown here). When the submit is clicked again, it has to call updatePaymentInfo() and redirect. Is there something to write as a condition to call UpdatepaymentInfo() because when submit is clicked, it is taking as an other postback and showing me 3 & 4 again.
protected void imgbtnSubmit_Click(object sender, ImageClickEventArgs e)
{
try
{
if (Page.IsPostBack)
{
trtest.Visible = false;
trCCandBilling.Visible = true;
trtest2.Visible = true;
}
else
{
UpdatePaymentInfo();
Response.Redirect(ApplicationData.URL_MERCHANT_ACCOUNT_HOME, true);
}
}
}
My thought on the easiest way to do this is to have two image submit buttons in the same place. Button A is the one you already have button B is a new one that whose submit handler runs UpdatepaymentInfo and redirects.
Button B starts off invisible while button A is visible. When Button A is clicked in addition to the visibility changes you hide button a and show button B. Then when they click button B the right stuff happens.
Its not that elegant though.
Another solution might be storing values in the page to indicate the current page state that you can then check on button click.
It sounds like you're having trouble managing the current state of your page. You could try:
Having a second submit button. It would be stylistically indistinguishable from the first, and would be hidden/shown accordingly, but would have its own click event.
Placing a hidden form value on the page to track the current "step" of the process.
Breaking the page into two pages, since from the user's perspective it's clearly a two-page process.
My personal favorite, move to MVC :) Though it's understandable if you're stuck in a pre-existing WebForms app and there's just no budget to re-write it.
I guess that imgbtnSubmit_Click handles Click event of the Submit button so this method will be called only during the postback so the condition is incorrect.
I would not use this approach. ASP.NET contains controls which support these requirements. Check MultiView and Wizard. Create separate view with table 1 & 2 and button and another view with table 3 & 4 and button. Button on the first view will switch the view and button on the second view will call the method and redirect.
Another possible way to do this is keep your current set up and add a command argument to the button. By default it has some argument that you check on the first click. Then checking the command argument on the first click you do your showing and change the command argument to be something different. So on the next button click you do the work associated with the second command argument. Thus flipping the work done without having to hide or show a new control.

Categories

Resources