Search code examples
javascriptasp.netdom-eventsclient-sidewizard

ASP.Net Wizard control - client side logic before navigating away from a step


I am retrofitting credit card tokenization to a legacy application. There is a 5-step registration wizard that takes credit card data on step 4. I need to call the payment gateway's client-side API and want to tokenize the card data before any post-backs occur, i.e. before the next/previous buttons post back. So I added my own click handler to both buttons (showing only the code for the Previous button):

$('#<% = wiz.FindControl("StepNavigationTemplateContainerID").
            FindControl("btnPrevious").ClientID%>')
                 .on('click.PayPageClick', clickEventPayPage);

My clickEventPayPage() event handler gets called correctly and does its thing, i.e. the tokenization request returns successfully and the card number in the form is replaced with the token.

var clickEventPayPage = function () {
    if ([tokenization has not occurred yet]) {
        clickSource = this;

        requestToken([...], submitWhenDone);
        return true;
    }
    else
        return true;
    }
}

I tried different combinations of returning true and false from my event handler in the hope that the ASP.NET event handler gets called after mine, but that does not appear to happen.

The API then calls my submitWhenDone function

function submitWhenDone(response) {
    // do various cleanup and then post back to server
    __doPostBack(clickSource.id,'postPayPage');
}

The problem is that __doPostBack() does a post-back, but it does not advance the wizard to the next or previous step. What is the correct way of doing this? I just want to avoid rewriting the wizard if I can.


Solution

  • Ok, this helped.

    function submitWhenDone(response) {
        // do various cleanup and then post back to server
        clickSource.click();
    }
    

    and my event handler has to return false to prevent double-posting.