Lazy Load Tabcontainer tabs and content page javascript not working problem

[pankajsingh5k]

Dear All,

Please help me...

I had read an article to lazy load a tab in a tabcontainer using an update panel on

http://mattberseth.com/blog/2007/07/...nels_with.html

and i am implementing it in my website....

in short...when the active tab changes we call a javascript function which then causes a serverclick on a hidden button in the page using the javascript.. __doPostBack() function and then that function causes the formview to display and databind...i have a website where i have 6 formviews in 6 tabs oof a tabcontainer....but the javascript doesnt work and page loads only...i know this problem is caused when u use a master page and so i tried doing it decleratively also using the ASP ClentScriptManager.RegisterClientScriptBlock at page_prerender and it still doesnt work...

placing the javascript code below the <asp:content> tag also doesnt work...

and when i used this trick without using the master page it works fine ...please help me...

i have made a test page that only has 3 tabs and i want the 2nd tab to load....if this works here then i will incorporate this functionality in my main website

please take a look at my page design

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Copy of Copy of Testing.aspx.vb"
    Inherits="Testing" MasterPageFile="~/MasterPage.master" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="middleContent">
 
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </cc1:ToolkitScriptManager>
    <input id="Button1" runat="server" type="button" value="button" onserverclick="Button1C" />
    <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1" OnClientActiveTabChanged="clientActiveTabChanged()">
        <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
        </cc1:TabPanel>
        <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
            <ContentTemplate>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        &nbsp;
                        <asp:FormView ID="FormView1" runat="server" OnItemUpdating="FormView1_ItemUpdating"
                            Visible="False" DataKeyNames="user_id">
                            <EditItemTemplate>
                                user_id:
                                <asp:Label ID="user_idLabel1" runat="server" Text='<%# Eval("user_id") %>'></asp:Label><br />
                                first_name:
                                <asp:TextBox ID="first_nameTextBox" runat="server" Text='<%# Bind("first_name") %>'></asp:TextBox><br />
                                last_name:
                                <asp:TextBox ID="last_nameTextBox" runat="server" Text='<%# Bind("last_name") %>'></asp:TextBox><br />
                                gender:
                                <asp:TextBox ID="genderTextBox" runat="server" Text='<%# Bind("gender") %>'></asp:TextBox><br />
                                date_of_birth:
                                <br />
                                <asp:DropDownList ID="dob_day" runat="server">
                                    <asp:ListItem>1</asp:ListItem>
                                    <asp:ListItem>2</asp:ListItem>
                                    <asp:ListItem>3</asp:ListItem>
                                    <asp:ListItem>4</asp:ListItem>
                                    <asp:ListItem>5</asp:ListItem>
                                    <asp:ListItem>6</asp:ListItem>
                                    <asp:ListItem>7</asp:ListItem>
                                    <asp:ListItem>8</asp:ListItem>
                                    <asp:ListItem>9</asp:ListItem>
                                    <asp:ListItem>10</asp:ListItem>
                                    <asp:ListItem>11</asp:ListItem>
                                    <asp:ListItem>12</asp:ListItem>
                                    <asp:ListItem>13</asp:ListItem>
                                    <asp:ListItem>14</asp:ListItem>
                                    <asp:ListItem>15</asp:ListItem>
                                    <asp:ListItem>16</asp:ListItem>
                                    <asp:ListItem>17</asp:ListItem>
                                    <asp:ListItem>18</asp:ListItem>
                                    <asp:ListItem>19</asp:ListItem>
                                    <asp:ListItem>20</asp:ListItem>
                                    <asp:ListItem>21</asp:ListItem>
                                    <asp:ListItem>22</asp:ListItem>
                                    <asp:ListItem>23</asp:ListItem>
                                    <asp:ListItem>24</asp:ListItem>
                                    <asp:ListItem>25</asp:ListItem>
                                    <asp:ListItem>26</asp:ListItem>
                                    <asp:ListItem>27</asp:ListItem>
                                    <asp:ListItem>28</asp:ListItem>
                                    <asp:ListItem>29</asp:ListItem>
                                    <asp:ListItem>30</asp:ListItem>
                                    <asp:ListItem>31</asp:ListItem>
                                </asp:DropDownList><asp:DropDownList ID="dob_month" runat="server" Width="73px">
                                    <asp:ListItem Value="1">January</asp:ListItem>
                                    <asp:ListItem Value="2">February</asp:ListItem>
                                    <asp:ListItem Value="3">March</asp:ListItem>
                                    <asp:ListItem Value="4">April</asp:ListItem>
                                    <asp:ListItem Value="5">May</asp:ListItem>
                                    <asp:ListItem Value="6">June</asp:ListItem>
                                    <asp:ListItem Value="7">July</asp:ListItem>
                                    <asp:ListItem Value="8">August</asp:ListItem>
                                    <asp:ListItem Value="9">September</asp:ListItem>
                                    <asp:ListItem Value="10">October</asp:ListItem>
                                    <asp:ListItem Value="11">November</asp:ListItem>
                                    <asp:ListItem Value="12">December</asp:ListItem>
                                </asp:DropDownList><asp:DropDownList ID="dob_year" runat="server">
                                </asp:DropDownList><br />
                                birth_place:
                                <asp:TextBox ID="birth_placeTextBox" runat="server" Text='<%# Bind("birth_place") %>'></asp:TextBox><br />
                                birth_time:
                                <asp:TextBox ID="birth_timeTextBox" runat="server" Text='<%# Bind("birth_time") %>'></asp:TextBox><br />
                                city:
                                <asp:TextBox ID="cityTextBox" runat="server" Text='<%# Bind("city") %>'></asp:TextBox><br />
                                state:
                                <asp:TextBox ID="stateTextBox" runat="server" Text='<%# Bind("state") %>'></asp:TextBox><br />
                                zipcode:
                                <asp:TextBox ID="zipcodeTextBox" runat="server" Text='<%# Bind("zipcode") %>'></asp:TextBox><br />
                                country:
                                <asp:TextBox ID="countryTextBox" runat="server" Text='<%# Bind("country") %>'></asp:TextBox><br />
                                profession:
                                <asp:TextBox ID="professionTextBox" runat="server" Text='<%# Bind("profession") %>'></asp:TextBox><br />
                                relation_status:
                                <asp:TextBox ID="relation_statusTextBox" runat="server" Text='<%# Bind("relation_status") %>'></asp:TextBox><br />
                                languages:
                                <asp:TextBox ID="languagesTextBox" runat="server" Text='<%# Bind("languages") %>'></asp:TextBox><br />
                                belongs_to:
                                <asp:TextBox ID="belongs_toTextBox" runat="server" Text='<%# Bind("belongs_to") %>'></asp:TextBox><br />
                                interested_in:
                                <asp:TextBox ID="interested_inTextBox" runat="server" Text='<%# Bind("interested_in") %>'></asp:TextBox><br />
                                email_id:
                                <asp:TextBox ID="email_idTextBox" runat="server" Text='<%# Bind("email_id") %>'></asp:TextBox><br />
                                <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
                                    Text="Update"></asp:LinkButton>
                                <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
                                    Text="Cancel"></asp:LinkButton>
                            </EditItemTemplate>
                            <InsertItemTemplate>
                                user_id:
                                <asp:TextBox ID="user_idTextBox" runat="server" Text='<%# Bind("user_id") %>'>
                                </asp:TextBox><br />
                                first_name:
                                <asp:TextBox ID="first_nameTextBox" runat="server" Text='<%# Bind("first_name") %>'>
                                </asp:TextBox><br />
                                last_name:
                                <asp:TextBox ID="last_nameTextBox" runat="server" Text='<%# Bind("last_name") %>'>
                                </asp:TextBox><br />
                                gender:
                                <asp:TextBox ID="genderTextBox" runat="server" Text='<%# Bind("gender") %>'>
                                </asp:TextBox><br />
                                date_of_birth:
                                <asp:TextBox ID="date_of_birthTextBox" runat="server" Text='<%# Bind("date_of_birth") %>'>
                                </asp:TextBox><br />
                                birth_place:
                                <asp:TextBox ID="birth_placeTextBox" runat="server" Text='<%# Bind("birth_place") %>'>
                                </asp:TextBox><br />
                                birth_time:
                                <asp:TextBox ID="birth_timeTextBox" runat="server" Text='<%# Bind("birth_time") %>'>
                                </asp:TextBox><br />
                                city:
                                <asp:TextBox ID="cityTextBox" runat="server" Text='<%# Bind("city") %>'>
                                </asp:TextBox><br />
                                state:
                                <asp:TextBox ID="stateTextBox" runat="server" Text='<%# Bind("state") %>'>
                                </asp:TextBox><br />
                                zipcode:
                                <asp:TextBox ID="zipcodeTextBox" runat="server" Text='<%# Bind("zipcode") %>'>
                                </asp:TextBox><br />
                                country:
                                <asp:TextBox ID="countryTextBox" runat="server" Text='<%# Bind("country") %>'>
                                </asp:TextBox><br />
                                profession:
                                <asp:TextBox ID="professionTextBox" runat="server" Text='<%# Bind("profession") %>'>
                                </asp:TextBox><br />
                                relation_status:
                                <asp:TextBox ID="relation_statusTextBox" runat="server" Text='<%# Bind("relation_status") %>'>
                                </asp:TextBox><br />
                                languages:
                                <asp:TextBox ID="languagesTextBox" runat="server" Text='<%# Bind("languages") %>'>
                                </asp:TextBox><br />
                                belongs_to:
                                <asp:TextBox ID="belongs_toTextBox" runat="server" Text='<%# Bind("belongs_to") %>'>
                                </asp:TextBox><br />
                                interested_in:
                                <asp:TextBox ID="interested_inTextBox" runat="server" Text='<%# Bind("interested_in") %>'>
                                </asp:TextBox><br />
                                email_id:
                                <asp:TextBox ID="email_idTextBox" runat="server" Text='<%# Bind("email_id") %>'>
                                </asp:TextBox><br />
                                <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
                                    Text="Insert">
                                </asp:LinkButton>
                                <asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
                                    Text="Cancel">
                                </asp:LinkButton>
                            </InsertItemTemplate>
                            <ItemTemplate>
                                user_id:
                                <asp:Label ID="user_idLabel" runat="server" Text='<%# Eval("user_id") %>'></asp:Label><br />
                                first_name:
                                <asp:Label ID="first_nameLabel" runat="server" Text='<%# Bind("first_name") %>'>
                                </asp:Label><br />
                                last_name:
                                <asp:Label ID="last_nameLabel" runat="server" Text='<%# Bind("last_name") %>'></asp:Label><br />
                                gender:
                                <asp:Label ID="genderLabel" runat="server" Text='<%# Bind("gender") %>'></asp:Label><br />
                                date_of_birth:
                                <asp:Label ID="date_of_birthLabel" runat="server" Text='<%# Bind("date_of_birth") %>'>
                                </asp:Label><br />
                                birth_place:
                                <asp:Label ID="birth_placeLabel" runat="server" Text='<%# Bind("birth_place") %>'>
                                </asp:Label><br />
                                birth_time:
                                <asp:Label ID="birth_timeLabel" runat="server" Text='<%# Bind("birth_time") %>'>
                                </asp:Label><br />
                                city:
                                <asp:Label ID="cityLabel" runat="server" Text='<%# Bind("city") %>'></asp:Label><br />
                                state:
                                <asp:Label ID="stateLabel" runat="server" Text='<%# Bind("state") %>'></asp:Label><br />
                                zipcode:
                                <asp:Label ID="zipcodeLabel" runat="server" Text='<%# Bind("zipcode") %>'></asp:Label><br />
                                country:
                                <asp:Label ID="countryLabel" runat="server" Text='<%# Bind("country") %>'></asp:Label><br />
                                profession:
                                <asp:Label ID="professionLabel" runat="server" Text='<%# Bind("profession") %>'>
                                </asp:Label><br />
                                relation_status:
                                <asp:Label ID="relation_statusLabel" runat="server" Text='<%# Bind("relation_status") %>'>
                                </asp:Label><br />
                                languages:
                                <asp:Label ID="languagesLabel" runat="server" Text='<%# Bind("languages") %>'></asp:Label><br />
                                belongs_to:
                                <asp:Label ID="belongs_toLabel" runat="server" Text='<%# Bind("belongs_to") %>'>
                                </asp:Label><br />
                                interested_in:
                                <asp:Label ID="interested_inLabel" runat="server" Text='<%# Bind("interested_in") %>'>
                                </asp:Label><br />
                                email_id:
                                <asp:Label ID="email_idLabel" runat="server" Text='<%# Bind("email_id") %>'></asp:Label><br />
                                <asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit"
                                    Text="Edit">
                                </asp:LinkButton>
                                <asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete"
                                    Text="Delete">
                                </asp:LinkButton>
                                <asp:LinkButton ID="NewButton" runat="server" CausesValidation="False" CommandName="New"
                                    Text="New">
                                </asp:LinkButton>
                            </ItemTemplate>
                        </asp:FormView>
                        &nbsp;&nbsp;
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Button1"></asp:AsyncPostBackTrigger>
                    </Triggers>
                </asp:UpdatePanel>
                &nbsp;
            </ContentTemplate>
        </cc1:TabPanel>
        <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
        </cc1:TabPanel>
    </cc1:TabContainer>
</asp:Content>

and here is my VB file

Imports System.Data.OleDb
Imports System.Data
Imports System
Imports System.Globalization
Partial Class Testing
    Inherits System.Web.UI.Page
    Dim con As OleDbConnection
    Dim cmd As OleDbCommand
    Dim da As OleDbDataAdapter
    Dim param As OleDbParameter
    Dim ds As DataSet
    Dim DTF As DateTimeFormatInfo
    Dim dob As DateTime
    Dim updatestr As String
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Response.Write(Me.FormView1.ClientID.ToString)
    End Sub
 
    Protected Sub Button1C(ByVal sender As Object, ByVal e As System.EventArgs)
        Me.FormView1.Visible = True
        Me.FormView1.DataBind()
        Call displayform()
    End Sub
    Sub displayform()
 
        con = New OleDbConnection()
        con.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & HttpContext.Current.Server.MapPath("sandesh.mdb")
        cmd = New OleDbCommand("select * from [general] where user_id=@USERID", con)
        con.Open()
        param = New OleDbParameter("USERID", OleDbType.VarChar, 20)
        cmd.Parameters.Add(param)
        param.Value = "pankajsingh5k"
        da = New OleDbDataAdapter(cmd)
        'da.MissingSchemaAction = MissingSchemaAction.AddWithKey
        ds = New DataSet
        'da.FillSchema(ds, SchemaType.Source, "general")
        da.Fill(ds, "General")
        con.Close()
        FormView1.DataSource = ds.Tables(0)
        FormView1.DataBind()
        If FormView1.CurrentMode = FormViewMode.Edit Then
            Call populateYear()
        End If
    End Sub
 
    Protected Sub FormView1_ModeChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewModeEventArgs) Handles FormView1.ModeChanging
        If e.NewMode = FormViewMode.Edit Then
            FormView1.ChangeMode(e.NewMode)
        ElseIf e.NewMode = FormViewMode.ReadOnly Then
            FormView1.ChangeMode(e.NewMode)
            Session("u") = 0
        End If
        Call displayform()
    End Sub
    Sub populateYear()
 
        ' find controls for day,month,year
        Dim Year, month, day As DropDownList
        Year = CType(FormView1.FindControl("dob_year"), DropDownList)
        month = CType(FormView1.FindControl("dob_month"), DropDownList)
        day = CType(FormView1.FindControl("dob_day"), DropDownList)
 
        'add years to the year DropDownLIst dynamically
        For i As Integer = 1940 To 1991
            Year.Items.Add(New ListItem(i.ToString))
        Next
 
        'find the column that contains the date of birth as datetime
        dob = CType(ds.Tables(0).Rows(0)("date_of_birth"), DateTime)
 
        ' Creates and initializes a DateTimeFormatInfo associated with the en-US culture
        DTF = New CultureInfo("fr-FR", False).DateTimeFormat
 
        'assigning values
        Year.SelectedValue = dob.Year
        month.SelectedIndex = dob.Month - 1 'since there indexes start from 0
        day.SelectedValue = dob.Day
 
 
    End Sub
    Sub edit()
        Dim dt As Date
 
        Dim Year, month, day, gender, relation, belongs_to As DropDownList
              Year = CType(FormView1.FindControl("dob_year"), DropDownList)
        month = CType(FormView1.FindControl("dob_month"), DropDownList)
        day = CType(FormView1.FindControl("dob_day"), DropDownList)
        'gender = CType(FormView1.FindControl("gender_DDList"), DropDownList)
        'relation = CType(FormView1.FindControl("relation_DDList"), DropDownList)
        'belongs_to = CType(FormView1.FindControl("belongs_to_DDList"), DropDownList)
        'Create a new DateTime object
        dt = New DateTime(Year.SelectedValue, month.SelectedValue, day.SelectedValue)
 
 
 
        Dim updatecmd As New OleDbCommand()
        updatestr = "update [general] set date_of_birth ='" & dt & "' where user_id='pankajsingh5k'"
 
        MsgBox(updateStr)
        Try
            con = New OleDbConnection()
            con.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & HttpContext.Current.Server.MapPath("sandesh.mdb")
            con.Open()
            updatecmd = New OleDbCommand(updatestr, con)
            updatecmd.ExecuteNonQuery()
            con.Close()
        Catch ex As Exception
 
        End Try
        FormView1.ChangeMode(FormViewMode.ReadOnly)
        Call displayform()
    End Sub
 
 
    Protected Sub FormView1_ItemUpdating(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewUpdateEventArgs)
        Call edit()
    End Sub
    Private Sub loadscript()
        Dim cs As ClientScriptManager = Page.ClientScript
        Dim sb As StringBuilder = New StringBuilder
        sb.Append("<script language='javascript'>")
        sb.Append("function clientActiveTabChanged(sender, args) {")
        sb.Append("var isTab2Loaded = $get('ctl00_middleContent_TabContainer1_TabPanel2_FormView1');")
        sb.Append(" if(!isTab2Loaded && sender.get_activeTabIndex() == 1){")
        sb.Append("__doPostBack('Button1', '');")
        sb.Append("}")
        sb.Append("}")
        sb.Append("</script>")
 
        If (Not cs.IsClientScriptBlockRegistered("TAB")) Then
            cs.RegisterClientScriptBlock(Me.GetType, "TAB", sb.ToString())
 
        End If
 
    End Sub
 
    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
        Call loadscript()
    End Sub
End Class
 

if you want to know anything plz ask me...
thanks for ur time

[pankajsingh5k]

Dear all,

i did some research at home and found out that the client script which i register at prerender works when i placed some alert("any message") in them but the __doPostBack() line doesnt work and thus the post back doesnt happen....

so please can anyone look tell me whether i am using the __doPOstBack in the wrong way...or whether it doesnt find the button or the arguments are wrong

when i run the page IE also sometimes tell errors in scripts...

[acoder]

This seems more of an ASP.NET problem. ASP.NET code is not much use in this forum. Post client-side versions of code in this forum.