Twitter Bootstrap Liste et AJAX

J'ai été la navigation DONC pour des solutions sur la façon de charger un contenu ajax sur bootstrap liste, mais ne peut pas trouver tout décent solutions.

Voici ce que j'ai à ce jour:

$(".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'
});

Comment puis-je ajouter de l'ajax en réponse à la liste de contenu? J'ai essayé le "retour" et ne fonctionne pas.

Tout nettoyer solutions?

OriginalL'auteur Alexandre | 2013-02-06

  1. 10

    Oui. il est possible. Et il a été répondu déjà.

    À l'aide de data- attributs que vous pouvez fournir l'URL, comme ici:

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

    Maintenant le gestionnaire de:

    $('*[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') empêche le chargement de données plus d'une fois et la fenêtre pop-over() crée une nouvelle hover événement. Si vous voulez que les données soient actualisées à chaque hover cas, vous devez modifier un peu tout ça.

    comment au sujet de la params? j'ai besoin de passer parent id thru appel ajax
    Qui params parlez-vous?
    pour l'appel ajax.
    N'est-ce pas que le chemin d'accès pour l'appel? N'avez pas besoin d'être grossier 🙂
    Hey, il suffit de remplacer la ligne de $.get( jusqu'à la première }); avec votre code, $.ajax( jusqu'à son });. 🙂 Simple. Pour l'obtenir?

    OriginalL'auteur Praveen Kumar Purushothaman

  2. 0

    Vous pouvez accéder directement à la liste de données de l'option comme ceci:

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

    Vous pouvez faire pour modifier la liste de contenu, car il ne peut pas être changé une fois qu'il est réglé.

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

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

    OriginalL'auteur Djuki

  3. 0

    Votre Html comme ceci...

    Id est présent dans votre boucle. Vous allez utiliser cette valeur pour récupérer des informations supplémentaires (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>

    Dans votre viewModel vous disposez d'une variable
    - cette variable est initialement vide.

     var contentData = ko.observable();

    Ajouter une liaison personnalisée gestionnaire:

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

    À l'extérieur de votre viewModel, vous aurez une fonction qui effectue l'appel ajax:

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

    OriginalL'auteur JeppePepp