Twitter Bootstrap Popover and AJAX

Question

I been browsing SO for solutions on how to load an ajax content on bootstrap popover but can't find any decent solutions.

Here's what I have so far:

$(".btnCharge").click(function () {
    $("#boxPayment").fadeIn();
})
.popover({
    title: 'Advantages',
    html: 'true',
    content: function () {
        $.ajax({
            type: "POST",
            url: "Index.aspx/FindAdvantagesByCCID",
            data: '{"id": "' + 1 + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var json = jQuery.parseJSON(data.d);
                var html = '';
                $.each(json, function (i, item) {
                    html = html + '<a href="#"><i class="icon-ok"></i>' + item.Advantage + '</a><br />';
                });
            }
        });
    },
    placement: 'bottom',
    trigger: 'hover'
});

How can i add the ajax response to popover content? I tried "return" and doesnt work.

Any clean solutions?

score 10 · Answer 1 · edited May 23 '17 at 12:08

10

Yes. it is possible. And it has been answered already.

Using data- attributes you can provide the URL, like here:

<a href="#" title="blabla" data-ajaxload="/test.php">blabla</a>

Now the handler:

$('*[data-ajaxload]').bind('hover',function(){
  var e=$(this);
  e.unbind('hover');
  $.get(e.data('ajaxload'),function(d){
      e.popover({content: d}).popover('show');
  });
});

unbind('hover') prevents loading data more than once and popover() binds a new hover event. If you want the data to be refreshed at every hover event, you should modify this a bit.

edited May 23 '17 at 12:08

Community

1
1

answered Feb 06 '13 at 18:57

Praveen Kumar Purushothaman

164,888
24
203
252

1

how about the params? i need to pass parent id thru ajax call – Alexandre Feb 06 '13 at 19:04
Which params are you talking about? – Praveen Kumar Purushothaman Feb 06 '13 at 19:05
As I said, `data-ajaxload` is the parameter. Didn't you read the answer? – Praveen Kumar Purushothaman Feb 06 '13 at 19:07
1

Aint that the path for the call? Don't need to be rude :) – Alexandre Feb 06 '13 at 19:07
I am not rude. **Sorry**, if it sounded that way. Now, I don't get you. You wanted to load some data using AJAX, say from `/test.php`, and you need to give that way. This goes into the content of the Popover. :) – Praveen Kumar Purushothaman Feb 06 '13 at 19:09
I need to call a Webmethod. Say it Index.aspx/FindAdvantagesByCCID passing an ID parameter, just like the original question. take a look on my ajax call. THEN i'll add the result to the popover, but need to send the param. NP :D – Alexandre Feb 06 '13 at 19:11
1

Hey, just replace the line from `$.get(` till the first `});` with your code, `$.ajax(` till its `});`. :) Simple. Get it? – Praveen Kumar Purushothaman Feb 06 '13 at 19:13
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/24058/discussion-between-praveen-kumar-and-user1910498) – Praveen Kumar Purushothaman Feb 06 '13 at 19:14
Thanks, this really helped me out. Been fighting with this for quite awhile now. Keep in mind that instead of `get`, you can use `ajax` method and pass url through that parameter rather than data attribute. – EternalHour Oct 26 '17 at 02:10
@EternalHour You are welcome. **1.** `$.get` is a shorthand for `$.ajax`. Literally no difference. **2.** Passing the url is not okay in this case, because it's dynamic based on the popover selected. The URL for each event will be different. – Praveen Kumar Purushothaman Oct 27 '17 at 09:00

score 0 · Answer 2 · answered Aug 03 '13 at 12:27

You can directly access to popover option data like this:

popoverData = $('.myPopover').data('popover')

So, you can do this to change popover content since it cant be changed once it is set.

if (popoverData = $('.myPopover').data('popover'))
{
    popoverData.options.content = newContent;
}

$('.myPopover').popover({ content: newContent, html:true, trigger:'hover' }).popover("show");

score 0 · Answer 3 · answered Sep 05 '14 at 14:27

Your Html like this...

Id is present in your loop. You will use this value to retrieve additional information (ajax).

 <tbody data-bind="foreach:persons">
                <tr>
                    <td data-bind="text: id"></td>
                    <td data-bind="text: name"></td>
                    <td ><span data-bind="popOver: {content : $root.contentData, id: id}"</td>
                </tr>
            </tbody>

In your viewModel you have a variable - this variable is initially empty.

 var contentData = ko.observable();

Add a custom binding handler like:

> ko.bindingHandlers.popOver = {
>     init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
>         var value = ko.utils.unwrapObservable(valueAccessor());
> 
>         var options = {
>             placement: 'top',
>             title: "Title",
>             html: true,
>             trigger: 'manual',
>             content: value.content
>         };
> 
>         $(element).popover(options);
> 
> 
> 
> 
>         $(element).click(function () {
>             var id = value.id();
>             var response = myApp.GetAdditionalData(id);
>             value.content(response.content);
> 
>             $(this).popover('toggle');
>         });
>     } };

Outside your viewModel you will have a function making the ajax call:

 var GetAdditionalDataFromAjax = function (id) {
      return { "content": "some content returned by id"};

Twitter Bootstrap Popover and AJAX

3 Answers3