Thursday, February 02, 2012

How to open and auto close JQuery UI Dialog box on click of Hyperlink or Anchor Tag

In this article i will be explaining, How to open and auto close and change content of JQuery UI Dialog box on click of Hyperlink or Anchor Tag.

I have assumed that you have already created VS.Net Web Project and add JQuery UI reference into your web project.  If you need help in adding JQuery UI into asp.net website, then please read my post on how to add JQuery UI into asp.net website

Create a asp.net content page and add following code
<a id="hlOpenMe" runat="server" href="#">Click Me to Open and auto close Dialog Box</a>
<br />
<b>Please wait for 5 Seconds and JQuery UI Dialog box will auto close.</b>
<br /><br />
<div id="dialog" title="My Dialog Title">
    <p>This is My Dialog box Description/Content</p>    
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


<script type="text/javascript">
    $(document).ready(function () {
        $("#dialog").dialog({ autoOpen: false });


        $("#<%=hlOpenMe.ClientID%>").click(
            function () {
                $("#dialog").dialog('open');


                //Change content on the fly
                ChangeMessage("Welcome to JQueryUI Dialog Box Example");


                //Auto Close JQueryUI Dialog Box
                AutoCloseDialogBox(5000);
                return false;
            }
        );


        function ChangeMessage(Message) {            
            $("#dialog").html(Message);
        }


        function AutoCloseDialogBox(WaitSeconds) {
            //Auto Close Dialog Box after few seconds
            setTimeout(
                function () {
                    $("#dialog").dialog("close");
                }, WaitSeconds);
        }
    });
</script>


Understanding above code
1) I have declared a simple asp.net hyperlink control (Since it has runat="server" it is asp.net control)
2) setTimeOut javascript function will cause dealy, this helps us to close JQuery UI dialog box after few seconds.
Syntax: setTimeout("javascript function declaration",milliseconds);
Example:
   setTimeout(
                function () {
                    $("#dialog").dialog("close");
                }, 5000);

Above line will cause a delay 5 seconds and then auto close dialog box.

Watch out Live Demo

For More on JQuery Tutorials

How to open and close JQuery UI Dialog box on click of Hyperlink or Anchor Tag

In this article i will be explaining, How to open and close JQuery UI Dialog box on click of Hyperlink or Anchor Tag

I have assumed that you have already created VS.Net Web Project and add JQuery UI reference into your web project.  If you need help in adding JQuery UI into asp.net website, then please read my post on how to add JQuery UI into asp.net website

Create a asp.net content page and add following code


<a id="hlOpenMe" runat="server" href="#">Click Me to Open Dialog Box</a>


<div id="dialog" title="My Dialog Title">
    <p>This is My Dialog box Description/Content</p>    
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


<script type="text/javascript">
    $(document).ready(function () {
        $("#dialog").dialog({ autoOpen: false });


        $("#<%=hlOpenMe.ClientID%>").click(
            function () {
                $("#dialog").dialog('open');
                return false;
            }
        );
    });
</script>


Understanding above code
1) I have declared a simple asp.net hyperlink control (Since it has runat="server" it is asp.net control)
2) $("#dialog").dialog({ autoOpen: false });  - By default dialog box will open on page load, this line will explicitly disallow dialog box to open on page load.
3) Inside hyperlink click event, I have wrote code to open JQuery UI dialog box.
        $("#<%=hlOpenMe.ClientID%>").click(
            function () {
                $("#dialog").dialog('open');
                return false;
            }
        );

Similarly if you want to close JQuery UI dialog box  change below line with "close" rather than "open"
                $("#dialog").dialog('close');

Watch out Live Demo


For More on JQuery Tutorials

How to open and close JQuery UI Dialog box on Button Click

In this article i will be explaining, How to open and close JQuery UI Dialog box on Button Click.

I have assumed that you have already created VS.Net Web Project and add JQuery UI reference into your web project.  If you need help in adding JQuery UI into asp.net website, then please read my post on how to add JQuery UI into asp.net website

Create a asp.net content page and add following code

<asp:Button ID="btnOpenMe" runat="server" Text="Click Me to open Dialog box" />


<div id="dialog" title="My Dialog Title">
    <p>This is My Dialog box Description/Content</p>    
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


<script type="text/javascript">
    $(document).ready(function () {
        $("#dialog").dialog({ autoOpen: false });


        $("#<%=btnOpenMe.ClientID%>").click(
            function () {
                $("#dialog").dialog('open');
                return false;
            }
        );
    });
</script>

Understanding above code
1) I have declared a simple asp.net button control
2) $("#dialog").dialog({ autoOpen: false });  - By default dialog box will open on page load, this line will explicitly disallow dialog box to open on page load.
3) Inside button click event, I have wrote code to open JQuery UI dialog box.

        $("#<%=btnOpenMe.ClientID%>").click(
            function () {
                $("#dialog").dialog('open');
                return false;
            }
        );

Similarly if you want to close JQuery UI dialog box  change below line with "close" rather than "open"
                $("#dialog").dialog('close');


Watch out Live Demo


For More on JQuery Tutorials

How to open JQuery UI Dialog box on Page Load - AutoOpen

In this article i will be explaining, How to open JQuery UI Dialog box on Page Load - AutoOpen.

I have assumed that you have already created VS.Net Web Project and add JQuery UI reference into your web project.  If you need help in adding JQuery UI into asp.net website, then please read my post on how to add JQuery UI into asp.net website

Create a asp.net content page and add following code
<div id="dialog" title="My Dialog Title">
    <p>This is My Dialog box Description/Content</p>
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


<script type="text/javascript">
    $(function () {
        $("#dialog").dialog();
    });
</script>

Understanding above code.
<div id="dialog" title="My Dialog Title"> - You can be able to change dialog title by editing title.

    <p>This is My Dialog box Description/Content</p> You can be able to change dialog description/message by editing paragraph tag.  You can write anything which is valid html inside div tag.


    $(function () {
        $("#dialog").dialog(); - Please note in above example, JQuery UI dialog box has ID as "dialog", so we have $("#dialog") and call dialog method to show dialog box.

By default JQuery UI dialog box opens on page load, show we haven't done anything specific to open it on page load.


Preview of code.


You can also show image or any valid html inside JQuery UI dialog box.  Here is the example.

Watch out Live Demo

For More on JQuery Tutorials

Wednesday, February 01, 2012

JQueryUI Demo and Tutorial for Asp.net Developers

This article contains all links for JQuery UI Demo and Tutorials for Asp.net Developers.

**Please note: I am in middle of making JQuery Tutorial, so this page will be updating frequently until this tutorial is complete, their is lot to come yet.  I will be using this post as a placeholder to track my progress and making tutorial

How to add JQuery UI to Asp.net Website

JQuery UI contains sets of controls and themes which you can simply add and start using it, just the way you can use any other third party jquery control.  Incase if you have used Asp.net Ajax Control toolkit in past, then Jquery UI controls are very similar to that.  Let me cut this discussion here and directly show how you can start using JQuery UI in asp.net website, later you can decide how helpful this is for your asp.net projects.

Step 1: Download JQuery UI
Click this link to Download JQuery UI


On Themes Page, click on Gallery tab and select the theme best suitable for your project, you can even customize its color and setting by clicking on edit button, ones you are done, click on download button.

On Download Page, on very right side you will find "Download" button. Its little confusing if you are visiting this page for first time.  Atleast i found it confusing, because i don't read all details :)   

Extract the .zip file, it comes up with 3 folders and 1 index.html file
  1. css folder
  2. development-bundle folder and
  3. js folder
The only folder we are interested in is css folder.  Copy "css" folder and put in your VS.Net Solution directory.  (Incase you haven't created a VS.Net Web Project Please create it now)

Ones you have copied "css" folder inside VS.Net solution directory, click on "Show All Files" from solution explorer.

This make "css" directory to appeared in VS.Net Solution, now right click "css" directory and select "Include in Project" option.

You are done adding necessary files to start "JQueryUI".

Step 2: Open Master Page of your project and add following lines just before </Head>
<%--For JQuery--%>
<script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<%--For JQuery UI--%>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>

Step 3: Add CSS File reference in your project.  You can do so by simply drag and drop .css file from css folder.
<link href="Styles/css/blitzer/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" />

That's it you are ready to use JQueryUI.

Incase you want to test whether JQueryUI is working or not simply create one asp.net page and add following lines of code in your content page.
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


<script>
    $(function () {
        $("#dialog").dialog();
    });
</script>

And this will display JQueryUI dialog box on page load.
We will learn how this code works and more in my next coming blog post

Most Recent Post

Subscribe Blog via Email

Enter your email address:



Disclaimers:We have tried hard to provide accurate information, as a user, you agree that you bear sole responsibility for your own decisions to use any programs, documents, source code, tips, articles or any other information provided on this Blog.
Page copy protected against web site content infringement by Copyscape