CODEWITHSUNDEEP
javascriptjqueryajaxasp.net-mvctwitter-bootstrap-3
ʃʈɑɲ
ʃʈɑɲ

Reputation: 2684

Bootstrap Popover with Ajax call not showing data

I can't seem to update the popovers contents with Ajax result.

ASP.Net (MVC4):

public ActionResult GetEmployeeDetails(string employeeId)
        {
            var contract = UnitOfWork.ContractRepository.ContractBusinessManager.GetContract(int.Parse(employeeId), DateTime.Now);

            return PartialView("_EmployeeDetails", contract);
        }

Html:

<a data-toggle-popup-employee-id="@evaluation.EmployeeId" >@evaluation.Employee.FullName.ToTitle()</a>

Javascript:

$(document).ready(function () {
        $('[data-toggle-popup-employee-id]').popover(
        {
            html: true,
            placement: 'top',
            title: 'Title',
            container: 'body',
            content: function () {
                //$(this).off('hover');
                var employeeId = $(this).data('toggle-popup-employee-id');
                $.ajax({
                    async: false,
                    url: '@Url.Action("GetEmployeeDetails", "Evaluation")',
                    data: { employeeId: employeeId },
                    success: function (result) {
                        return result;
                        //var html = result;
                        //$(this).contents.html = result;
                    },
                    error: function (xhr) {
                        alert(xhr.responseText);
                    }
                })
            },
            trigger: 'hover'
        });
});

The call works fine and gives back the partial result as html but the popovers content is still empty...

UPDATE:

It appears that every time I hover over the link, 10 [Object, HTMLAnchorElement] are added directly to the $('[data-toggle-popup-employee-id]'). Each object has InnerText and InnerHtml set to the employees name...?

Upvotes: 1

Views: 1798

Answers (2)

coder771
coder771

Reputation: 368

$('.popover.in .popover-inner').html(data);

Upvotes: 0

heymega
heymega

Reputation: 9391

I'd personally do something like the following...

$(document).ready(function () {


    $('[data-toggle-popup-employee-id]').on({
        mouseenter: function () {

            var originator = $(this);

            var employeeId = originator.data('toggle-popup-employee-id');

            $.get('@Url.Action("GetEmployeeDetails", "Evaluation")', { employeeId: employeeId }, function (data) {

                originator.popover({
                    html: true,
                    placement: 'top',
                    title: 'Title',
                    container: 'body',
                    content: data,
                }).popover('show');

            })

        },
        mouseleave: function () {

            //
            // Destroy so the data will referesh
            //
            $(this).popover('destroy');

        }
    });

});

This way we are initialising the popover in the callback of the ajax request.

Hope this makes sense.

Upvotes: 3

Related Questions