How do I make OnClick execute after OnClientClick in ASP.NET?

2
votes

I am working on an ASP.NET web forms application in C#. I have a button that needs to run some client-side Javascript (using the OnClientClick attribute), then run server-side code (using OnClick) if the client-side code returns true. I've done this plenty of times before with jQuery-ui confirmation dialogs, however this time my client-side code isn't a confirmation dialog and it isn't working -- the server-side (OnClick) event never gets triggered even though I'm explicitly returning true.

Here's the client-side code in question, which is working (I've verified that it's returning the correct value with an alert() call):

<script type="text/javascript">
    //Function to hide edit fields
    function hideEditFields(retVal) {
        //Hide all edit divs
        var editName = document.getElementsByClassName("editField");
        for (i = 0; i < editName.length; i++) {
            editName[i].style.display = 'none';
        }
        //Show all view divs
        var viewName = document.getElementsByClassName("viewField");
        for (i = 0; i < viewName.length; i++) {
            viewName[i].style.display = 'block';
        }

        //Make investigated & corrective action checkboxes non-highlighted
        $('<%=cbInvestigatedY.ClientID%>').removeClass("editable");
        $('<%=cbInvestigatedN.ClientID%>').removeClass("editable");
        $('<%=cbCorrectiveY.ClientID%>').removeClass("editable");
        $('<%=cbCorrectiveN.ClientID%>').removeClass("editable");

        //Show edit button
        var editButton = document.getElementById("editButton");
        editButton.style.display = 'block';
        //Hide save button
        var saveButton = document.getElementById("saveButton");
        saveButton.style.display = 'none';

        //alert("returning " + retVal);
        return retVal;
    }
</script>

And here's the button that calls this function:

<asp:Button ID="btnSaveChanges" runat="server" OnClientClick="return 
    hideEditFields(true);" OnClick="btnSubmit_Click" Text="Save Changes" />

I've tried this with UseSubmitBehavior="true" and without, which seems to make no difference. I'm getting no errors in the Javascript console, and the Javascript code is doing what it's supposed to do, it's just not calling the server-side method.

Here's how the submit button gets rendered (in view source) by ASP.NET:

<input type="submit" name="ctl00$MainContent$btnSaveChanges" value="Save Changes"
    onclick="return hideEditFields(true);WebForm_DoPostBackWithOptions(new
    WebForm_PostBackOptions(&quot;ctl00$MainContent$btnSaveChanges&quot;, &quot;&quot;,
    true, &quot;&quot;, &quot;&quot;, false, false))"
    id="ctl00_MainContent_btnSaveChanges" />
3
c#javascriptasp.net
Is the form being submitted and the server is hit at all? – Ian
No, it's only executing the client-side code. – timbck2
Are you able to view the actual source of the page and see exactly how the asp:Button is being rendered? Also, if you remove the onClientClick attribute, does the server get called correctly? – Ian
OK, I'm mistaken - my server call is getting called, it just isn't doing anything. I'll have to dig into it and probably post a new question when I figure out what's really going on. Thanks for your troubleshooting help. – timbck2
Hmm well from the source you posted, using return like you are, the rest of the onclick won't execute, whether it's true or false. That's why - those .NET function calls don't set up the submit to behave correctly so the server can know the trigger – Ian

3 Answers

4
votes

Pleasea try to remove the return from calling in the client click. I think you should call the function onclientclick like this:

<asp:Button ID="btnSaveChanges" runat="server" OnClientClick="hideEditFields('true');"  Text="Save Changes" onclick="btnSubmit_Click" />
1
votes

The real problem was that my server-side method was being executed, but was doing nothing, because it compares the original values in the form (stored as hidden fields) with the new values entered in the form's text boxes and other controls and stores them if they have changed. But I was making the noob mistake of not enclosing the code that populated the form in a check for IsPostBack (and I know better!), so the comparison was always coming out equal, so nothing was changing. See Why is ASP.NET submitting the original value of a TextBox control when the contents have been changed? for more details.

0
votes

On a client click, set the return value to true:

btnTest.OnClientClick = 
    "window.open('" + URL + "'); 
    return true;";