HighOnCoding: Get high on ASP.NET articles, videos, podcasts and more!

Creating Beautiful Dialogs Using JQuery UI

AzamSharp
Published Date: 8/3/2009 11:47:14 AM
Views: 14726

Abstract:
Dialog boxes are frequently used in web applications to provide additonal information to the user. Dialog boxes are not hard to create but creating attractive draggable and stretchable dialog boxes is hard. In this article we are going to demonstrate how to use JQuery UI library to create attractive dialog boxes.
Downloading JQuery and JQuery UI:

The first step is to download the latest version of the JQuery framework along with the JQuery UI library which contains the dialog box along with other cool plug ins. You can download the associated libraries using the following URL:

1) JQuery
2) JQuery UI Library

Add a reference to the above libraries in your application as shown below:

 <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>

Creating a Simple Dialog:

Let's start by creating a simple dialog using the JQuery UI. The dialog will display the greeting message to the user. Take a look at the following code:

<div id="dialog" style="display:none";>Hello World!</div>
    
<input type="button" value="Show Pop Up!" onclick="showPopup()" />

<script language="javascript" type="text/javascript">

    $("#dialog").dialog({autoOpen:false}); 

    function showPopup() {

        $("#dialog").dialog('open'); 
    
    }

</script>

There are couple of things to notice here! The line $("#dialog").dialog({autoOpen:false}); initializes the dialog. The autoOpen attribute is set to false which will prevent the dialog from opening when the page is loaded. The showPopup function is fired when the user clicks the Button. The dialog is shown below:

Don't freak out! You might see a different styled dialog box. If you don't like the custom default style then there are several others to choose from. You can download a different style/theme from the link below:

http://jqueryui.com/themeroller/#themeGallery

Dialog Boxes with GridView Control:

Let's use the dialog box feature with a GridView control. The GridView will be populated by a list of customers from the database. Here is the code which is used to populate the GridView control:

   private void BindData()
        {
            using(var db = new EasyShoppingDataContext() )
            {
                gvCustomers.DataSource = from c in db.Customers
                                         select c; 
                gvCustomers.DataBind();
            }
        }

And here is the ASPX code for the GridView control:

   <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
    
    <Columns>
    
    <asp:BoundField DataField="FirstName" HeaderText="First Name" />
    <asp:BoundField DataField="LastName" HeaderText="Last Name" />
    
    <asp:TemplateField>
    <ItemTemplate>
    
    <div class="dialogClass" id="dialogPicture_<%# Eval("CustomerId") %>" style="display:none;">
    
    <img src='<%# Eval("ImageUrl") %>' />
    
    </div>
    
    <input id="btn2" class="buttonClass" type="button" value="Select" />
    
    </ItemTemplate>
    </asp:TemplateField>
    
    </Columns>
    
    </asp:GridView>

There are couple of important things to notice about the above code. First, we are using a <DIV> control inside the ItemTemplate column. Each customer row have a unique <DIV> control which is associated with each row. This is performed by concatenating the keyword "dialogPicture" with the CustomerId. You can even make it unique using Container.ItemIndex which is unique for each row. Next, is that we have used a class "buttonClass" for the Button control. This is also for the same reason that we need to identify a particular button which cannot be achieved by using the id unless the id's are all unique.

    $(document).ready(function() {

        $("#dialogPicture").dialog({ autoOpen: false });

        $(".buttonClass").click(function() {

            // get the div element with the id dialogClass contained at the same scope as button!

            var id = ($(this).siblings(".dialogClass").attr("id"));

            $("#" + id).dialog({autoOpen: false});

            $("#" + id).dialog('open');         

        });

The code above hooks up the Button click event and make the dialog visibile. There are several ways to get the id of the dialog <DIV>. We have used siblings since it offer more flexibility by searching both the sides of the TreeNode. Below you can see the screenshot when a particular row is clicked in the GridView control.

Conclusion:

In this article we demonstrated how to use the JQuery UI Dialog plug in to create attractive dialogs. JQuery UI Dialogs can also be used to create MESH applications.

[Download Sample]

Did you like this article?

Submit

Enter Comment/Feedback

Name:

Subject:

Email:

2+2=

Comments:

Comments/Feedbacks


	Subject: Nice Article Name: Thanigainathan Date: 10/13/2009 11:58:26 PM Comment: Hi, Nice article. Thanks, Thani


	Subject: Database Name: Christian Schiffer Date: 10/14/2009 3:49:24 AM Comment: Hi, thanks for a great article, could you please include the database or script to generate it with the sample data in your sample?


	Subject: WebGrid DataGrid Name: WebGrid Date: 10/14/2009 1:32:38 PM Comment: Hi, You can try my JQuery and JQuery UI supporting DataGrid. It's free :-) http://www.webgrid.com


	Subject: database error Name: andres Date: 10/15/2009 2:38:56 PM Comment: hi, thanks for the sample, but i have a problem with BeautifulPopups.aspx, it can not compile, i see this error: can not open the database "EasyShopping" requested by the login


	Subject: For the beginners Name: NA Date: 10/16/2009 11:22:45 AM Comment: This is OK and good for those that have never used jQuery but it would be better to only have a single dialog and pass the ID to it for it to load the needed content as needed. As you learn more about jQuery, you'll find more efficient ways of using it.