Question

I have built a jquery tab that shows or hides the tab button if its content is empty or not.

Now, because of the pageload, I would like to only load the content when someone clicks on the tab button.

This is the code to check if there is content or not, and hide the tab if empty:

$j(function() {
    if ($j.trim( $j("#CONTENTDIV").html()) == "") {
        $j("li#TABBUTTON").hide();
    }
});

How do I make this load the content when clicked, but hide the tab button if it has no content?

Answer 1

If you want to delay loading the contents of the tab until it is clicked, then you cannot know (prior to clicking) whether or not the tab should be shown (has content) or not (has none).

Philosophically, you could create a lightweight, AJAX function that requests an (essentially) empty page that simply asks for whether there is any value in a database field and simply return true if there is any content — not the whole page. Then, on click, you could retrieve the contents.

Edit: This assumes, of course, that you can detect some value without retrieving the whole page.

Even if the request for the resources has to retrieve the whole amount, I believe the server should be able to access the resources more quickly than it would take to deliver the content to the user — particularly if the resources reside on the same server that is doing the checking. Regardless, since it is being done in AJAX, you can keep the tabs hidden and show them ($("#myTabID").show())as the lightweight, AJAX function discovers available content.