AJAX request to insert data into bootstrap popover

Question

I have an AJAX request that gets data from a page and should insert it into a bootstrap popover, but it does not work.

$(document).ready(function(){
  $('#req').popover({ 
    html : true,
    content: function() {
    $.ajax({
    url: "/requests",
    success: function(data){
        var page = $(data);
        var req = page.find('#reqP').html();
        console.log(req);
        return $(req).html();
        }
    });
    }
  });
});

This gets the data fine and logs to the console, but it does not show up in the popover. I'm new to JS, so I'm probably missing something obvious.

Also, in your answer if you could include why what I'm doing is not working, that would be great.

EDIT: I also tried to add return before the $.ajax(...) request, which didn't work.

I think this answer (http://stackoverflow.com/a/23193877/4316870) could help you. — Leandro Carracedo, Jan 27 '15 at 02:24
@PatrickLC With that, it needs to be modified to only get the content from the one div — Core, Jan 27 '15 at 02:28
@PatrickLC Can you look at my edits and see if you can better help me with the extra information? — Core, Jan 27 '15 at 02:46

score 3 · Accepted Answer · answered Jan 27 '15 at 04:01

This Bootply shows you how using your idea works for retrieving the login for the html Bootply landing page:

HTML:

<div class="container">
  <p>Test:</p>
  <div class="col-md-12 text-center">
     <a id="example" href="#" class="btn btn-primary">Show Bootply Login</a>
   </div>
</div>

JS:

$(document).ready(function(){
  $('#example').popover({ 
    html : true,
    content: function() { 
      var page= $.ajax(
        {url: 'http://www.bootply.com',
         async: false}).responseText;      
      var req = $(page).find('#menuLogin');
      return req.html();
    },
    placement:'bottom'    
  });
});

AJAX request to insert data into bootstrap popover

1 Answers1