Modifying the Contents of a Tab Using Ajax

In this blog I explain that how to initialize the contents of a tab from the HTML return by the server.

1. Create Content

I create a web form Content.aspx to content for a tab initialization.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Content.aspx.cs" Inherits="JQueryExample.Content" %>

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

</head>

<body>

<div>

It is blog section.

</div>

</form>

</body>

</html>

2. Create function for Initialize

$(document).ready(function()

{

$("#tabs").tabs({

fx:{opacity:"toggle"},

}).tabs("url",1,"Content.aspx").tabs("load",0);

});

</script>

Above code has a inbuilt tab() function that tab() function has three argument. url is action. index 1 presents tab index means second tab will be initialize by content and Content.aspx is web form that content will be call. “laod” is a action for load content.

3. Entire Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabAjax.aspx.cs" Inherits="JQueryExample.TabAjax" %>

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

$(document).ready(function()

{

$("#tabs").tabs({

fx:{opacity:"toggle"},

}).tabs("url",1,"Content.aspx").tabs("load",0);

});

</script>

</head>

<body>

<ul>

<li><a href="#tabArticle">Article</a></li>

</ul>

It is Article Section.

</div>

Blog Section

</div>

</form>

</body>

</html>

4. Output

Here uses css and jquery/js file form article Create Tabs Using jQuery and CSS