Display details on Bootstrap Modal using jQuery AJAX in ASP.Net MVC

Hello all,

I currently have a modal that shows up and I have a JSON object that gets passed into my controller from javascript and comes back in the success .ajax() part of my method correctly populated.

I thought I would be able to populate my modal with this object pretty easily but im thinking its showing the old modal that I call first and maybe it populates it but when I call $('#modalInnerSQ').modal('show');

it doesn't open.

I know i am extremely close to having this I just want to populate my modal so I can update it in the database afterwards.

<td>
    <input type="button" class="btn btn-danger openModal" data-toggle="modal" data-target="#modalInnerSQ"
        data-tst="@Model.ListQuotes[i].QuoteID" value="ClickMe" />
</td>

[HttpPost]
public JsonResult GetServiceQuote(int? id)
{
    if (id == null) { return null; }

    var vm = new ServiceReportViewModel();
    var model = context.Serv_Quotes.Where(x => x.QuoteID == id).FirstOrDefault();
    if (model.EmployeeID != null)
    {
        var employee = context.Employee_Main.Where(z => z.EmployeeID == model.EmployeeID).FirstOrDefault();
        vm.EmpID = employee.EmployeeID.ToString();
        vm.EmpFirstName = employee.FirstName;
        vm.EmpLastName = employee.LastName;
        vm.EmpPosition = employee.Position;
        vm.EmpEmail = employee.Email;
    }
    vm.QuoteID = model.QuoteID;
    vm.CustomerID = model.CustomerID.ToString();
    vm.CustomerName = model.CustomerName;
    vm.MachineCount = model.MachineCount;
    vm.MachinePrice = model.PricePerMachine;
    vm.MachineAddress = model.Address;
    vm.MachineCity = model.City;
    vm.MachineState = model.State;
    vm.MachineZipCode = model.ZipCode;
    vm.MachineCountry = model.Country;
    vm.ExpirationDate = model.ExpirationDate;
    vm.ListOfSN2s = model.ListOfSN2s;
    vm.ContactID = model.ContactID.ToString();
    vm.ContactName = model.ContactName;
    vm.ContactPhone = model.ContactPhone;
    vm.ContactEmail = model.ContactEmail;

    return Json(vm, JsonRequestBehavior.AllowGet);
}

$('.openModal').on('click', function () {
    var quoteid = $(this).attr("data-tst");
    $.ajax({
        type: "POST",
        url: '/Service/GetServiceQuote/',
        contentType: "application/json; charset=utf-8",
        data: { "id": quoteid },
        datatype: "json",
        success: function (data) {
            alert('in success');
            var cnam = data.CustomerName;
            alert(cnam);
            //alert(data.CustomerName);
            //$('#ServiceVM_CustomerName').val(data.CustomerName);
            $('#ServiceVM_MachineCity').html(cnam);
            $("ServiceVM_MachineCity ").html(data.MachineCity);
            //$("#ServiceVM_MachineState").innerHTML(data.MachineState);
            document.getElementsByName("ServiceVM_MachineZip").value = data.MachineZip;
            //$('#modalInnerSQ').modal('show');
        }
    })
})

//$('#modalInnerSQ').on('show.bs.modal', function (e) {
//    $('#ServiceVM_MachineAddress').innerHTML = "tst";
//    $('#ServiceVM_MachineCity').text = "tst";
//    $('#ServiceVM_MachineState').val = "tst";
//    $('#ServiceVM_MachineCountry').html = "tst";
//});