Using .detach() with multiple ajax elements on a page

Question

I'm loading content from a database into a page with jQuery ajax. I have multiple divs of content, but would only like to view one div at a time.

I've managed to successfully detach the elements from the dom, but I can not figure out how to manage multiple divs so that only 1 div shows at a time (while the others remain detached).

Below is my code, here is a Fiddle: http://jsfiddle.net/XkzUK/

HTML:

<nav>
<ul id="site-nav">
<li class="nav1"><a href="#recent">Recent</a></li>
<li class="nav2"><a href="#highlights">Highlights</a></li>
</ul>
</nav>

<div id="content-listing">

<div id="recent">
<ul class="top-level">
</ul>
</div><!--end recent-->

<div id="highlights">
<ul class="top-level">
</ul>
</div><!--end highlights-->

</div><!--end content-listing-->

JS:

var test; var test2
     //Recent $("#site-nav .nav1").on("click", function (event) {
    $("#site-nav li a").parents().removeClass("nav-active");
    $(this).addClass("nav-active");
    if(typeof test === 'undefined') {
        test = $("#recent ul.top-level").load('/echo/html/', { html: '<li>1</li> <li>2</li> <li>3</li>' }, function () {
            //$(this).show().siblings().detach();
            alert("I'm new");
        });
    } else {
        test.appendTo("#content-listing");
        alert("I'm old");
    }
    event.preventDefault(); });

//Highlights $("#site-nav .nav2").on("click", function(event) {
    //test = $("#recent").detach();
    $("#site-nav li a").parents().removeClass("nav-active");
    $(this).addClass("nav-active");
    if(typeof test2 === 'undefined') {
        test2 = $("#highlights ul.top-level").load('/echo/html/', { html: '<li>Apples</li> <li>Oranges</li> <li>Pears</li>' }, function () {
            //$(this).show().siblings().detach();
            alert("I'm new");
        });
    } else {
        test2.appendTo("#content-listing");
        alert("I'm old");
    }
    event.preventDefault(); });

CSS:

.nav-active,.nav-active a{background-color:#fff;color:#e84182 !important;outline:none;}
.sub-active,.sub-active a{background-color:#fff;color:#e84182 !important;border:dotted 1px pink;border-width:1px 0 ;margin:-1px 0;outline:none;/*background:url(/assets/img/icon-branch.png) 2% 5px no-repeat #fff;*/}

#content-listing{background-color:#ea528d;}/*230px*/
#content-listing ul.top-level ul li{margin-left:5.882352941176%}
#content-listing li a{font-size:.8125em;line-height:1em;text-decoration:none;padding:2px 0;display:block;text-indent:2.678571428571%;outline:none;}
.visited{color:#ccc;}

#content-listing ul{z-index:4;position:relative;}/*230px*/
#content-listing ul.top-level{margin-top:5.3125em/*85px*/;}
#content-listing ul.top-level ul li{margin-left:6.521739130435%;}
#content-listing{width:29.113924050633%;float:left;padding-bottom:20010px;margin-bottom: -20000px;}
#content-listing li a{text-indent:6.521739130435%;/*15px*/}

And jsFiddle: http://jsfiddle.net/XkzUK/

Samuel Rossille · Accepted Answer · 2012-05-31T16:37:31.543

1

If you want to fix this code, when attaching a tab body, you should also detatch the other tab if it has already been initialized.

if(test2) test2.detach()

A more generic code would be:

for(var i = 0; i < tabs.length; i++) {
    if(i != tabIndexToShow && tabs[i] != null) {
        tabs[i].detach()
    }
}

http://jsfiddle.net/nLMas/1/

BUT, you should seriously consider using JQuery UI tabs (for example) which does what you are trying to do.

And also, please, clean, indent and comment your code before posting here (or better, all the time ;=)

edited May 31 '12 at 16:37

answered May 31 '12 at 15:57

Samuel Rossille

18,940
18
62
90

Thanks, that sort of works but not for the initial clicks. You'll notice both tabs are present on the first click but go away after successive clicks: http://jsfiddle.net/XkzUK/1/. Also, jQuery UI tabs uses detach()? In other words, will jQuery UI tabs reload the content from the database? That is what I am trying to avoid. – Yahreen May 31 '12 at 16:06
JQuery Ui tabs uses display = none to hide tabs, which is fine. It doen't recreate the tab each time. You have a lot of options, just browser the demo. As for the initialization, i updated my answer and your fiddle – Samuel Rossille May 31 '12 at 16:13
Thanks, that works great. If I wanted to add 2 more tabs, how could I mange that with your revised code? Such as here: http://jsfiddle.net/XkzUK/3/ – Yahreen May 31 '12 at 16:24
It seems to work. However, if you choose not you use JQuery UI Tabs, you should seriously think about a way to reuse your code rather than copy / pasting the same lines over and over. For instance you could think about an array of tabs, and loops over the elements of this array... but this would be a bit like rewriting jQuery UI tabs – Samuel Rossille May 31 '12 at 16:27
Right, that's partially what I'm asking. I'd like to turn this into a function but I'm wondering how I could accomodate more tabs with your revised code? `if(test2) test2.detach();`, etc? If you click around in Fiddle v3, the tabs fall apart because I'm uncertain how to take into account the additional tabs? – Yahreen May 31 '12 at 16:34
Sorry, could you check out this Fiddle? I'm having trouble getting it to work: http://jsfiddle.net/XkzUK/4/ – Yahreen May 31 '12 at 17:01

Using .detach() with multiple ajax elements on a page

1 Answers1