How to wait until an ASP.NET Multiview changes its ActiveViewIndex via PostBack

Question

I am working in ASP.NET 3.5 with VB.NET as my server-side language. I am using JavaScript via jQuery 1.5.2 as my client-side language. I am trying to do a prototype / namespace setup with this page. This page is a custom logon page using MultiView. I have a Policy Logon view and a Forgot Password view. I am storing the ActiveViewIndex in a hidden field called currentView.

I'm using Partial Postbacks with the UpdatePanel in this project, and the JS doesn't get refreshed on the Partial PostBacks.

That said, I need a way to wait for the ActiveViewIndex to get changed server-side, so that I can call the init() function to the respective view. Is this possible?

My client side code:

Global JS

var page = 
{                   
    currentView : getContentElement( "currentView" ),
    
    init : function () 
    { 
        log( "initializing page" );
                            
        if ( this.currentView === "forgotpassword" ) { forgotPassword.init(); }
        else { policyLogon.init(); }    
    }
}; 

page.init();

Policy Logon View JS

var policyLogon = 
{                       
    panel              : getContentElement( "pnlLogonInfo", "div" ),
    submitButton       : getContentElement( "btnLogon", this.panel ),
    textInputs         : $( "input[ type=text ]", this.panel ),
    policyNumber       : getContentElement( "txtPolicyNumber", this.textInputs ),
    policyNumberError  : getContentElement( "lblPolicyNumberError", this.panel ),
    password           : getContentElement( "txtPassword", this.textInputs ),
    passwordError      : getContentElement( "lblPasswordError", this.panel ),
    forgotPasswordLink : getContentElement( "lbtnForgotPassword", this.panel ),
                    
    init : function () 
    { 
        log( "initializing policy logon" );
                        
        var that = this;

        // Other event handlers created here [redacted to keep example code short].

        that.forgotPasswordLink.on("click", function () 
        {
            // Code to wait for PostBack should go here.

            page.init();
        });

        that.policyNumber.focus();              
    }
};

Forgot Password View JS

var forgotPassword = 
{
                            
    // Local vars, set up the same way as Policy Logon, just different elements.
    // [redacted to keep example code short]
                        
    init : function () 
    { 
        log( "initializing forgot password" );
                            
        var that = this;
    
        // Other event handlers created here [redacted to keep example code short].
    
        that.policyNumber.focus();                      
    }    
};

As a preemptive strike against the what is getContentElement() questions, getContentElement() is a function I had to create due to nested master pages where elements will have to be called differently based on what master page they are using. It looks like this:

function getContentElement ( id, context ) 
{ 
    var publicPrefix = csMasterPrefix + csContentPrefix,
        securePrefix = cpMasterPrefix + publicPrefix + cpContentPrefix,
        publicId = "#" + publicPrefix + id,
        secureId = "#" + securePrefix + id;
    
    return ( context )
        ? ( isSecurePage ) ? $( secureId, context ) : $( publicId, context )
        : ( isSecurePage ) ? $( secureId ) : $( publicId );
}

score 0 · Answer 1 · answered Apr 25 '11 at 21:28

0

Rather than calling the page.init() straightaway , you should bind it to the onLoad even of the body.

$(document).ready() { page.init() }

At this time, the DOM has been returned from the server and the ActiveIndexItem has also been set.

answered Apr 25 '11 at 21:28

neebz

11,465
7
47
64

All of my JS files are referenced in right before the closing body tag and therefore they don't need to be wrapped in $(document).ready. However, something else I should mention is that we are using UpdatePanels with Partial PostBacks, so JS never gets refreshed, hence why I need to know when the PostBack returns so that I can fire the correct `init()` myself. – Code Maverick Apr 25 '11 at 21:35
So basically what you need is to fire some Javascript once the Ajax request (through UpdatePanel) is returned. Take a look at `ScriptManager.RegisterStartupScript` method. It allows you to register a Javascript function to be called once the request is completed. Take a look at this question too > http://stackoverflow.com/questions/5412120/call-a-javascript-function-after-updatepanel-postback-issue – neebz Apr 25 '11 at 21:41
Yes, I know I can do that. I don't want to do that. I want to achieve this in jQuery, if possible. – Code Maverick Apr 25 '11 at 21:46
I am not too sure that's possible because the requests are being done by UpdatePanel behind the hood. If you make your Ajax requests through jQuery then you have a onSuccess callback function to run your code in but as UpdatePanel is initiating the request under the hood, I don't see any other way to hack into it and run your own code when it completes the return. – neebz Apr 25 '11 at 21:50

Code Maverick · Accepted Answer · 2014-12-22T17:49:03.707

Ok ... so I answered my question, but not with anything special. I figured I could just use setInterval and continually check the page.currentView property. And instead of storing it continually, it will always be undefined except for when page.waitForViewChange sets it initially.

Changed my Global JS to:

var page = 
{                               
    currentView : undefined,
    intervalId  : undefined,

    init : function () 
    { 
        log( "init() fired" );

        this.currentView = getContentElement( "currentView" ).val();
        log( "current view is [" + this.currentView + "]" );

        if ( this.currentView === "forgotpassword" ) { forgotPassword.init(); }
        else { policyLogon.init(); }

        clearInterval( this.intervalId );
        this.intervalId = undefined;
        this.currentView = undefined;
    },

    waitForViewChange : function ( viewToWaitFor ) 
    { 
        log ( "waitForViewChange() fired" );

        this.currentView = getContentElement( "currentView" ).val();
        if ( this.currentView === viewToWaitFor ) { this.init(); }          
    }
};

Then in my Policy Logon View JS I changed the forgotPasswordLink.click event to:

this.forgotPasswordLink.on
(
    "click", 

    function () 
    {     
        page.intervalId = setInterval
        ( 
            'page.waitForViewChange( "forgotpassword" )',
            300 
        ); 
    }
);

How to wait until an ASP.NET Multiview changes its ActiveViewIndex via PostBack

Global JS

Policy Logon View JS

Forgot Password View JS

2 Answers2