jQuery UI tabs not working after Ajax call

Question

I've got a map with a few markers on them. When a marker is clicked, info regarding that specific marker is loaded into an info box. The info loaded is divided into 3 categories namely information, documents and financials.

To make browsing through these 3 categories easy, I used jQuery UI tabs to switch between the categories. Everything in the info box is built using jQuery. Reason for this is that the info box can take any type of information and not only populates when one of these markers are clicked.

To populate this info box, I use Ajax. After the ajax call, I do the jQuery tabs call. It works fine the first time you click on a marker and the box is populated. However, on the second go, it doesn't do anything. It just shows my bullet list there.

Here is my code:

function getinfo(id) {
    $.ajax({
        url: "view/"+id,
        type: "post",
        beforeSend: function() {
            $('#info').html("<img src='../img/loading.gif' style='padding:20px'/>");
            $('#info').css('text-align','center');
        },
        success: function(data) {
            $('#info').css('text-align','left');
            data = JSON.parse(data);
            var tabs = $('<ul></ul>').append(
                $('<li></li>').append($('<a></a>').attr('href','#information').text('Information'))).append(
                $('<li></li>').append($('<a></a>').attr('href','#documents').text('Documents'))).append(
                $('<li></li>').append($('<a></a>').attr('href','#financial').text('Financial'))
            );

            var information = $('<table></table>').attr({
                cellpadding : 0,
                cellspacing : 0,
                width       : '298px',
                id          : 'information'
            });
            var documents = $('<table></table>').attr({
                cellpadding : 0,
                cellspacing : 0,
                width       : '298px',
                id          : 'documents'
            });
            var financial = $('<table></table>').attr({
                cellpadding : 0,
                cellspacing : 0,
                width       : '298px',
                id          : 'financial'
            });

            $.each(data.Clinic,function(index, value) {
                if(index == 'street_address') value = value.replace(/UNAVAILABLE,/g, "").replace(/,/g, "<br/>");
                if(index == 'id') return true;
                var row = $('<tr></tr>');
                row.append($('<td></td>').html('<b>' + index.ucwords() + '</b>')).append($('<td></td>').html(value));
                information.append(row);
            });

            if(data.doccount > 0) {
                var row = $('<tr></tr>');
                $.each(data.docs,function(index,value) {
                    var divClass = fileObject[value.ext] != 'image' ? 'document-show infoimage' : 'document-show';
                    row = $('<tr></tr>').append(
                        $('<td></td>').append(
                            $('<img>').attr('src','../img/icon/file_extension_' + value.ext + '.png')
                        ).append(
                            $('<a></a>').attr('href','Documents/' + value.real).addClass(divClass).text(value.name)
                        )
                    );
                    documents.append(row);
                });
            }
            financial.append(
                $('<tr></tr>').append(
                    $('<td></td>').append(
                        $('<a></a>').attr(
                            'href','../clinics/profile/'+data.view.id
                        ).html(
                            'View Financial Data'
                        )
                    )
                )
            );

            $('#info').html(tabs).append(information).append(documents).append(financial);
        },
        complete : function(e){
            $('#info').tabs();
        }
    });
}

And this is the result:

After the first call -

If I click another marker -

Answer 1

When you fill the #info div with new html you do not reset the data attributes belonging to the div. These data attributes store the state of the tabs and need to be reset when you fill in new tabs as html.

You can use either the destroy method or the refresh method of jquery-ui-tabs. (See the documentation for destroy and refresh.)