Question

I’m writing a user interface with that allows a user to upload a set of videos which are each shown on a separate tab in a page area. When a new video is uploaded or an existing one is deleted (both via AJAX), I want to update the tabs accordingly. I’m having trouble redrawing the tabs after they’re updated, and having no luck. Here’s what I’m doing:

The javaScript sends the request to the server like so:

function deleteVideo(id){
    $.post("video.php?action=deletevideo",
        {'id' : id},
        function(response){
            $('#videoTabs').html(response);
            $('#videoTabs').tabs();
        }
    );
}    

And on the PHP side, the request is handled like this:

switch($_GET['action']) {
    case 'deletevideo':
        try{
            $video = new videoClass($_POST['id']);
            $video->delete();
            draw_video_tabs();
        }catch(Exception $e){
            echo $e->getMessage();
        }
        break;

I can see that the code being sent back by the PHP script is exactly what I expect, and that “draw_video_tabs” function is the same one I use when I’m drawing the page in the first place (not using ajax). The HTML it’s giving me is exactly what it should be.

For some reason however, when it sends the reply back, the “#videoTabs” div is not getting tabbed. I instead see the straight HTML (a bullet list and a matching set of divs).

I also tried sending the response back as a JSON encoded object and inserting it into the body that way. That too gives me the right code, but with no tabbing.

So what am I missing here? I’m assuming that there’s some relatively easy way to create the tabs when content is loaded from an AJAX request. Note that it’s the entire tab set that I’m loading – not one tab. It’s being loaded into the the same div where it was already once generated on page load.

Answer 1

If you want to load all tabs, why not remove old html-markup and insert new? If only add and remove, then look this article: Adding and Removing Tabs with jQuery and jQuery UI

Added:
You can find all documentation on http://jqueryui.com/demos/tabs/ (tab methods)

.tabs( "destroy" )
.tabs( "add" , url , label , [index] )
.tabs( "remove" , index )