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

Answer 1

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