I am using ajax modal popup dialog to make users confirm their action. Since I have several scenarios where the user needs to confirm the action, I would like to re-use the same popup dialog, only changing which event is fired when the user click btnYes (confirming the action).
In code behind (VB) I assign the message for the popup:
lblMessageConfirm.Text = strMessage
Then, before opening the dialog, I would like to assign the event that btnYes will fire if the user clicks. I tried the methods below and none seems to work:
AddHandler btnYes.Click, AddressOf Test '(this event does not do anything)
And also
btnYes.Attributes.Add("onclick", "Test") '(this returns an error “Test is undefined”)
Test1 is the sub I want to assign to “Onclick” and it is in the code behind in the page where the popup is set up:
Protected Sub Test(sender As Object, e As EventArgs)
MsgBox("Test ")
End Sub
I open the dialog:
ModalPopupExtender2.Show()
Here is the html for the popup – it does show up, so the only problem is trying to assign onclick event. When I add the “onclick” in the HTML, the Test sub runs
<cc1:ConfirmButtonExtender ID="cbe" runat="server"
DisplayModalPopupID="ModalPopupExtender2" TargetControlID="lnkDummy">
</cc1:ConfirmButtonExtender>
<cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server"
PopupControlID="pnlPopup2"
TargetControlID="lnkDummy"
CancelControlID="btnNo" >
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup2" runat="server" CssClass="modalPopup"
Style="display: none">
<div class="ModalHeader" runat="server">
Please Confirm ...
</div>
<div class="ModalBody" runat="server">
<asp:Label ID="lblMessageConfirm" runat="server">
</asp:Label>
</div>
<div class="ModalFooter">
<asp:Button ID="btnYes " runat="server"
CSSClass="ModalButton" Text="OK" />
</div>
</asp:Panel>
With the following code Test runs:
<asp:Button ID="btnYes " runat="server" CSSClass="ModalButton" Text="OK"
onclick="Test"/>
I have this working with 2 Yes buttons and making the correct one visible based on the scenario, but adding more scenarios where the user needs to confirm will mean adding more buttons...
Related
I am having very strange issue. I am using the Ajax Toolkit Calendar Extender. I have Update Panel - > ListView -> TextBox (AutoPostBack=Yes).
If I type in box it will update to db then do update panel using code behind updatepanel.update(). This works fine. So I want to put calendar in the text field so I use Ajax Calendar Extender and call the target control ID of the textbox and when I am in there I click the textbox and calendar pops up then I choose date and textbox changes to new date then updates to db then postbacks, but the problem is the calendar pops up again after the postback. I need a way to hide that damn calendar after selecting date the first time.
<asp:TextBox ID="txtDespatchDate" runat="server" CssClass="tblDespContTxtLst" Text='<%# Eval("DescDespatchDate") %>' Width="70px" AutoPostBack="True" OnTextChanged="updDespatchLine" AutoComplete="Off" />
<ajaxToolkit:CalendarExtender ID="calDespatchDate" runat="server" CssClass="Calendar" Format="dd/MM/yyyy" PopupPosition="BottomLeft" TargetControlID="txtDespatchDate" />
I figured this one out a long time ago, and being on a server and all and doing postbacks I couldnt get around it using the ajax extender, so I have to use JQuery, I did something like this;
Code Behind
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
ScriptManager.RegisterStartupScript(NameOfUpdatePanel, Me.GetType, "SuperCalendar", "$( function() {
$('.Calendar').datepicker({ dateFormat: 'dd/mm/yy'}); } );", True)
End Sub
ASP Page
<asp:UpdatePanel ID="NameOfUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txtBox1" runat="server" CssClass="Calendar" />
</ContentTemplate>
</asp:UpdatePanel>
You need to add the latest JQuery Header to the top of your page like;
<script src="../Scripts/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
All you have to do is every time you want a date popup you just add the Calendar Class to it so;
CssClass="SomeTextBoxClass Calendar"
I dont get any problems after postbacks with it popping up anymore.
On click of button a popup window open. In the child window I made some changes and when I save, popup need to be closed and partial parent page refreshed like a single updatepanel.
I don’t want complete parent page refresh.
You have to trigger the event that refreshes the target update panel from the popup. One way of doing this is using the window.opener element.
Here is a simple example of code in a popup that you can adapt for your project. Note you'll need to change 'btnTriggersUpdate' to the ClientID that is given to whatever Button triggers the Update Panel refresh.
<asp:Button runat="server" ID="btnRefreshParentUpdatePanel" OnClientClick="window.opener.document.getElementById('btnTriggersUpdate').click();" Text="Refresh Parent Update Panel" />
In my example, here is the Update Panel in the parent:
<asp:UpdatePanel ID="upnTarget" runat="server">
<ContentTemplate>
<asp:Label id="lblUpdatePanelLabel" runat="server" Text="Not Updated"></asp:Label>
<asp:Button ID="btnTriggersUpdate" runat="server" Text="Refreshes Update Panel" />
</ContentTemplate>
</asp:UpdatePanel>
Parent's btnTriggerUpdate_Click to prove it updates:
Protected Sub btnTriggersUpdate_Click(sender As Object, e As EventArgs) Handles btnTriggersUpdate.Click
lblUpdatePanelLabel.Text = "Updated"
End Sub
I am using bootstrap modal in my asp.net page like this:
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<asp:UpdatePanel ID="ModalUpdatePanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnRegister" EventName="Click" />
</Triggers>
<ContentTemplate>
<p>
textboxes here
<div class="popup-footer-wrapper">
<div class="popup-footer-left">
<%-- <input type="submit" class="login-button" name="login-button" value="Sign Up">--%>
<asp:Button ID="btnRegister" runat="server" CssClass="login-button" OnClick="btnRegister_Click"
UseSubmitBehavior="false" Text="<%$ Resources: HRGELoggedOutMaster, Signup %>" />
</div>
</div>
</p>
</ContentTemplate>
</asp:UpdatePanel>
</div>
i see that inside
protected void btnRegister_Click(object sender, EventArgs e)
all the texboxes show empty value. whatever user type in textbox. Please suggest how to fix it. It may be because of UseSubmitBehavior="false" but if i dont use it then control doesnt go to onclick event.
The reason why the you are not seeing your posted values, is because your values are not being posted. The bootstrap modal manager uses the 'body' element as the root element to which it appends your modals. As a result your modals are now outside the 'form' element and the values are not being posted back to the server.
To fix this, change the default value of the 'manager' property as follows:
// Note the manager is passed to the root form element.
// Otherwise, the modals are taken out of the form and
// values not posted back to the server
$.fn.modal.defaults.manager = $.fn.modalmanager.defaults.manager = 'body form:first';
EDIT: This is assuming you are using the Bootstrap-Modal Extension
Steven Anderson is right, values are not posted because modal inputs are outside the form.
I was able to workaround this problem using javascript to copy the value of the modal inputs to hidden asp.net controls.
I create a hidden asp.net control outside of the modal:
<asp:HiddenField ID="MyHiddenControl" value="name" runat="server" />
The modal textbox I want to submit:
<asp:TextBox ID="FormYourName" CssClass="form-control" runat="server"/>`
My modal submit button looks like this;
<asp:Button ID="BtnSubmit" runat="server" Text="Submit" CssClass="btn btn-primary" OnClientClick="Javascript:DoCustomPost();" UseSubmitBehavior="false" />
My JavaScript function looks like:
function DoCustomPost()
{
var ModalTextBox = document.getElementById("FormAmenity");
var HiddenTextBox = document.getElementById("MyHiddenControl");
// This is the value I want to Post
MyHiddenControl.value = ModalTextBox.value
}
So when I click "submit" in my modal window a postback kicks, the value of the textbox is copied to the hidden control and I can read the value from the hidden control in code-behind:
Protected Sub BtnSubmit_Click(sender As Object, e As EventArgs) Handles BtnSubmit.Click
Dim Something As String = MyHiddenControl.Value
End Sub
I just had similar problem. I resolved this by moving the modal element inside the form element using jquery.
function init() {
var element = $('#myModal').detach();
$($("form")[0]).append(element);
}
window.addEventListener('DOMContentLoaded', init, false);
Use the dotnet text box, or add an id and a runat server tag to the input field.
<asp:PlaceHolder ID="pnlThanks" runat="server" Visible="false">
<p><asp:Literal ID="lblReceipt" runat="server"></asp:Literal></p>
</asp:PlaceHolder>
<asp:PlaceHolder ID="pnlForm" runat="server" Visible="true">
<form id="form1" runat="server" class="busgroup-form">
//// All form controls
</form>
</asp:PlaceHolder>
Code Behind file:
Protected Sub submit_Click(ByVal sender As Object, ByVal e As EventArgs) Handles cmdsubmit.Click
form1.Controls.Clear()
pnlForm.Visible = False
pnlThanks.Visible = True
End Sub
So, after submitting form when "pnlThanks" placeholder is visible, I can see proper contents displayed on page. But when I do "view source" on the browser, I see the source code for form and not the content inside "pnlThanks" placeholder.
What am I doing wrong ?
You need to have all of your controls within the <form> tag, because ASP.NET depends upon the form to do postbacks, etc.
You can only have one <form> tag in your page.
Change your code to this:
<form id="form1" runat="server" class="busgroup-form">
<asp:PlaceHolder ID="pnlThanks" runat="server" Visible="false">
<p><asp:Literal ID="lblReceipt" runat="server"></asp:Literal></p>
</asp:PlaceHolder>
<asp:PlaceHolder ID="pnlForm" runat="server" Visible="true">
</asp:PlaceHolder>
</form>
Your code works as expected when I tested it. My guess is there is another pnlForm.Visible = True in your code elsewhere that is executed on your postback.
pnlThanks isn't rendered if visible=false, therefore it won't show in the source. You can use CSS (display=none) to hide it on start and change when needed.
I have a gridview where I have button for each row. After clicking this button, the Modal PopUp Extender Panel is opened (with PanelName.Show()). The Panel contains a user control, which shows some labels, textboxes,etc. with an additional info binded form SqlDataSource. Until this point it works well. But, when I click another button, the panel is purely shown but the content is not refreshed (based on which button is clicked, some details info should be shown). Basically, the method SqlDataSource_Selecting is called only for the panel popup showing but not anymore.
How can I force panel to be refreshed (reloaded) after each PanelName.Show()??
Thanks in advance.
If I'm understanding your question correctly, I think the problem is that you just need to re-Bind your data bound controls after the user clicks the button to change the Selected item. You can use [ControlName].DataBind() to do that. Does that make sense?
It depends on whether the control(s) you want to refresh are DataBound() or not.
In other words, can you force the control to reload by using a DataBind() method call to force the control to reload itself, with either the same or new data?
Most GUI controls have the DataBind() method, but it's useless if the control is not actually using data to work!
This is why in your case your panel is not "refreshed" with new data because using a DataBind() on the panel does nothing. Using a databind() on the entire GridView is a different story and should work. Maybe place an UPDATEPANEL around the whole lot? If you do you have to be careful your normal edits and other Commands on the rows will continue to work.
However, What you can do is place the modalpopupextender inside your TemplateField, and using a "trick", you can keep your server post backs and still fire the popup panel.
ie
<asp:UpdatePanel ID="upADDMAIN" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnADD" runat="server" Text="NEW LOGIN" BackColor="Blue" Font-Bold="True" ForeColor="#FFFFCC" OnClick="btnADD_Click" />
<asp:Button ID="btnDUM" runat="server" style="display:none" />
<div style="height:20px">
</div>
<ajaxToolkit:ModalPopupExtender ID="mpeADD" runat="server"
targetcontrolid="btnDUM"
popupcontrolid="upADD"
backgroundcssclass="modelbackground">
</ajaxToolkit:ModalPopupExtender>
<asp:UpdatePanel ID="upAdd" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlADD" runat="server" Width="700px" HorizontalAlign="Center" CssClass="auto-style10" Height="200px">
..
..
<div id="puFTR" class="auto-style17" style="vertical-align: middle">
<asp:Button id="btnOK" runat="server" Text="OK" style="width: 80px" OnClick="btnOK_Click" />
<asp:Button id="btnCAN" runat="server" Text="CANCEL" style="width: 80px" OnClick="btnCAN_Click" CausesValidation="False" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
As you may see, the btnDUM control is a Dummy to get the MPE to work, but it's not actually used as it's hidden by the style="display:none" tag.
However, the btnADD does work because it calls a Click() method on the server side which does the refresh of data on your new row. You may have to use a little jScript to pass the ROWINDEX into the Click() method for it to work with a GridView.
Incidentally, the Click() method in my case "controls" the MPE manually...
protected void btnADD_Click(object sender, EventArgs e)
{
ClearADDform();
mpeADD.Show();
}
protected void ClearADDform()
{
txtLOGIN.Text = string.Empty;
cbISActive.Checked = true;
txtPWD.Text = string.Empty;
ddlAgent.SelectedIndex = -1;
}
In my case, the above code example is outside a GridView, so you'll need to adjust.
But the point is, you can still have Server Side calls using Ajax popups!
Good luck.