Issue details:
After saving the data in DB, I need to show an alert to the user.
For this, I have registered the script from code-behind.
But it is NOT working with update-panel whereas it works as expected without update-panel.
I need to make it work with update-panel.
I tried by adding $(document).ready(function () while registering the script, but it didn't work.
Then, I tried with ScriptManager.RegisterClientScriptBlock() method instead of Page.ClientScript.RegisterStartupScript(), but it also didn't work.
Here is the code snippet of web page (ASPX):
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Button ID="btnOutsideUpdatePanel" runat="server" Text="Outside UpdatePanel" OnClick="btnOutsideUpdatePanel_Click" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnInsideUpdatePanel" runat="server" Text="Inside UpdatePanel" OnClick="btnInsideUpdatePanel_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<uc1:Child runat="server" id="Child1" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<uc1:Child runat="server" id="Child2" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
Here is the code snippet of user-control (ASCX):
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Child.ascx.cs" Inherits="UpdatePanelAndScript.Child" %>
<asp:Button ID="btnUserControl" runat="server" Text="User Control" OnClick="btnUserControl_Click" />
Code-behind of web-page:
protected void btnOutsideUpdatePanel_Click(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowSuccess", "alert('Hi');", true);
}
protected void btnInsideUpdatePanel_Click(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowSuccess", "alert('Hi');", true);
}
Code-behind of user-control:
protected void btnUserControl_Click(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowSuccess", "alert('Hi');", true);
}
You only need to change the following statement:
Page.ClientScript.RegisterStartupScript
(
this.GetType(),
"ShowSuccess",
"alert('Hi');",
true
);
To:
ScriptManager.RegisterStartupScript
(
this,
this.GetType(),
"ShowSuccess",
"alert('Hi');",
true
);
Reference:
MSDN ScriptManager Class
Registering Partial-Page Update Compatible Scripts
[...] If you are rendering script for use inside an UpdatePanel control, make sure that you call the methods of the ScriptManager control.
Related
I have set the following in my ascx file :
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Button ID="from_dispo_to_affich" runat="server" OnClick="from_dispo_to_affich_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
My problem is that the OnClick event doesn't trigger.
You want to make a javascript function call right?
Change OnClick to OnClientClick. And put () after your function.
OnClientClick="from_dispo_to_affich_Click()"
Otherwise put this event in your codebehind
protected void from_dispo_to_affich_Click(object sender, EventArgs e)
{
// do something
}
I have a server-side variable which is assigned a value in PreRender. For the sake of simplicity, let's imagine I'm doing this:
protected string test;
protected void Page_PreRender(object sender, EventArgs e)
{
test = Guid.NewGuid().ToString();
}
In my markup, the variable is then referred to within an UpdatePanel, like so:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Perform postback" />
<script type="text/javascript">
Sys.Application.add_load(function () {
alert('<%=test%>');
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
On first load of the page, the JavaScript alert function gives me a random value, as expected. However, on any subsequent postback, the original value of the Guid is retained.
Can anybody explain why this is so, and offer a solution? I'm fairly sure I can achieve the required behaviour by putting the value of 'test' in a hidden field, for example, but ideally I wouldn't have to sink to those depths. Unfortunately replacing the UpdatePanel with something lighter isn't really an option.
I've found a solution to this, and nor is it quite as dirty as I'd feared. I declare a JS variable outside of the function:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Perform postback" />
<script type="text/javascript">
var test;
Sys.Application.add_load(function () {
alert(test);
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
In my code-behind, I assign the JS variable a value in the Sys.Application.add_init method, like so:
protected void Page_PreRender(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, typeof(UpdatePanelTest), "startupScripts", "Sys.Application.add_init(function() {test='" + Guid.NewGuid().ToString() + "';});", true);
}
Voilà, a different Guid is then displayed on first load and every postback.
I am experiencing off behaviour when trying to update an UpdatePanel via JavaScript when multiple UpdatePanels are on the page.
Will try to keep it short:
I'm already setting the UpdateMode to Conditional
I am passing in the correct ClientID of the UpdatePanel into the __EventTarget
In the code-behind, I am successfully able to find the target control
But for some reason, the OnLoad of every UpdatePanel on the page is fired.
Below is a snippet of code - any idea why this is happening?
Ascx:
<div class="updatePanelWrapper">
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" RenderMode="Inline" OnLoad="UpdatePanel1Load"
runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="updatePanelWrapper">
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" RenderMode="Inline" OnLoad="UpdatePanel2Load"
runat="server">
<ContentTemplate>
<div>
<asp:Panel ID="Panel2" runat="server">
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
CodeBehind:
protected void UpdatePanel1Load(object sender, EventArgs e)
{
UpdatePanelLoad(sender, e);
}
protected void UpdatePanel2Load(object sender, EventArgs e)
{
UpdatePanelLoad(sender, e);
}
protected void UpdatePanelLoad(object sender, EventArgs e)
{
// if only a async postback then load the control
if (ScriptManager.GetCurrent(Page).IsInAsyncPostBack)
{
// Some Logic ...
}
}
JavaScript (where I'm triggering the ASYNC PostBack):
var updatePanelWrappers = $(".updatePanelWrapper");
var availableWrapper = updatePanelWrappers[0];
var updatePanelElement = $(availableWrapper).children()[0];
var updatePanelId = $(updatePanelElement).attr("id");
window.__doPostBack(updatePanelId, "Some Arguments...");
With an UpdatePanel callback the page still goes through most of its lifecycle; which includes all of the Load events.
I am going to show some text in a TextBox, which is located outside of an updatepanel, after checking a CheckBox but I cannot make it work. please help me out ?
Here is my code:
<asp:UpdatePanel runat="server" ID="uplMaster">
<ContentTemplate>
<asp:CheckBox ID="cbShowText" runat="server" Text="Show Some Text" AutoPostBack="true"
OnCheckedChanged="cbShowText_CheckedChanged" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:TextBox ID="txtBox" Text="Empty" runat="server" />
Code Behind:
protected void cbShowText_CheckedChanged(object sender, EventArgs e)
{
txtBox.Text = "Some Text";
}
Thanks in advance :D
P.S. As you might have guessed, I have resembled my problem and that is why I don't want to put the TextBox in the UpdatePanel
I put the TextBox in another UpdatePanel and then called the Update method:
Here is my new code:
<asp:UpdatePanel runat="server" ID="uplMaster" UpdateMode="Always">
<ContentTemplate>
<asp:CheckBox ID="cbShowText" runat="server" Text="Show Some Text" AutoPostBack="true"
OnCheckedChanged="cbShowText_CheckedChanged" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" ID="uplDetail" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txtBox" Text="Empty" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Code Behind:
protected void cbShowText_CheckedChanged(object sender, EventArgs e)
{
txtBox.Text = "Some Text";
uplDetail.Update();
}
Hope this helps
The textbox has to be in update panel also.
*Edit:
I am sorry I didn't read your question properly. Perhaps write a javascript function, and call the function from codebehind?
I know its been a while since this was asked, but here is what I did. Like #bla said write a javascript function and call it from code behind.
So in your checked changed call this. The changeText is a javascript function on your page in the header or in a script file.
protected void cbShowText_CheckedChanged(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "Show Different Text", "changeText();", true);
}
Sample Javascript. Just gets called when checked changed event fires from code behind.
<script type="text/javascript">
function changeText() {
var txt= document.getElementById('<%= txtBox.ClientID %>');
var chk = document.getElementById('<%= cbShowText.ClientID %>');
if (chk.checked === true) {
txt.Text = "Something";
} else {
txt.Text = "Somethingelse";
}
}
</script>
Hope this helps someone.
I wolud like to hide/unhide a TableRow through ASP.NET AJAX when a checkbox is clicked.
I have this code for the checkbox:
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:CheckBox runat="server" ID="cbViewPages" Checked="true" OnCheckedChanged="OnViewPages" AutoPostBack="true"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cbViewPages" EventName="CheckedChanged"/>
</Triggers>
</asp:UpdatePanel>
and this for the TableRow
<asp:TableRow runat="server" ID="PagesRow">
<asp:TableCell VerticalAlign="Middle">Test Row</asp:TableCell>
</asp:TableRow>
This method is called when the checkbox is clicked:
protected void OnViewPages(object sender, EventArgs e)
{
if(cbViewPages.Checked)
{
PagesRow.Visible = true;
}
else
{
PagesRow.Visible = false;
}
}
OnViewPages is definitely called, I can see that through the debugger.
And if I remove the AJAX code, OnViewPages is hidden/unhidden as required.
Why doesn't this hide/unhide functionality work with the AJAX code?
Doh!
I have a partial answer, the TableRow is not in the Update panel.
But you cant put an UpdatePanel around a TableRow.
So that's my new question, how do you put an UpdatePanel around a TableRow?
A couple of options. You could put the update panel around the entire table (this is what Petras is suggesting). You could also use JavaScript to do this. In the event that fires when your checkbox is checked/unchecked, just call
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "setRowVisibility", "setRowVisibility(" & IIf(cbViewPages.Checked, "true", "false") & ");", True)
This will call a JavaScript function you can define on your page like this:
function setRowVisiblity(visible) {
var row = document.getElementById('<%=PagesRow.ClientID %>');
if (visible) {
row.style.display = 'table-row';
} else {
row.style.display = 'none';
}
}
This is MUCH more efficient than using and Update Panel, but it's a little more work. I prefer efficiency, but that's just me. :)
Here's the solution:
ASPX page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptMgr" runat="server" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:CheckBox runat="server" ID="cbViewPages" Checked="true" OnCheckedChanged="OnViewPages" AutoPostBack="true"/>
<asp:Table runat="server">
<asp:TableRow>
<asp:TableCell>123</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server" ID="PagesRow">
<asp:TableCell>Row To Hide</asp:TableCell>
</asp:TableRow>
</asp:Table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cbViewPages" EventName="CheckedChanged"/>
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
Code behind page:
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Net;
using System.IO;
public partial class index : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void OnViewPages(object sender, EventArgs e)
{
if(cbViewPages.Checked)
{
PagesRow.Visible = true;
}
else
{
PagesRow.Visible = false;
}
}
}