I am using an update panel for a form that when continue button is clicked returns to the same page but makes visible different fields to be filled in. One of the fields is some credit card data and is part of a user control. The user control has a "Pay Now" button. So, inside the page there is a user control containing fields that you fill in and then click "Pay Now". After hitting this button, if there's a validation error, error shows at the top of the page but the page doesn't move to top of page. I would like to know how after the user clicks on the user control button that is on a page that is wrapped in update panel can I scroll to the top of the page.(javascript not jquery would be preferable in this instance)
Code samples:
<ajax:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ImageButton ID="ContinueButton" runat="server" AlternateText="Continue" SkinID="Continue" EnableViewState="false" OnClick="ContinueButton_Click" ValidationGroup="group1" />
</ContentTemplate>
</ajax:UpdatePanel>
In Code behind a user control is instantiated.
ASP.CreditCardStuff cc = new ASP.CreditCardStuff();
cc.ValidationGroup = "group1";
phForms.Controls.Add(cc);
This is the user control that contains the "Pay Now" button
How about providing a validation error indicator next to the button as well as at the top of the page? This way the page would remain scrolled to the same point (nicer for the user), rather than jumping to the top, purely to make the error indicator at the top of the page visible (not so nice).
You could handle the end_request event:
function pageLoad(sender, args) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function (sender, args) {
if (args.get_error() == null) {
// do the scrolling here
}
});
}
Related
In my Web application, I am dynamically adding a Button named as "Click Me !". At Stage 1 , when the Button is clicked, it has to show a alert box . At Stage 2, it has to show a Popup.
I use ModalPopupExtender to achieve popup. The Problem is, the popup is just blinked once, instead of Displaying it constantly. Given below my codes...can any one help me to get rid of this ?
Page_OnLoad():
**************
Button Button1=new Button();
Button1.Text="Click Me !";
Button1.ID="LogBut";
Controls.Add(LogBut);
Stage 1:
JavaScript:
***********
function alert()
{
alert("Stage 1");
}
Code behind:
************
LogBut.Attributes.Add("OnClick", "alert();");
Stage 2:
JavaScript:
***********
var Modalpopup='<%=modalPermission.ClientID %>';
function Popup()
{
$find(Modalpopup).show();
}
Design:
*******
<Ajax:ModalPopupExtender ID="modalPermission" runat="server" TargetControlID="Infield"
PopupControlID="divPermission"></Ajax:ModalPopupExtender>
<asp:HiddenField ID="Infield" runat="server" />
Code Behind:
************
LogBut.Attributes.Add("OnClick", "Popup();");
Note: I am using the hidden field control's Id as ModaPopupExtender's TargetControlId. Am adding this button inside calendar control.
Screenshots of the calendar:
Modal popups do not remember that it's supposed to show after a popup. If you are attaching a popup show to a button, you have to disable the postback to the server. Most likely your problem is the button shows the modal, but also posts back, and on postback, the modal doesn't remember it's supposed to show. You can kill the postback by doing the following; set
UseSubmitBehavior='false'
on the server-side button, and then in the Popup function, do:
function Popup(e) {
// stop button event propagation, which causes postback
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
// show modal
}
And that should prevent a button postback to the server.
EDIT: Your function said Popup, but your javascript is rendering showpopup() as the function call. If that function doesn't exist (and spelled the exact same), it will never stop the postback.
I have a modal popup extender
<asp:ModalPopupExtender ID="ModalPopupExtender1" TargetControlID="btnAddNewGuest" BehaviorID="newGuestPopup"
PopupControlID="pnlNewGuest" CancelControlID="btnGuestCancel" BackgroundCssClass="modalBackground"
DropShadow="false" runat="server">
</asp:ModalPopupExtender>
pnlNewGuest contains all textboxes for input, a checkbox and btnSave. btnSave saves data to the server by calling the btnSave_Clicked at code behind.
On Checkbox onclick following jquery is called
$("#<%=checkbox1.ClientID%>").click(function () {
if ($("#<%=checkbox1.ClientID%>").is(':checked')) {
$('#guestdiv1 :input').attr('disabled', true);
}
else {
$('#guestdiv1 :input').attr('disabled', false);
}
});
Everything is working very smooth. The problem I face when I disable the controls in modal popup screen. The screen scrolls up however data is saved successfully.
It refreshes itself automatically since you probably didn't set the UpdatePanel's UpdateMode to Conditional - which means - each change you make to a control in the updatepanel will cause the updatepanel to be refreshed, and since you changed the "disabled" property - it refreshes itself
I have a lot of data to display in a GridView. Because there's so much information per row, I'd like to be able to display additional information when a user clicks on the row, so I thought a PopupExtender from the AJAX Toolkit would be perfect.
Ideally, I want the popup to display whenever any of the controls within the row are selected. I've been able to successfully attach the PopupExtender to a single control within the row, but I can't get the pop-up to attach to the row itself.
I would have thought that setting the PopupExtender's TargetControlId to the Row's ClientID within the RowDataBound event would work, but when I do this I get a runtime error:
TargetControlID of 'popupExtId' is not valid.
A control with ID 'gvList_ctl02' could not be found.
I noticed that the GridViewRow is rendered, the tr element does not include an id, so I also tried extending the GridView control to override the CreateRow method to render the id - using this method I was able to render the row's ID (e.g. gvList_ctl02), but the same runtime error was thrown when I added the PopupExtender back into the code.
I also tried binding the showPopup() javascript command to the row's onclick event to get the popup to display manually; whilst the click event is registered OK and is definitely triggered, the popup is still not shown.
Does anyone have any idea how to / if you can bind a PopupExtender to a GridViewRow?
My row bound code is as follows:
protected void gvList_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// Bind the popup extender's target ID to the row ID
// This will cause a runtime error
PopupControlExtender pop = e.Row.FindControl("popupExtId") as PopupControlExtender;
pop.TargetControlID = e.Row.ClientID;
// Also bind the client side click handler to try to get the popup to show
// The alert is triggered and no javascript error is generated, but the popup does not display
e.Row.Attributes.Add("onclick", "alert('Row Clicked'); $find('" + pop.BehaviorID + "').showPopup();");
}
}
Many thanks.
If you're not opposed to using an ajax ModalPopupExtender, I use a little bit of javascript and some sneaky hidden button clicks to fire off my modal popups from within a grid view. I usually make my modal popup extender's target control id my hidden button, then, via javascript, fire my hidden button's click event to show the modal popup.
Here's my modal popup and hidden button markup.
<asp:Button ID="hiddenButton" runat="server" Text="" style="display:none"></asp:Button>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server"
TargetControlID="hiddenButton" PopupControlID="Panel1" CancelControlID="CancelButton"
BackgroundCssClass="modalBackground" Drag="True"/>
Here's my javascript to show my popup.
function showModal(btnID) {
btn = document.getElementById(btnID);
btn.click();
}
In my rowdatabound event, I call the javascript function showModal from button's onclick event.
Button myButton = (Button)e.Row.Cells[9].Controls[1];
matchButton.Attributes.Add("onclick", "showModal('" + hiddenButton.ClientID + "');");
Hope this might help point you in the right direction.
I have a GridView with a few columns. One of the columns is a button. It is in a template field which looks like this:
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnApply" Text="View Details" CssClass="viewdetails" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
My JQuery code is as follows:
<script type="text/javascript">
$(document).ready(function() {
$('.viewall, .viewdetails').click(function() {
alert('Must be a member to view all');
});
});
</script>
When I first visit the page and click the view details button, the alert pops up, but after that, if I click any other view details button, it does not popup until the page is refreshed. The View All button displays the message all the time because when I click that, the page is refreshed.
A couple notes. The View Details button is inside an asp.net GridView and the GridView is inside an asp.net UpdatePanel.
Also, since view all and viewdetails calls the same message, is there a way to combine them into one click event, for example, $('.viewall .viewdetails').click(.......
If I remove the update panel, it works, but everytime I click View All or View Details, I get a flicker, so I added a return false; and this stopped the flicker, however, this prevents the user from going to the Member page if they are indeed logged in. If I take the return false off and they are signed in, the message still popsup and then takes them to the Member Page. This is obviously not supposed to happen, but I am not sure how to handle it. Basically the events should be:
If the user is not logged in and they click the View all or View details button, display a message saying they must sign in or become a member.
If the user is logged in and they click the View all or View details button, redirect them to the Members Page. Both View All and View Details have server side click events which do a Response.Redirect to the Members Page if they are logged in.
You need to cancel the click event in these cases...
$(document).ready(function() {
$('.viewall').click(function(e) {
alert('Must be a member to view all');
e.preventDefault();
});
$('.viewdetails').click(function(e) {
alert('Must be a member to view all');
e.preventDefault();
});
});
You can use multiple selectors by delimiting them with a comma...
$(".selector1, .selector2").click(function() { ... });
A TextBox is set to AutoPostback as changing the value should cause a number of (display-only) fields to be recalculated and displayed.
That works fine.
However, when the field is tabbed out of, the focus briefly moves on to the next field, then disappears when the page is redrawn so there is no focus anywhere.
I want the focus to be on the new field, not the textbox I've just changed.
Is there a way to work out which field had the focus and force it to have it again when the page is redrawn?
This is "by design". If you are using ASP.NET 2.0+ you can try calling the Focus method of your TextBox once the postback occurs (preferably in the TextChanged event of the TextBox).
I am not sure if there is any built-in way to track focus but I found this article in CodeProject which should do the trick.
You could also consider refresh display-only fields using AJAX UpdatePanel. This way you won't lose focus from the new field.
Also I have proposed pure server-side solution based on WebControl.Controls.TabIndex analysis, you can use it, if you like.
This is what is happening:
1) TAB on a field - client event
2) Focus on next field - client event
3) Postback - server event
4) Page redrawn - client event new page overrides preious client events
The solution of your problem is to:
a) get the element that has gained focus BEFORE postback
<script>
var idSelected;
$("input").focusin(function () {
idSelected = this.id;
});
</script>
b) store the ClientID (actually in var idSelected) somewhere (i.e. an hidden Textbox, vith ViewState = true) BEFORE postback
** b) get ClientID ** (extract from hidden TextBox and put it in var idSelected) AFTER postback
d) get the element with ClientID and set focus AFTER postback
<script>
$(document).ready(function () {
if (idSelected != null) {
$("#" + idSelected).focus();
idSelected = null;
});
});
</script>
Note: this sample scripts use JQuery.
Remember to put Jquery.js in your solution and a reference in your page
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<asp:ScriptManager runat="server" >
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery.js" ScriptMode="Auto" />
....
Note2: this solution works without AJAX.
Look at this answer: to make Javascript work over Ajax you must use code like this:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function EndRequestHandler(sender, args)
{
MyScript();
}
</script>