The focus of this article is to showcase how we can create a widget / web part plugin in jQuery and render content of other pages inside it.
A widget or web part is essentially the same thing - a rectangular section on the screen which has a title and some content. The idea is that the content could come from a source different than the rest of the page and ideally, the widget will take a fraction of the space on the screen, because it will be part of a set of widgets which together make up a dashboard.
In this article, we will not be showing any database interactivity as the focus is just to show how to create a widget dynamically at run time.
See dashboard screenshot for sample implementation
The text highlighted in bold are the parameters (controlID, Height, Title bar height, title and url) which are dynamically set. Of course, there is an opportunity to make the look and feel also flexible, but it was not critical to the focus of this article.
jQuery.fn.AddWidget = function(controlID, title, url, height)
var me = jQuery(this);
This is the basic template to create a plug-in. AddWidget is the name of our plug-in. return this.each ensures that if the jQuery object is a collection, then the same activity is repeated across each element in the collection. It has been recommended as the approach to create plug-ins. Here we have 4 parameters being accepted.
There are other recommendations for creating plug-ins, including the theming part, but it would have been far too much to cover in just one article.
me is the jQuery object which has called this function. In this case, we have created a div called Zone1 and executed AddWidget on that
$("#Zone1").AddWidget("zone1widget2", "Pending Actions", "TechnicalPosts.aspx", 300);
The first step is to append the HTML content in strHTMLMarkup in to Zone1. me.append(<content>) ensures that the existing content is not over-written.
$.post is used to execute the requested url and the place the contents inside a div (instead of using iframes).
To learn more about $.post, please feel free to reference the article How to submit a form using JQuery via AJAX to an ASP.NET and receive the response.
Being asynchronous, the widgets will start displaying as the load, but in the sequence they are called in.
Besides this, there is an expand / collapse icon as well as icon which, when clicked, opens the same URL in a new window.
This plug-in is compatible with all browsers including IE (6,7 and 8), Firefox3, Chrome2 and Safari4
If the content return by the URL has some issues, it can cause disruption of activities on the main page itself also.
For questions please feel free to write to me at mailto:email@example.com?subject=jQuery%20Article%20on%20DashboardWidgetPlugin