Geek Answers Handbook

Twitter Bootstrap Popover and AJAX

I was looking through SO for solutions on how to load ajax contents into bootstrap popover, but cannot find any suitable solutions.

Here is what I still have:

$(".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 an ajax response to popover content? I tried to "return" and does not work.

Any clean solutions?

+4
source share
3 answers

Yes. perhaps. And already answered .

Using the data- attributes, you can specify a URL, for example:

 <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 data from loading more than once, and popover () binds a new hover event. If you want the data to be updated with every hover event, you should change this a bit.

+10
source

You can directly access the popover option data as follows:

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

So, you can do this to change the contents of a popover, since it cannot be changed after it's installed.

 if (popoverData = $('.myPopover').data('popover')) { popoverData.options.content = newContent; } $('.myPopover').popover({ content: newContent, html:true, trigger:'hover' }).popover("show");
0
source

Your Html is like this ...

An identifier is present in your loop. You will use this value for more 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 Model view, you have a variable - this variable is initially empty.

  var contentData = ko.observable();

Add your own binding handler, for example:

 > 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 of your view model, you will have a function making an ajax call:

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

More articles:


All Articles