We Keep Coding

Why the javascript alert not displaying inside UpdatePanel

I have a linkbutton inside an updatepanel:
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="upSaveComplete" ClientIDMode="Static">
<ContentTemplate>
<asp:Panel ID="Panel90" runat="server" CssClass="navInnerDiv" Width="200px" ClientIDMode="Static">
<asp:Panel ID="Panel91" runat="server" CssClass="navInnerDivContents">
<asp:Panel ID="Panel92" runat="server" CssClass="navInnerDivContentsTop">
<asp:Panel ID="Panel93" runat="server" CssClass="navInnerDivContentsTopSubTwo">
<asp:ImageButton ID="ibSave" ImageUrl="~/theImages/Save.png" runat="server" CssClass="navImages" OnClick="btnSave_Click" />
<br />
<asp:LinkButton ID="btnSave" runat="server" Text="Save" ClientIDMode="Static" OnClick="btnSave_Click" CssClass="linkOff" />
</asp:Panel>
</asp:Panel>
<asp:Panel ID="Panel94" runat="server" CssClass="navInnerDivContentsBottom">
Task Actions
</asp:Panel>
</asp:Panel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
code behind:
protected void btnSave_Click(object sender, EventArgs e)
{
ShowMessage();
if (CheckSameUser() == strUser)
{
UpdatePanel upTDNotes = (UpdatePanel)ContentMain.FindControl("upTaskDetailRight");
if (upTDNotes != null)
{
upTDNotes.Update();
}
//MessageBox.Show(lblTDNotes.Value);
string strSaveQuery = #"{QUERY}";
//MessageBox.Show(strSaveQuery);
using (SqlConnection scConn = new SqlConnection(strMainConn))
{
try
{
scConn.Open();
SqlCommand cmd = new SqlCommand(strSaveQuery, scConn);
cmd.ExecuteNonQuery();
Session["queryChanged"] = "Yes";
}
catch (Exception ce)
{
}
}
}
else
{
}
Response.Redirect("YourTasks.aspx");
}
public void ShowMessage()
{
string message = "Hello!";
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<script type = 'text/javascript'>");
sb.Append("window.onload=function(){");
sb.Append("alert('");
sb.Append(message);
sb.Append("')};");
sb.Append("</script>");
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", sb.ToString());
}
When I click the Save button, the alert isn't being displayed. I have ScriptManager already on the page but it still didn't work.
How can I modify my code so I am able to see the alert (or even a confirm) window on click on the link/image

Cut down to its most basic level, your code says this:
ShowMessage();
if (CheckSameUser() == strUser)
{
// Stuff
}
else
{
}
Response.Redirect("YourTasks.aspx");
So you set up the bit of javascript to be run ... and then you send an instruction down to the browser to redirect to the page "YourTasks.aspx".
The javascript was set up to render when your page was sent down to the browser ... but you are redirecting before your page can be rendered, so that javascript never reaches the browser, and therefore never executes.
If what you want is to have the message display on the client immediately on click, and then have the server go and do something (like save your data and then send you to a new page), your best bet would be to hook the javascript up to a client-side event, like the submission of the form. You can do this easily with jQuery or even with basic javascript (although the update panel can complicate things a bit.)

Calling asp net button click event with JS will not call server side event

Sorry to post perhaps a silly problem here, but I'm at my wits end with it. I have a hidden field with a button inside an update panel like so:
<asp:UpdateProgress runat="server" ID="updprCompLines" AssociatedUpdatePanelID="updpanCompLines">
<ProgressTemplate>
<img src="../Images/ajax-loader.gif" alt="Please wait..." /> </ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" ID="updpanCompLines" UpdateMode="Conditional">
<%--<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnFillMembers" />
</Triggers>--%>
<ContentTemplate>
<div>
<asp:HiddenField ID="hdnField" runat="server" />
<asp:Button ID="btnFillMembers" runat="server" style="display:none;"
Text="DummyButton" onclick="btnFillMembers_Click" />
</div>
The update panel also contains a gridview and inside my gridview I have a link button:
<ItemTemplate>
<asp:LinkButton ID="lkbtBenefName" runat="server" Text='<%#Eval("COMPETENCE_CODE") %>'
OnClientClick='<%#Eval("COMPETENCE_LINE_ID", "return SelectedCompetence({0})") %>'/>
</ItemTemplate>
The call is to a JS function that is supposed to call the above button:
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" EnablePageMethods="true"/>
<script type="text/javascript">
function SelectedCompetence(CompetenceLineId) {
document.getElementById('<%= hdnField.ClientID %>').value = CompetenceLineId;
var clickButton = document.getElementById('<%= btnFillMembers.ClientID %>');
clickButton.click();
}
</script>
Button click event method:
protected void btnFillMembers_Click(object sender, EventArgs e)
{
lblGvMemError.Text = "";
lblGvMemError.ForeColor = Color.Red;
if (hdnField.Value != null || hdnField.Value.ToString() != "")
{
try
{
int CompLineId = Convert.ToInt32(hdnField.Value);
GetSelectedCompLineMembers(CompLineId);
}
catch (Exception ex)
{
lblGvMemError.Text = "Error: " + ex.Message;
}
}
updpanCompLinesMembers.Update();
}
The problem is that while debugging, it never runs the click event and it doesn't give any error messages either. I don't understand, I have a similar form where this works; I don't get why it doesn't here... Any help please?

Have you confirmed that SelectedCompetence is being called via an alert or similar? Additionally, have you made sure that the clickButton variable is being assigned to successfully?
I know this isn't an answer, but don't yet have the reputation to comment, and sometimes it's the easy stuff so maybe this will help! :)

Update panel from a server side thread

I am trying to develop a chat using aspx. I already got it working with asmx + winform but now I have problems with asmx + aspx.
Basically what I want to do is call the WebMethod CheckForMessages every two seconds and, if there are messages, add them to a list box inside an update panel and do UpdatePanel1.Update();.
The problem is that apparently I can' t do this using a thread like I do in my winform.
void check() {
while (true) {
Thread.Sleep(2000);
string message = CheckForMessages();
if (message != "") {
ListBox1.Items.Add(message);
UpdatePanel1.Update();
}
}
}
I start the thread like this:
protected void Page_Load(object sender, EventArgs e) {
timer = new Thread(new ThreadStart(check));
timer.Start();
}
It doesn't throw an exception or anything, the program runs as intended. The web service is called, a string is returned if there is a message, the thread adds the message to the list and calls UpdatePanel1.Update();. Yet the panel is not updated.
What could the problem be ?

In ASP.Net you can use timer control along with updatepanel.
<asp:UpdatePanel runat="server" ID="uxUpdatePanel" UpdateMode="Conditional" EnableViewState="true">
<ContentTemplate>
<div>
<asp:Label ID="Label1" runat="server" style="display:none;"><%=GetMessageLog()%></asp:Label>
<asp:ListBox runat="server" ID="ListBox1" EnableViewState="true">
</asp:ListBox>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="uxTimer" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer runat="server" ID="uxTimer" Interval="2000">
</asp:Timer>
And in Code-behind you to code like:
public string GetMessageLog()
{
string message = CheckForMessages();
if (message != "") {
ListBox1.Items.Add(message);
return DateTime.Now.ToLongTimeString();
}
This should work for you. But I will recommend you to use Javascript and JQuery to call Web-Service asynchronously with setTimeout function.

Instead of the server actively pushing changes to the client, try the opposite : make the client actively query the server, and update its state accordingly.
One way to do that is create a button to query the server manually. After you verify that it works, make the button hidden using css, and set a function to click the button in a regular interval. You can use javascript setInterval for this.
To click a button in javascript, you can do something like this :
setInterval(function(){ document.getElmtById(“<%= theButton.ClientID %>").click(); }, 2000);
The above code should click theButton every 2 seconds.

You should have a look at SignalR.net. Jabbr.net is based on signalR and exactly what you need. https://github.com/davidfowl/JabbR

yes Vishal... maybe less complex:
<asp:UpdatePanel ID="updatePanelPromptB" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="labelPlayback" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timerPromptB" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer runat="server" ID="timerPromptB" OnTick="timerPromptB_Tick" Enabled="false" Interval="4000" />
private void promptBottom(string text)
{
labelPlayback.Text = text;
updatePanelPromptB.Update();
timerPromptB.Enabled = true;
}
protected void timerPromptB_Tick(object sender, EventArgs e)
{
labelPlayback.Text = "OK";
timerPromptB.Enabled = false;
}

Unable to retrieve DDL SelectedValue bound in ASPX after Page Load

I have the following markup / code block in the ASPX file.
The binding of the ddl is triggered after Page_Load event which is in the code behind file.
This results me not able to get the selected value of the dropdownlist if I were to use such flow.
However for some purpose I require it to work this way.
Any idea how I could get the dropdownlist selected value when a post back is being triggered (click of the button)?
Page URL: page.aspx?para1=0&para2=value
ASPX PAGE
<%
if (Convert.ToInt32(Request.QueryString["para1"]) == 0)
{
ddl.DataValueField = "value";
ddl.DataTextField = "text";
ddl.DataSource = ds; //ds is valid, exact code not shown
ddl.DataBind();
} else {
//write in this area
Response.Write("Not 0");
}
%>
<form runat="server" id="user_form" class="form-horizontal">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="updPanel" runat="server">
<ContentTemplate>
<asp:DropDownList runat="server" ID="ddl">
</asp:DropDownList>
<%-- this button will call btnSave_Click to get the ddl's value--%>
<asp:Button runat="server" ID="btn" Text="Button" OnClick="btn_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
CODE BEHIND
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//do my stuff
}
}
protected void btn_Click(object sender, EventArgs e)
{
int intValue = Convert.ToInt32(ddl.SelectedValue);
//do my stuff
}
The ASPX Page code block will run after Page_Load / page's lifecycle, then will determine what to do base on the url parameters.
Thanks in advance!

You could always throw in a hidden object and use jquery to copy the value to the hidden value based on a certain action without a postback and would do it client side like it sounds like you want it to do

updatepanel and javascript include file

I have found many solution for my issue but none doesn't work in my scenario.
I have created a test project to demo my concept.
Basically, there is a page that host a user control...
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<uc1:WebUserControl1 ID="WebUserControl11" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
WebUserControl1 has a dropdownlist and two other webusercontrols (to be displayed based on the selection of dropdownlist element) inside updatepanel as below.
<%# Register Src="WebUserControl2.ascx" TagName="WebUserControl2" TagPrefix="uc2" %>
<%# Register Src="WebUserControl3.ascx" TagName="WebUserControl3" TagPrefix="uc3" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
AutoPostBack="True">
</asp:DropDownList>
<asp:Panel ID="pnlCreditCard" Visible="false" runat="server">
<uc2:WebUserControl2 ID="WebUserControl21" runat="server" />
</asp:Panel>
<asp:Panel ID="pnlGiftCard" Visible="false" runat="server">
<uc3:WebUserControl3 ID="WebUserControl31" runat="server" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Code behind file for WebUserControl1 is .....
public enum PaymentMethod
{
CreditCard = 0,
GiftCard
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
BindPaymentMethods(Enum.GetValues(typeof(PaymentMethod)));
}
private void BindPaymentMethods(Array paymentMethods)
{
DropDownList1.DataSource = paymentMethods;
DropDownList1.DataBind();
if (paymentMethods.Length > 0)
{
DropDownList1.SelectedIndex = 0;
UpdateCreditOrGiftCardPanelVisibility();
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
UpdateCreditOrGiftCardPanelVisibility();
}
private void UpdateCreditOrGiftCardPanelVisibility()
{
if(DropDownList1.SelectedValue == Enum.GetName(typeof(PaymentMethod),PaymentMethod.CreditCard))
{
pnlGiftCard.Visible = false;
pnlCreditCard.Visible = true;
}
else if (DropDownList1.SelectedValue == Enum.GetName(typeof(PaymentMethod), PaymentMethod.GiftCard))
{
pnlCreditCard.Visible = false;
pnlGiftCard.Visible = true;
}
}
Now, the problem starts here...There is an external javascript file [JScript1.js] (embedded resource) which basically is used to display an alert box.
<script language="javascript" type="text/javascript">
window.onload = function() {
alert('creditcard form');
}
WebUserControl2.ascx.cs code behind is
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptInclude(this.Page, this.Page.GetType().BaseType, "JScript1", Page.ClientScript.GetWebResourceUrl(this.Page.GetType().BaseType, "WebApplication1.JScript1.js"));
}
Alert window doesn't get displayed when I change the dropdownlist value. Even the script is getting registered three times (look in the firebug)
Need to use ScriptInclude instead of ScriptBlock as the original JS file is too big.
Can email the test app....
Thanks in Advance

After working around a bit, I found the solution.
I registered a ScriptManagerProxy in WebUserControl2.ascx
<asp:ScriptManagerProxy ID="ScriptManager1" runat="server" >
<Scripts>
<asp:ScriptReference Assembly="WebApplication1" Name="WebApplication1.JScript1.js" />
</Scripts>
</asp:ScriptManagerProxy>
Then on the code behind of the same control, added...
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
ScriptManager.RegisterStartupScript(this, GetType(), "test", "doSomething();", true);
}
and the JScript1.js file looks like below.
function doSomething() {
alert('via dosomething control2 form');
}
Hope that helps. Though I had to litter around more in my practical scenario but this was certainly the way I got it working.
Thanks,