I can get both the Javascript and the C# function to work just fine.
However, my Javascript function runs before the C#.
How do I get it to run after the C# function??
Here is my code:
<script src=".8/jquery-ui.min.js"></script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<div id="div2" style="height:70px; width:auto; text-align:center;">
<p><b>This is A View!!!</b></p>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div id="div1">
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"
OnClientClick="javascript:Highlit()" />
</div>
</asp:View>
</asp:MultiView>
<script type="text/javascript">
function Highlit()
{
$("#div2").effect("highlight", {}, 10000);
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
Code behind:
namespace jQuery_Highlight.jQuery_Highlight
{
public partial class jQuery_HighlightUserControl : UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Changed";
}
}
}
Here is the code reflecting changes from the answers:
Code behind
namespace jQuery_Highlight.jQuery_Highlight
{
public partial class jQuery_HighlightUserControl : UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Changed";
ScriptManager.RegisterStartupScript(this, this.GetType(), "TEST", "Highlit();", true);
}
}
}
<script src=".8/jquery-ui.min.js"></script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<div id="div2" style="height:70px; width:auto; text-align:center;">
<p><b>This is A View!!!</b></p>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div id="div1">
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</asp:View>
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
function Highlit() {
$("#div2").effect("highlight", { color: "#9499FC" }, 10000);
}
</script>
I can get both the Javascript and the C# function to work just fine.
However, my Javascript function runs before the C#.
How do I get it to run after the C# function??
Here is my code:
<script src="http://ajax.googleapis./ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<div id="div2" style="height:70px; width:auto; text-align:center;">
<p><b>This is A View!!!</b></p>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div id="div1">
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"
OnClientClick="javascript:Highlit()" />
</div>
</asp:View>
</asp:MultiView>
<script type="text/javascript">
function Highlit()
{
$("#div2").effect("highlight", {}, 10000);
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
Code behind:
namespace jQuery_Highlight.jQuery_Highlight
{
public partial class jQuery_HighlightUserControl : UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Changed";
}
}
}
Here is the code reflecting changes from the answers:
Code behind
namespace jQuery_Highlight.jQuery_Highlight
{
public partial class jQuery_HighlightUserControl : UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Changed";
ScriptManager.RegisterStartupScript(this, this.GetType(), "TEST", "Highlit();", true);
}
}
}
<script src="http://ajax.googleapis./ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<div id="div2" style="height:70px; width:auto; text-align:center;">
<p><b>This is A View!!!</b></p>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div id="div1">
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</asp:View>
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
function Highlit() {
$("#div2").effect("highlight", { color: "#9499FC" }, 10000);
}
</script>
The only way to get the javascript to run after is to add a script reference in your Button1_Click event.
Example Code for standard postback:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Changed";
Page.ClientScript.RegisterStartupScript(this.GetType(), "PostButton1_ClickScript", "Highlit();", true);
}
As noted by others, be sure to remove your OnClientClick event. Also, consider moving your "Highlit" script outside of the update panel.
Additionally, since you are in an update panel, you will need to use the following example code for a Partial Postback:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Changed";
ScriptManager.RegisterStartupScript(this, this.GetType(), "PostButton1_ClickScript", "Highlit();", true);
}
You have to register a ClientScript at the end of Button1_Click event
and remove OnClientClick="javascript:Highlit()"
protected void Button1_Click(object sender, EventArgs e)
{
//Do stuff
ScriptManager.RegisterStartupScript(this, this.GetType(), "ANYNAME", "javascript:Highlit();", true);
}
Remove the OnClientClick
attribute, and add the call as a startup script, so that it runs after the page has loaded:
protected void Button1_Click(object sender, EventArgs e) {
Label1.Text = "Changed";
Page.ClientScript.RegisterStartupScript(this.GetType(), "start", "Highlit();", true);
}
Side note: When you use the OnClientClick
attribute, the code should not start with javascript:
. That's only used when you put script in a href
attribute in a link.