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. 😉

Advertisements

About Ronnie Diaz

Ronnie Diaz is an enterprise software engineer responsible for front-end and back-end development for companies in many industries. Heavily involved in cloud development, online retail, e-commerce and electronic ordering, fulfillment and customer relational systems.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: