Wednesday, May 11, 2011

Create generate on the fly JQuery dynamic content




Please visit my new Web Site WWW.Codedisplay.com



In many cases developers need to add dynamic contents in a DIV. In my lattest project i have done a critical job. In this post i am sharing just a simple example on how to add dynamic contents in a DIV. By following this example you can generate on the fly dynamic contents, controls like Button, Link etc. The output look like below:

Jquery Dynamic Content



To do this fisrt add an asp.net aspx page. Then paste the below code under body tag:
<asp:Button ID="Button1" runat="server" Text="Add Dynamic Contents" />
    <div id="divDynamic">
    </div>
Now under head tag paste the below JQuery code:
<script type="text/javascript">
        $(document).ready(function() {
            $("#Button1").click(function() {               
                $("#divDynamic").append("<b>This is a dynamic content--JQUERY</b></br>");
                return false;
            });
        });
    </script>

The complete code will be:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dynamincontents_jquery.aspx.cs" Inherits="Dynamincontents_jquery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Jquery to add dynamic contents in a DIV</title>
    <script src="Script/jquery.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(document).ready(function() {
            $("#Button1").click(function() {               
                $("#divDynamic").append("<b>This is a dynamic content--JQUERY</b></br>");
                return false;
            });
        });
    </script>
        
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <asp:Button ID="Button1" runat="server" Text="Add Dynamic Contents" />
    <div id="divDynamic">
    </div>
    
    </div>
    </form>
</body>
</html>
Now hope one can generate dynamic contents by using JQuery power script.

0 comments:

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash