Question

I’m new to Jquery and javascript. I’m using Jquery UI tabs in my as.net project. my tabs content is dynamic.so, I use SQL Server to save and retreive them. I have a class to build tabs based on special button clicked. this is my class:

 public class TabBuilder{
public string Build(int ServiceId)
{

    string title = " <div class='demo'><div id='tabs' onclick='alert(yes)'><ul>\n";
    string content = "";

    DataTable select = new DataTable();
    ServicesBLL ser = new ServicesBLL();
    select = ser.FormsSelTabs(ServiceId);

     int i = 1;

    foreach (DataRow row in select.Rows)
    {

        title += createTitle(row["LinkName"].ToString(), i);
        content += createContent(row["LinkHref"].ToString(), i);
        i++;
    }
    title += "</ul>\n";
    content += "</div></div>";

    return title + content;
}

private string createTitle(string title, int i)
{

    string htm = "<li><a id='tab{0}' href='#tabs-{1}'>{2}</a></li>\n";
    htm = string.Format(htm, i,i, title);
    return htm;
}

private string createContent(string content, int i)
{
    string htm = "<div id='tabs-{0}'><iframe dir='rtl' frameborder='0' height='600px' width='100%' src='{1}'></iframe></div>\n";
    htm = string.Format(htm, i, content);
    return htm;
}}

in my aspx page I have a literal(LtrTabs) to show tabs and in aspx.cs code I have this code to build tabs:

protected void btnEntities_Click(object sender, EventArgs e)
{
    ServiceID = 1;
    TabBuilder tab = new TabBuilder();
    LtrTabs.Text = tab.Build(ServiceID);
 }

I need lazy loading tab but I don’t know how to implement it. I saw some examples but none of them use database to load content.

Answer 1

I didn’t sift through the server-side code to know for sure, but as long as you have one function that outputs the empty tabs with markup that looks like this:

http://jqueryui.com/demos/tabs/#Ajax_mode

Then it’s just a matter of populating the hrefs with valid resources. On your server side, as long as it’s able to recognize incoming requests for HTML contents (no need to send back tabs, etc, just the contents), that’s all you need.

To recap:

1. Function to return the HTML with empty tabs. Alternatively, if this doesn’t need to be dynamic, just write it as HTML; no point complicating things with unecessary logic.

2. Function to return the content of the tabs.

How you distinguish between the two is really up to you. POST/GET variables, different URLs… however your application is being built.