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
Related
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...
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.
I have a page that has several ListBoxes that have some cascading filtering based on the selected values using an AutoPostBack. The form takes all the selected values and generates an excel doc by cross-page posting to a different ASPX. The problem is, after clicking submit once, it will continually fire the cross-page postback every time a selection has changed.
<asp:ScriptManager runat="server" />
<asp:UpdatePanel UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:ListBox ID="ParentItems" runat="server" SelectionMode="Multiple" AutoPostBack="true"></asp:ListBox>
<asp:ListBox ID="ChildItems" runat="server" SelectionMode="Multiple" AutoPostBack="true"></asp:ListBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Submit" runat="server" PostBackUrl="~/AnotherPageThatGeneratesAnExcelDoc.aspx" />
How do I cancel the cross-page postback from the ListBoxes' SelectedIndexChanged events?
Here's the event in the codebehind:
Protected Sub ParentItems_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ParentItems.SelectedIndexChanged
'' do some filtering of the ChildItems ListBox
'' tried these but they do not work
''Submit.Enabled = False
''Submit.PostBackUrl = String.Empty
'' I also tried wrapping the button in a PlaceHolder and hiding/removing it, neither worked
''Buttons.Visible = False
''Buttons.Controls.Remove(Submit)
End Sub
This is my current solution using javascript. It works, but seems like a hack:
// using jQuery, add a click event that resets the form action
$("select[multiple]").click(function () {
this.form.action = this.form._initialAction;
});
Edit: adding a click event in the codebehind:
ParentItems.Attributes("onclick") = "this.form.action = this.form._initialAction;"
The problem is that using the PostbackUrl property resets the form action to a new URL, and your Ajax calls (or any subsequent postbacks) use whatever the current action of the form is.
Your solution doesn't work because the submit button isn't part of your UpdatePanel, so it never gets modified.
The easiest solution might be to move your Excel file generating code out of the page it's in, and into the page you're looking at, in the click handler of the button.
You also could probably include an iframe on the page you're looking at, and on submit, rather than going to a new page, set the source of the iframe to the Excel-generating page.
Both of these would avoid the need for using the PostbackUrl.
Here is my setup:
I have an asp.net button on a page --
<asp:Button id="btnSelectEmp" runat="server" Text="Select Employee" />
I have a .js file with the following jQuery click event --
$("input[id$='_btnSelectEmp']").click(function ($e) {
$("div[id$='_divEmpSearch']").css("display", "inline");
$e.preventDefault();
});
As you can see, clicking upon the button will set a div visible. Nothing special; not rocket science.
The div is wrapped with an asp.net update panel, and it contains an asp.net user control (.ascx)
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="divEmpSearch" runat="server" style="display: none;">
<uc:EmpSearch ID="ucEmpSearch" runat="server" />
</div>
// And a bunch of other controls that are updated according to whatever the user selects in the user control above
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ucEmpSearch" />
</Triggers>
</asp:UpdatePanel>
The user control above is also wrapped in an asp.net update panel, because it has to communicate with the server. Among other controls like textboxes and such, the user control has two buttons upon it: 1) an asp.net button that does a postback and 2) an asp.net button that does an asynchronous postback.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" /
<br />
asp:Button ID="btnContinue" runat="server" Text="Select" OnClick="btnContinue_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
<asp:PostBackTrigger ControlID="btnContinue" />
</Triggers>
</asp:UpdatePanel>
The button in the user control that does a postback is working great. I click it, a postback occurs and my div control is re-hidden. I can then click on the Select Employee button (the one that I supplied the code for at the very first of the question) and the jQuery click event is handled and the div will be reshown.
However, the button in the user control that does an asynchronous postback works also, but after it hides the div, if I then click on the Select Employee button the jQuery click event will not be handled.
What this tells me is that for some reason during an asynchronous postback to the page, something happens to the Select Employee button so that the jQuery click event no longer happens. Why?
Your button is replaced with a new one when your update panel comes back with new content, so this:
$("input[id$='_btnSelectEmp']").click(function ($e) {
Binds to the elements it finds at that time, instead you'll want .delegate() or .live() here to listen for click events from current and future elements, like this:
$("input[id$='_btnSelectEmp']").live("click", function ($e) {
$("div[id$='_divEmpSearch']").css("display", "inline");
$e.preventDefault();
});
Or a bit cheaper using .delegate():
$("#container").delegate("input[id$='_btnSelectEmp']", "click", function ($e) {
$("div[id$='_divEmpSearch']").css("display", "inline");
$e.preventDefault();
});
In this case #container should be a parent of the update panel, one that doesn't get replaced in the postback.
Use the live() function. live() delegates the click event to a parent element, so the element (in this case btnSelectEmp) doesn't need to exist at the time the event is bound.
$("#<%=btnSelectEmp.ClientID%>").live("click" function ($e) {
$("#<%=divEmpSearch.ClientID%>").css("display", "inline");
$e.preventDefault();
});
What is happening is the btnSelectEmp button is getting replaced by the asynchronous call and the new element has not been bound to an event handler.
Also, I've modified the jquery selector here to use the exact client id of the element. This will improve speed, plus I seem to recall certain selectors don't work with event delegation in certain versions of Jquery.
try live('click', function(){...}) instead of click(function(){...})
Wild guess : "_btnSelectEmp" is used more than once?
I have successfully added controls to pop up, like many check boxes ... now on check box checked event I want to show another check boxes on same popup. how can I do that plz can any one help me?
Make sure autopostback is true and wrap them in an updatepanel inside of the modal. Now you will be able to show/hide whatever you want on postback without the modal closing.
Do you want to just display check boxes(that's hidden) on checked event of other checkbox? You can attach javascript function to onClick event of check box and you can set visibility of other check boxes.
If you want to handle that in server side, you need to set autopostback to true and specify OnCheckedChanged event.
<asp:CheckBox AutoPostBack="true" runat="server" ID="chk1" OnCheckedChanged="chk1_OnCheckedChanged" />
protected void chk1_OnCheckedChanged(object sender, EventArgs e)
{
}
And put the modal popup control inside the update panel.
<ajaxtoolkit:modalpopupextender runat="server" ID="mpe"
BehaviorID="mpe_ID" PopupControlID="pnlModalPopup"
TargetControlID="btnSomething" CancelControlID="lnkUploadSongListOverlayClose"
DropShadow="false" />
<asp:Panel runat="server" ID="pnlModalPopup" CssClass="modal">
<asp:UpdatePanel runat="server" ID="updatePanel">
<ContentTemplate>
<!-- modal popup control -->
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
Here are the steps:
1- Set autopost back for the checkbox to true
2- Double click on the checkbox and on the checkbox1_OnCheckedChanged
if(checkbox1.Checked==true){Modalpopupextender.show();}