Running a C# and a Javascript function on an asp button control?

Question

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.com/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.com/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>

Jaime Torres · Accepted Answer · 2012-07-11 15:30:37Z

7

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);
}

edited Jul 11, 2012 at 15:30

answered Jul 11, 2012 at 15:22

Jaime Torres

10.5k1 gold badge50 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

bugnuker Over a year ago

I was just going to say the same thing!

user1266515 Over a year ago

@J Torres Thanks! But I catn seem to get the javascript to run. I got rid of the OnClientClick event and moved my jScript function outside the updatepanel. Am I missing anything?

Jaime Torres Over a year ago

When you click the button, I'm assuming the label updates. If you use Firebug or some other similar utility, does the updated javascript show up on the page? Any script errors?

user1266515 Over a year ago

Sorry for the delay, but it look slike I might already have a div with the same id unless I understood this error wrong: HTML1114: Codepage unicode from (UNICODE byte order mark) overrides conflicting codepage windows-1252 from (11) Home.aspx

user1266515 Over a year ago

Well treid it with a different div id and still the same warning

|

sunil gautam · Accepted Answer · 2012-07-11 15:30:46Z

1

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);
}

answered Jul 11, 2012 at 15:30

sunil gautam

4513 silver badges6 bronze badges

Comments

Guffa · Accepted Answer · 2012-07-11 15:25:52Z

0

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.

answered Jul 11, 2012 at 15:25

Guffa

703k111 gold badges760 silver badges1k bronze badges

1 Comment

Jaime Torres Over a year ago

That actually won't work in this his exact instance because he is within an Update Panel. You must use ScriptManager to inject additional scripts during partial postbacks.

Collectives™ on Stack Overflow

Running a C# and a Javascript function on an asp button control?

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related