0

ページ分割された大きなテーブルがあります。各行には、クライアントとその情報が表示されます。AJAX 呼び出しを使用して、クライアントへのメモがあるかどうかを確認します。

クライアントへのメモがある場合、アイコンが追加されます。この通知アイコンの単なるプレースホルダーである の内部 html として追加されます。アイコンをホバリングすると、Twitter ブートストラップ ポップオーバーで使用可能なメモが表示されます。

改行を除いて正常に機能する<br>か<br />、実際には改行せずにポップオーバーに通常のテキストとして表示されます。静的ポップオーバーでは常に機能していたため、ページの読み込み後に追加されたことが原因である可能性があります。

検索を通じて、渡す必要があることがわかりましたhtml : trueが、役に立ちません。ポップオーバーが動的に追加されたポップオーバーでレンダリングする HTML 改行を取得するにはどうすればよいですか?

メモのプレースホルダーには、次のマークアップがあります。

<span class="notitieIndicatie" id="519de1b978b55"></span>

ajax をロードする JavaScript は次のようになります。

<script type="text/javascript" language="JavaScript">        
$(document).ready(function()
{        
    function getMessageAjax(uniqid)
    {
        var notes = "";
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data:
            {
                action: 'getNotes',
                uniqid: uniqid,
                cache: false
            },
            success: function(data)
            {
                if (data != 'NULL')
                {
                    var theValues = $.parseJSON(data);                        
                    $.each(theValues, function(key, value)
                    {
                        notes += '&bull;'+value['n_kort']+'<br>';
                    });                        
                    var popover = '<img src="images/icons/icon-info.gif" class="notepopover" data-content="'+notes+'" data-placement="bottom" data-original-title="" />';
                    $('#'+uniqid).html(popover);                        
                    $('body').popover({
                        selector: '.notepopover',
                        trigger: "hover",
                        html : true
                    });
                }
            }
        });
    }

    $('.notitieIndicatie').each(function(i, obj) {        
        getMessageAjax(this.id);
    });

});

4

1 に答える 1

0

解決策は、使用を避けdata-content、代わりに html 文字列を値として popover 呼び出しに渡すことでした。content

<script type="text/javascript" language="JavaScript">
$(document).ready(function()
{
    function getMessageAjax(uniqid)
    {
        var notes = "";
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data:
            {
                action: 'getNotes',
                uniqid: uniqid,
                cache: false
            },
            success: function(data)
            {
                if (data != 'NULL')
                {
                    var theValues = $.parseJSON(data);

                    var notesHTML = '<ul>';
                    $.each(theValues, function(key, value)
                    {
                        notesHTML += '<li>'+value['n_kort']+'</li>';
                    });
                    notesHTML += '</ul>';

                    var html = $('<img src="images/icons/icon-info.gif" class="notepopover" />');
                    $('#'+uniqid).append(html);

                    html.popover({
                        placement: "bottom",
                        trigger: "hover",
                        content: notesHTML,
                        html : true
                    });


                }
            }
        });
    }

    $('.notitieIndicatie').each(function(i, obj) {
        getMessageAjax(this.id);
    });

});

于 2013-05-24T09:10:53.293 に答える