Code behind button only posting back, not calling javascript function

Question

I am building a page from the code behind. I add a button and set its attributes like this:

var Button1 = new Button();
Button1.Text = "Purge Course Comments";
Button1.Attributes.Add("OnClientClick", "javascript: Purge();");
pageButtons.Controls.Add(Button1);

The button is being added to a div called "pageButtons". When I test the program, the button appears on the screen normally, but when I click it, nothing happens other than the browser posting back.

This page must be built from the code behind, so I can't add the button directly to the page, like this (which would work):

<asp:Button ID="Button1" runat="server" Text="Close Window" OnClientClick="Purge;"/>

Basically, I need to be able to call the function from the code behind, but I'm not having much luck. Can someone tell me what I'm doing wrong?

EDIT: I've looked at the similar questions on Stackoverflow, but I can't find a single one that has an answer that works for me in this situation.

EDIT: For clarity, here's the purge function that I've defined on the page:

function PurgeCourse() {
        strCourseId = getQueryString("Id");
        if (strCourseId == "") {
            strCourseId = getQueryString("CourseId");
        }
        window.open("Purge.aspx?id=" + strCourseId);
        parent.window.close();
    }

If I just add the button manually to the page, as in the example above, it works. However, I can't seem to call it from the code behind.

EDIT: I tried a suggestion from below and now my code looks like this:

var Button1 = new Button();
Button1.Text = "Purge Course Comments";
Button1.OnClientClick = "javascript: Purge();";
pageButtons.Controls.Add(Button1);

Unfortunately, this didn't work either. I will reiterate, though, that the function does work if I manually add the button to the page and set the OnClientClick attribute to call Purge(). It just seems that I can't get to the function from the code behind, which is frustrating because I can't see why. This is a small test page with only a function and a div and the code behind. I can't see where the problem is.

EDIT: I just tried another thing, just to see if it would work. I did the following:

Button1.OnClientClick = "javascript: parent.window.close();";

And this worked, so the button can at least use inline javascript code. It's just not "seeing" my function that's on the page from the code behind.

As you're dynamically building the page, I assume you've defined the client-side Purge function somewhere else and have included it in the page? Also, I'm fairly sure you should add it like Button1.Attributes.Add("onclick", "javascript:Purge();"); — pete
– pete, Commented Sep 4, 2013 at 15:25
why is there "javascript: " in the code behind? You are not using it in the version that you claim works. I would leave it out. — fdreger
– fdreger, Commented Sep 4, 2013 at 15:26
Yes, I have the Purge() function defined in the code behind. I'll post it above for clarity. — Kevin
– Kevin, Commented Sep 4, 2013 at 15:27
Don't add OnClientClick as an attribute to the output. It is a property of the Button class, so simply do Button1.OnClientClick = "javascript: Purge();"; — metadings
– metadings, Commented Sep 4, 2013 at 15:27
Also, I forgot and left the javaScript: in the code. It was one of the methods I have tried that I found via Stackoverflow. — Kevin
– Kevin, Commented Sep 4, 2013 at 15:27

metadings · Accepted Answer · 2013-09-04 15:47:05Z

1

Don't add OnClientClick as an attribute to the output. This is a property of the Button class, on the server side, so simply do

Button1.OnClientClick = "javascript: PurgeCourse();";

<asp:Button runat="server" onclientclick="javascript: PurgeCourse();" />

On the client side, this is rendered into the onclick attribute.

<button onclick="javascript: PurgeCourse();" />

Usually to stop processing of events, this is also known as event.preventDefault() (Microsoft didn't like/get this until recently), or return false. So your function either always returns false,

Button1.OnClientClick = "javascript: PurgeCourse(); return false;";

Or you return the value of your function, so that can decide if the submission is terminated or continued:

Button1.OnClientClick = "javascript: return PurgeCourse();";

<script type="text/javascript">
function PurgeCourse () {
   return false; // or return true;
}
</script>

edited Sep 4, 2013 at 15:47

answered Sep 4, 2013 at 15:35

metadings

3,8482 gold badges30 silver badges37 bronze badges

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

6 Comments

Kevin Over a year ago

Unfortunately, I'm getting the same result: on button click, the page just posts back. I do appreciate the help though! It just seems that, somehow, my code behind can't "see" this function.

metadings Over a year ago

well you defined a function PurgeCourse() so you have to call it exactly by name. most likely you got an "Error: Purge is undefined" in your javascript console!

Kevin Over a year ago

Also, since the page is being built directly from the code behind, I cannot add and <ASP:Button> to the page directly. For all intents, the page only has a div tag for me to add the button to.

Kevin Over a year ago

You're right! OMG, I was calling the function with the wrong name! I never even spotted that. Thank you so much! Apparently, that was the problem all along. The codebehind was calling Purge() when it should've been calling PurgeCourse()! Thanks, Metadings!

metadings Over a year ago

Always have one eye into your console when writing javaScript, it saves you a lot of time!

|

Collectives™ on Stack Overflow

Code behind button only posting back, not calling javascript function

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related