CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrap
Core
Core

Reputation: 335

AJAX request to insert data into bootstrap popover

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.

Upvotes: 0

Views: 356

Answers (1)

Leandro Carracedo
Leandro Carracedo

Reputation: 7345

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'    
  });
});

Upvotes: 3

Related Questions