Question

the jquery ui tabs remote data fetch features is great, however I am having difficulty bending it to my will.

I followed the documentation to get it to fetch remote data through ajax calls with the following code:

    $(function(){

    // Tabs
        $('#tabs').tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html("Couldn't load rankings" );
                }
            }
        });           
    });

and

    div id="tabs">
        <ul>
            <li><a href="ajax/firstcall">first</a></li>
            <li><a href="ajax/secondcall">second</a></li>
        </ul>
    </div>

The feature works great, but the response from the ajax calls are dumped directly into the display area of the tab when a tab is selected. Is there a way to use Mustache to render a template from the ajax response? I tried to mess with the success .ajax function from jquery, but it seems loading the raw content still occurs.

Thanks

Answer 1

If it’s possible, can I have a look at your attempt at using the success ajax option? I suggest you grab the existing HTML content when the ajax request is successful then run it through Mustache.to_html() and add it back into the content area. So, something like:

success: function( data ){
    // Get selected tab index
    var selected = $('#tabs').tabs().tabs('option', 'selected');
    // Use index to form ID for selector and replace content
    $('#ui-tabs-'+selected).html(Mustache.to_html(data, {mustache: 'Test View'}));
}

That’s assuming you have a template with a {{mustache}} tag – in the code above, it would be replaced with “Test View”.