Tabs using jquery and ajax

Questions
1

I have three tabs that I are trying to get to load there own partial views when selected.

One of the tabs relies on details from the previous tab before being displayed.

I are trying to get the 2nd tab to display a partial view via jqery when the tab is clicked.

jqery looks like this

function TabItemClicked(a, action) {

    var container = $(a).parents('div.tabs');
    var resultDiv = $($(a).attr('href'), container);

    $.ajax({
        type: "POST",
        url: action,
        data: {},
        success: function(response) {
            resultDiv.html('');
            resultDiv.html(response);
        }
    });
}

tab structure as below

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using IBDModels.Models.IBDCustomComponentModels;
@using IBDControllers.Controllers;
@using IBDModels.Models;

@{

<div id="tabs">
    <ul>
        <li>
            <span>
                <a href="#tabs-1">
                    <img class="Cart-tabs ui-tabs-nav cart-img" />
                    Cart Products
                </a>
            </span>
        </li>
        
        <li>
                <span class="Cart-tabs ui-tabs-nav">
                    <a onclick="TabItemClicked(this,'@Url.Action("BillingDetails", "IBDCartSurface")')" href="#tabs-2">
                        <img class="Cart-tabs ui-tabs-nav billing-img" />
                        Billing
                    </a>
                </span>
            </li>
            <li>
                <span class="Cart-tabs ui-tabs-nav">
                    <a href="#tabs-3">
                        <img class="Cart-tabs ui-tabs-nav checkout-img" />
                        Submit Order
                    </a>
                </span>
            </li>
        
    </ul>


    <div id="tabs-1">
        @Html.Partial("IBDShoppingCart/IBD Cart Contents")
    </div>
        <div id="tabs-2">
        </div>
        <div id="tabs-3">
            @Html.Partial("IBDShoppingCart/IBD Order Submit")
        </div>
</div>
}

controller

    public ActionResult BillingDetails()
    {
        IBDBillingAddressModel Model = new IBDBillingAddressModel();
        var currentBasket = new basketItem();

        Model = currentBasket.GetCart().BillingAddress;
        return PartialView("IBDShoppingCart/IBD Billing Details", Model);
    }

So the controller is being triggered. But the partial view “IBD Billing Details” is not being displayed.

if I change

        <div id="tabs-2">
        </div>

to

        <div id="tabs-2"> Hello
        </div>

the hello is displayed only

Update I have established this error in the google console

“Failed to load resource: the server responded with a status of 500 (Internal Server Error)”

Note: I are running this on a local machine.

This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/99712-tabs-using-jquery-and-ajax