Reload original div content in Tab Content?

**gboulton** · 12-11-2008, 07:49 PM

1) Script Title: Tab Content Script (v 2.2)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

3) Describe problem:

Am working on an interface that, at some points, modifies the innerHTML of the various content divs.

For example, one tab is, say, "User Administration". Its content div contains various controls (textboxes, dropdowns, etc) to add a user. Once they submit, processing is handled in the VB codebehind, and then the innerHTML of the content div is changed to reflect the addition of the new user.

The problem, of course, is that any time the user navigates away from that tab, and then back to it, the "User added" content still appears.

What I'm wondering is this:

Is there a way to "cache" the ORIGINAL div contents of each tab, and then reload them whenever a tab is clicked? I've played around with modifying the init function in tabcontent.js, but with no luck so far.

Anyone got any ideas?

Thanks in advance...

**ddadmin** · 12-11-2008, 11:52 PM

Sure, try the below modified tabcontent.js file, which stores the original contents of each sub content when the page loads, and upon each tab click, sets the sub content's content using it again.

**gboulton** · 12-12-2008, 03:45 PM

Well, bah.

Thanks for the rapid reply and modification...sadly, however, it doesn't appear to work.

I'm getting no different behaviour now than I was with the original tabcontent.js

I see the changes...and they're right along the lines I was trying yesterday...not sure why things aren't working. Clearly, it's got to be something on my end.

I'm going to run up some samples/tests, see if I can A) make the new file work as expected and B) break it again...perhaps that will give me an idea of what, in the rest of my code, is breaking this functionality, and we can work from there.

Thanks again for the rapid response...I'll be in touch after some troubleshooting.

**gboulton** · 12-12-2008, 04:03 PM

Hrmm.

Well, I don't seem to be able to make things work at all, even in a stripped down very basic version. Here's what I've got:

A tabtest.aspx file which has:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
        <link rel="stylesheet" type="text/css" href="tabcontent.css" />

        <script type="text/javascript" src="tabcontent.js">
        /***********************************************
        * Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
        * This notice MUST stay intact for legal use
        * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
        ***********************************************/
        </script>
</head>
<body>
    <form id="form1" runat="server">

            <div id="div_tabs" runat="server" style="position:relative; top:0px;  border:2px solid grey; left:250px; width:80%;">

                <ul id="tabs" class="shadetabs" runat="server">
                    <li><a href='#' rel='Div1' class='selected'>Tab 1</a></li>
                    <li><a href='#' rel='Div2'>Tab 2</a></li>
                    <li><a href='#' rel='Div3'>Tab 3</a></li>
                    <li><a href='#' rel='Div4'>Tab 4</a></li>
                </ul>

                <div style="border:1px solid gray;  margin-bottom: 1em; padding: 10px">

                    <div id="Div1" class="tabcontent" runat="server">
                        Original Div 1
                    </div>

                    <div id="Div2" class="tabcontent" runat="server">
                        Original Div 2
                    </div>

                    <div id="Div3" class="tabcontent" runat="server">
                        Original Div 3
                    </div>

                    <div id="Div4" class="tabcontent" runat="server">
                        Original Div 4
                    </div>

                </div>
            </div>
<asp:Button ID="btn_changediv" runat="server" Text="Change Div 1 Content" />
            
                <script type="text/javascript">
                    var objTabs=new ddtabcontent("tabs")
                    objTabs.setpersist(true)
                    objTabs.setselectedClassTarget("link") //"link" or "linkparent"
                    objTabs.init()
                </script>

    </form>
</body>
</html>

And then a tabtest.aspx.vb code behind file to handle the button click with this function:

Code:

    Protected Sub btn_changediv_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn_changediv.Click
        Div1.InnerHtml = "Changed Div 1 Content"
    End Sub

Clicking the button does, indeed, change the contents of Div1 as expected. However, the following two unexpected behaviours occur:

1) Clicking the button ALWAYS makes Tab3 active
2) The content of Div1 remains the changed content, never reverting to the original content with any click of that tab (or any other tab)

================

I'm still operating on the presumption that I've missed something here...any thoughts?

(Edit : I just tried it after stripping out the "div_tabs" div that was wrapped around everything...no change to the behaviour)

**gboulton** · 12-12-2008, 04:19 PM

Originally Posted by gboulton

Clicking the button does, indeed, change the contents of Div1 as expected. However, the following two unexpected behaviours occur:

1) Clicking the button ALWAYS makes Tab3 active
2) The content of Div1 remains the changed content, never reverting to the original content with any click of that tab (or any other tab)

The above behaviour is in IE 7. Just learned that FF2 does NOT display behaviour #1 (The tab selected when the button is clicked remains selected), but DOES still display problem 2.

**gboulton** · 12-12-2008, 05:15 PM

Well, I've found the problem...but not the cure yet.

problem is that the button click generates a postback....which reloads the page, and calls the init function again...which, of course, re-assignes the subcontents[i] variable to the current content of the divs.

not exatly sure how to force the javascript init to be called only on initial page load, but not on any postbacks.

Any thoughts?

**ddadmin** · 12-14-2008, 12:28 AM

Are you saying this is the sequence of events that occur:

User clicks on button within a DIV content -> Page reloads -> DIV is now populated with different, dynamically generated content

If so, what happens after page reload that causes the dynamic content to be shown (ie: via URL parameters)? I'm a little confused on various details here.

BTW, I assumed you've also looked at Ajax Tabs Content script right?

**gboulton** · 12-15-2008, 01:01 PM

Originally Posted by ddadmin

Are you saying this is the sequence of events that occur:

User clicks on button within a DIV content -> Page reloads -> DIV is now populated with different, dynamically generated content

Yep.

Clicking the button replaces the contents of one of the divs with new contents.

Clicking the button is also going to force a postbak...which is, of course, a page reload.

Since it's a page reload, the JavaScript call to the menu init function happens.

Since the code to 'cache" the original div content is IN the init function, it "caches" what is now there at page reload...the "changed" content.

BTW, I assumed you've also looked at Ajax Tabs Content script right?

[/quote]

I hadn't, for some strange reason, but will.

Thanks for the heads up, not sure how I missed that one.

Thread: Reload original div content in Tab Content?

Thread Tools

Search Thread

Reload original div content in Tab Content?

Bookmarks

Bookmarks

Posting Permissions