Using jQuery and ScriptManager to update dynamic page elements

I recently came across a situation where an element on the page was not updating dynamically after post backs.

It was quick and easy to add an update panel and the necessary logic to use the built in asp .Net ajax callbacks.

I simply added an update panel around the code that needed to be updated, and an invisible button within the update panel to trigger the postback. I then called this button using javascript click() event of the button.

However, this caused some conflicts with some other pre-existing ajax code and modal dialogs, so I turned to another solution.

Rather than re-work these controls and methods which were already functioning correctly and extensively implemented, I added a small snippet of code on page load for the content pages which I wanted to trigger a force reload. This did the trick.

VB:


ScriptManager.RegisterStartupScript(Me, Me.GetType(), "loadminicart", "$('#minicart').load('" & _
strRootSiteURL & "minicartdata.aspx');", False)

C#:


ScriptManager.RegisterStartupScript(this, this.GetType(), "loadminicart", "$('#minicart').load('" + strRootSiteURL + "minicartdata.aspx');", false);

“minicartdata.aspx” is a dynamic page with no masterpage, header, footer or body HTML tags specified – only div’s and content elements.

“minicart” is the id of the div which minicartdata.aspx will be loaded into.

In my specific instance, there were only two pages which I needed to force the minicart content to reload. As a requirement, I needed the reload to occur after an operation on these pages, so since there were only two pages, it was easy to specify this code in both.

In some cases, you may want to be able to easily trigger a refresh from code behind without having to place the above code in every page. For this I recommend simply creating a global function and placing the snippet above, then calling the global function from anywhere needed.

Another, more object oriented approach is to create your own type which inherits page, and use this as the base type for all your content pages. You could then place a function in your new type which contains the snippet above. This effectively has the same end result as using a global function.

Hope this information can be as useful to someone else as I found it to be. 😉

About Ronnie Diaz

Ronnie Diaz is a software engineer and tech consultant. Ronnie started his career in front-end and back-end development for companies in ecommerce, service industries and remote education. This work transitioned from traditional desktop client-server applications through early cloud development. Software included human resource management and service technician workflows, online retail e-commerce and electronic ordering and fulfillment, IVR customer relational systems, and video streaming remote learning SCORM web applications. Hands on server experience and software performance optimization led to creation of a startup business focused on collocated data center services and continued experience with video streaming hardware and software. This led to a career in Amazon Prime Video where Ronnie is currently employed, building software and systems which stream live sports and events for millions of viewers around the world.

Posted on August 30, 2010, in Programming & Development and tagged , , , , , , , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: