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.
Related
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 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
}
});
}
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() { ... });
I have a button control. Once the user clicks on it, the click event should fire and then the button should get disabled. How can I do this? I have the option to use JQuery or JavaScript or both.
Here is my button declaration:
<asp:Button
ID="Button1"
runat="server"
Text="Click Me"
onclick="Button1_Click"
/>
On the button click code behind, I have added a Response.Write(). That should get executed and then the button should be disabled
For whatever reason, the HTML spec dictates that disabled elements should not be included in POST requests. So, if you use JavaScript to disable the HTML element in the client-side onclick event, the input element will be disabled when the browser assembles the POST request, the server won't be properly notified which element raised the postback, and it won't fire server-side click event handlers.
When you set the UseSubmitBehavior property to false, ASP.NET renders an input element of type button instead of the regular input of type submit that the ASP.NET Button control normally generates. This is important because clicking a button element does not trigger the browser's form submit event.
Instead of relying on a browser form submission, ASP.NET will render a client-side call to __doPostBack() within that button element's onclick handler. __doPostBack will raise the postback explicitly, regardless of what POST data comes through in the request.
With the postback being raised independent of the browser submit event, you're freed of the previously mentioned HTML quirk. Then, you can set an OnClientClick of "this.disabled = true;", which will render as "this.disabled = true; __doPostBack('Button1', '');", and things will work as intended.
add an OnClientClick="this.disabled = true;" to your button.
If you are using Asp.net Ajax you might want to look at using PostBack Ritalin.
Have you tried this?
Add an OnClientClick="MyFunction();" to your .NET button.
Then in the .aspx page script tags you add the following JS function:
<script type="text/javascript">
function MyFunction()
{
window.setTimeout(function ()
{
// get the button/control to disable using your favourite clientside ...
// ... control grabbing code snippet ...
// ... eg. JQUERY $('Button1'), getElementById, etc.)
document.getElementsByName('Button1').Button1.disabled = true;
// I've used "getElementsByName" because .NET will render a button with
// ... a "name" attribute, and not an "id" attribute, by default
}, 1);
}
</script>
This gives the browser a chance to post back, followed by a quick button disable.
You need to be careful that the postback occurs before you disable the button through client script. This is a common gotcha with ajax and input boxes. Disabling an input box prevents the data from being sent from the browser, even if you can see text within it while it is disabled. The answer is that you need to use jquery for this to ensure the server-side code runs first before it is disabled.
-Oisin
// to disable
this.setAttribute('disabled', true);
// to enable
this.removeAttribute('disabled');
this is a cross browser solution
There is really cool event for body tag "<"body onBeforeunload="buttonId.disabled = true;" ">"
This event triggers right before form submits, in other words your data will be submitted correctly.
When using the "this.disabled = true" method make sure you check if the page is valid before disabling the control if you have validators on the page. If validation fails you won't be able to re-enable the control without reloading the page.
if (Page_IsValid) this.disabled = true;
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function BeginRequestHandler(sender, args) {
document.getElementById('<%= lblMessage.ClientID %>').innerText = "Processing...";
document.getElementById('<%= btnSubmit.ClientID %>').innerText = "Processing";
args.get_postBackElement().disabled = true;
}
</script>
Add Script Tag in source page . change Id of button in code . You can disable the button till the process completes execution .
you can disable it server side
Button1.Enabled = false;