populating popover bootstrap с вызовом webservice

Question

Я хочу заполнить popover (из бутстрапа) веб-сервисом, который вызывается AJAX.

Я пробовал:

$.ajax({ 
    type: "POST", 
    url: "myURL?action=fetchData&ID=123", 
    success: function(msg) { 
     $('.key_cal').popover({ 
      title:"User Profile", 
      placement:'right', 
      content:"<h5>Name: "+msg[0].firstName+"</h5>", 
      html: true 
     }); 
    } 
}); 

Но мне нужно позвонить AJAX внутри пирог, чтобы заполнить содержание, но я понятия не имею,; не могли бы вы мне помочь?

Теперь вместо идентификатора hardcoding в моем URL-адресе (AJAX) с 123 Я хочу использовать идентификатор элемента, который вызывается для popover. (Я передал идентификатор каждого элемента в качестве ключа)

Большое спасибо заранее.

Answer 1

$('.key_cal').on('click', function (e) { 
    e.preventDefault(); 

    var id = this.id; 
    var $this = $(this); 

    $.ajax({ 
     type: "POST", 
     url: "myURL?action=fetchData&ID=" + id 
    }).done(function (msg) { 
     $this.popover({ 
      title: 'myTitle', 
      content: function() { 
       return "<h5>Name: " + msg[0].firstName + "</h5>"; 
      }, 
      html: true 
     }).popover('show'); 
    }); 
}); 

Надеется, что это помогает, но я не уверен, почему вы посылаете данные по URL (строка запроса) для запроса POST? Вместо этого вы можете указать его как data объект вызова ajax.

Answer 2

Вам необходимо предоставить каждому ключевому какому-либо классу, в котором вы используете popover, а не стрелять по AJAX.

$(document).ready() { 
    $(".key-cal").hover(setPopover); 
} 

function setPopover() { 
     var myTitle = ""; 
     var myContent = ""; 
     var myHtml = true; 
     $.ajax({ 
      // Go grab your data 
      data: 'id=' + $(this).prop('id'), 
      success: //Set your variables 
     }); 
     $(this).popover({ 
      title: myTitle, 
      content: myContent, 
      html: true 
     }).popover('show'); 
    }, function() { 
     $(this).popover('hide'); 
    }); 
} 

Это не лучший или самый эффективный способ, но он должен сделать для вас приличный смысл и позволить вам отправиться оттуда. Пожарайте pop-ajax-вызов при наведении, установите данные, а затем покажите popover.