We Keep Coding

Populating existing dropdownlist using AsyncPostBackTrigger, not populate a new dropdownlist

For my web app, I tried to populate dropdownlist (DDL) based on what client click on the calendar extender ( I have this declared in codebehind vb.net to load it from database) using AsyncPostBackTrigger (because I dont want the page to autopostback). I have the button to fire the date selected and it did worked to populate the DDL except not really the way I wanted it to. Instead of updating it in the existing DDL, it creates a new DDL besides the existing ones. I tried looking for solution but did not managed to find any. Anyone can help me figure out why this happens and how to fix this?
Here's my asp.net & javascript code
<asp:Label ID="label16" runat = "server" Text="Select the date"></asp:Label></td>
<td id="Td29" style="width:290px;" runat="server">
<asp:TextBox ID="tbPostingDt" runat="server" style ="width:174px;"></asp:TextBox>
<asp:Button ID="ClickBtn" runat="server" Text="Click" style="display:none" OnClick="ClickBtn_Click" />
<asp:ImageButton ID="CalendarBtnPostingDt" runat="server" ImageUrl="~/Images/Calendar_scheduleHS.png" AlternateText="Click to display calendar"/>
<cc1:CalendarExtender ID="calPost" runat="server" PopupButtonID="CalendarBtnPostingDt"
TargetControlID="tbPostingDt" OnClientDateSelectionChanged="dateSelectionChanged" Format="dd-MMM-yyyy" Enabled="True"></cc1:CalendarExtender></td>
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="label18" runat = "server" Text="Post Cycle No"></asp:Label></td>
<td id="Td33" style="width:290px;" runat="server">
<asp:DropDownList ID = "ddlPostCycleNo" runat = "server" style ="width:180px;">
<asp:ListItem>ALL</asp:ListItem>
</asp:DropDownList> </td>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ClickBtn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
function dateSelectionChanged(sender, args) {
var PostingDt = document.getElementById('<%= tbPostingDt.ClientID%>').value.trim();
var clickButton = document.getElementById("<%= ClickBtn.ClientID %>");
clickButton.click();
}

nevermind I figured it out already. I used the ontextChanged for the textbox when user select the date from calendar, and removed OnClientDateSelectionChanged, triggers and dummy button. I keep the UpdatePanel and it works just the way I wanted.

Data from entity framework displayed in javascript/Jquery dialog

I have a problem, and looking for a solution for 2 days
Target : Create/edit client... in HTML build a dialog with and asp fields with clientIDMode static
<div id="divDialog" runat="server" clientidmode="Static" style="display: none;">
<div class="DialogFields">
<asp:Label ID="Label1" runat="server" Text="Firstname"></asp:Label>
<br />
<asp:TextBox ID="tbxFirstName" runat="server" ClientIDMode="Static"></asp:TextBox>
</div>
...
In script
$("#btnShowDialog").click(function () {
openDialog();
});
function openDialog() {
$("#divDialog").dialog('open');
$("#divDialog").parent().appendTo($("form:first"));
}
When I click the button btnShowDialog it works fine... But
Beneath it I have a gridview within it a edit button (asp:Linkbutton) with a event to the codebehind it looks like:
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="Edit" OnCommand="Edit_Click" CommandArgument='<%#Eval("RelationID") %>'
runat="server"><img src="../images/Edit-item.png" alt="Edit" /></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
In codebehind take the parameter from commandargument and fire LoadInfo (specific data to all the fields in de dialog).
LoadInfo(e.CommandArgument != null ? int.Parse(e.CommandArgument.ToString()) : -1);
but no way I get the dialog open.
I tried
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "openDialog();", true);
and
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "openDialog();", true);
after this LoadInfo, push btnShowDialog button and it opens the dialog and all data perfect in place.
Also tried the other way around as Directly to Jquery function, get all data loaded and open the dialog. 2 problems, loading in codebehind was not even started before the dialog opens. and I only can get a static function in the codebehind.
A lot of ground to cover for me, but can any body help me out (even for a part).
...Thanx

If I understand your question correctly, you are trying to fire some client scripts (openDialog) from the server side, but they wont fire?
Try placing your page in an update panel, lets assume that we name the update panel "MyUpdatePanel". And then refer to the update panel like this:
ScriptManager.RegisterStartupScript(MyUpdatePanel, MyUpdatePanel.GetType(), "MyUpdatePanelScript", "openDialog();", true);

Multiple UpdateProgress Controls In TabContainer, Linked To Single UpdatePanel

I have an UpdatePanel with a TabContainer in it. Each TabPanel has a Gridview in it (code not included since it's not important), and I would like to have a different UpdateProgress controls located in each TabPanel. Please see my code below for an example of what I'm trying to do.
I know the standard approach is to locate the UpdateProgress control outside of the UpdatePanel, but I would like it/them to be located inside the UpdatePanel and TabContainer because I want the "Loading..." message to appear right on top of each of my GridViews. Currently the UpdateProgress control works on the first TabPanel (as indicated below in my code), but not on the second or any subsequent TabPanels.
<asp:UpdatePanel ID="updTest" runat="server">
<ContentTemplate>
<ajax:TabContainer ID="conTest" runat="server">
<ajax:TabPanel ID="pnlTest1" runat="server">
<!--This UpdateProgress Control Does work-->
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updTest">
<ProgressTemplate>
Loading, please wait....
</ProgressTemplate>
</asp:UpdateProgress>
</ajax:TabPanel>
<ajax:TabPanel ID="pnlTest1" runat="server">
<!--This UpdateProgress Control Doesn't work. How can I fix it?-->
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="updTest">
<ProgressTemplate>
Loading, please wait....
</ProgressTemplate>
</asp:UpdateProgress>
</ajax:TabPanel>
</ajax:TabContainer>
</ContentTemplate>
I'm open to another approach if the way I'm trying to accomplish this isn't the best way. Thanks for any ideas.

What you can do is still only have one updateprogress but inside of your put an updatepanel to change what your updateProgress shows.
something like this
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true">
<ProgressTemplate>
<asp:UpdatePanel ID="up1" runat="server" >
<ContentTemplate>
<!-- put a label of something in here -->
</ContentTemplate>
</asp:UpdatePanel>
</ProgressTemplate>
</asp:UpdateProgress>
hopefully this makes sense, I'm not the best at explaining sometimes.

Javascript to back button

I have one GridView with Employee search results in it.
This GridView shows results of EmpNo, EmpName, Salary. For each EmpNo cell in the GridView, there is a link to ManageEmployee.aspx page.
Till here okay, no problem.
In ManageEmployee.aspx page there are two buttons 1.Update, 2.Cancel
When user clicks on Cancel button, the page should navigate to Employee results page.
Can anybody give suggestion how to do this?

Add in a HyperLink field in a TemplateField. If you pass the search term to the details page as ~/Details.aspx?query=John%20Smith this will make a URL that is ~/SearchResults.aspx?query=John%20Smith.
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# String.Format("~/SearchResults.aspx?query={0}", Request["query"]) %>'>Cancel</asp:HyperLink>)
</ItemTemplate>
</asp:TemplateField>
If you want JavaScript (be careful about postbacks)
<asp:TemplateField HeaderText="">
<ItemTemplate>
Cancel
</ItemTemplate>
</asp:TemplateField>
If you have troubles with postbacks you will probably need to add in a direct URL like the HyperLink version above, or simply a window.location=".." version instead of history.go().

if you are looking for navigation using ASP.Net you can use
Response.Redirect("Your URL")
Example on how to use it - MSDN

Use the onclick attribute:
onclick="javascript:window.location.href='/relative/path/to/employeeResults.aspx'"

Multiple ModalPopupExtenders on one page, each with javascript

Hello all gurus in the area of ASP.NET AJAX and JavaScript!
Here's the deal: I have a user control (ascx) that currently contains a help Button and a ModalPopupExtender showing a Panel. The idea is that the user clicks the button and the help info is presented in a modal popup on top of the page, with another button to close it.
The help info can very well be larger than the window, so I have to resize the modal popup on show. When the control is coded as below, the Panel is resized initially, however; if the parent page has a validation error and is resent to the client, the javascript on top never executes.
Here's the control markup:
<script type="text/javascript">
// Adjust for popup y = 130 and a small gap.
var myAdjustedHeight = getPageHeight() - 150;
if (document.getElementById('<% =pnlPopUp.ClientID %>')) {
document.getElementById('<% =pnlPopUp.ClientID %>').style.height = myAdjustedHeight;
document.getElementById('<% =pnlScroll.ClientID %>').style.height = myAdjustedHeight - 20;
}
</script>
<asp:button id="btnHelp" runat="server" text="Help" />
<asp:updatepanel id="upPopUp" runat="server">
<contenttemplate>
<asp:panel id="pnlPopUp" runat="server" width="600">
<div class="header" style="float: left;">
Help
</div>
<asp:button id="btnClose" runat="server" text="Close" style="float: right; padding-bottom: 3px;" />
<asp:panel id="pnlScroll" runat="server" scrollbars="Vertical" style="clear: both;">
<asp:gridview id="grv" runat="server" autogeneratecolumns="true" showheader="false" gridlines="None" cellspacing="2" cellpadding="2">
</asp:gridview>
</asp:panel>
</asp:panel>
</contenttemplate>
</asp:updatepanel>
<ajaxtoolkit:modalpopupextender id="popUpExtender"
runat="server" backgroundcssclass="modalBackground" okcontrolid="btnClose"
targetcontrolid="btnHelp" popupcontrolid="pnlPopUp" x="100" y="130" />
(The GridView is filled with data in the Page_Load using a predefined DataSet in a basic fashion.)
I have tried to add this:
function pageLoad() {
document.getElementById('<% =popUpExtender.ClientID %>').add_shown(adjustHeight);
}
(where adjustHeight() is a function containing the code from the top) but when it fires I get null back for the ModalPopupExtender - and indeed it never seems to be included into the markup sent down the wire.
BTW, I need to add at least two instances of this help button to present help info for several elements on the page. Hence, I can't use the BehaviorID property of the ModalPopupExtender, since it is piped straight out to the page and I get an id collision.
So, how do I fix this? Am I to move the ModalPopupExtender to the Page or can I solve this within the ascx control?
If anyone has an idea on how to fix this, I would appreciate it.

Use this in your pageLoad:
$find('<% =popUpExtender.ClientID %>');
add_shown wouldn't exist for the HTML element, which document.getElementById returns.