Bootstrap彈出窗口並使用ajax和django加載內容

我知道它已經給出了一些答案，但我會去爲它:)。正如標題所說，我想添加popover bootstrap，但使用ajax加載的內容。我的HTML，但我想要一個加載消息先出現，然後是內容。Bootstrap彈出窗口並使用ajax和django加載內容

<p class='entry' data-adjaxload = '/calendar/entry/1'>Title1</p> 
<p class='entry' data-adjaxload = '/calendar/entry/2'>Title2</p> 
<p class='entry' data-adjaxload = '/calendar/entry/3'>Title3</p>

我的Django的看法是以下

def entry_details(request, entry_id): 
    entry = get_object_or_404(Entry, pk=entry_id) 

    args = dict(entry=entry, user=request.user) 

    if request.is_ajax(): 
     return render_to_response('mycal/ajax/entry_details.html', args) 
    else: 
     entry_form = EntryForm(instance=entry) 
     args.update(entry_form=entry_form) 
     return render_to_response('mycal/entry_details.html', args)

很簡單。我通過AJAX使用的酥料餅要麼加載HTML內容相同的看法，或通過正常的GET請求詳細信息頁面

阿賈克斯詳情頁：

<div class="entry"> 
    <p>{{entry.title}}</p> 
    <p>{{entry.date}}</p> 
    <p>{{entry.customer}}</p> 
</div>

和腳本

$(document).ready(function(){ 
    $('p.entry').each(function(){ 
     var i = $(this);    
     $(i).bind('mouseenter', function(){ 
      i.popover({ 
       html:True, 
       title:i.html(), 
       content:'Loading' 
      }).popover('show');      
      $.ajax({ 
       url:i.data('ajaxload'), 
       dataType:'html', 
       success:function (data){ 
         i.popover({content:data}).popover('show'); 

        } 
      }); 
     }); 
     $(i).bind('mouseleave', function(){ 
      i.popover('hide'); 
     }); 
    }); 
});

雖然它運行臨時文件並獲取html，但它不會將它們加載到彈出窗口。我該如何改變它？

來源

2013-11-21 Apostolos

既然你已經宣佈'i'作爲'$（本）'，你不必將其封裝再次以$爲單位。 –

謝謝。但仍然不能解決我的問題。但是我按照你的建議從代碼中刪除了$ – Apostolos

嘗試刪除'.popover（'show'）'因爲調用'popover（{options}）'會顯示popover。 –

Just fiddled您在尋找彈出式內容正在使用echo/json動態更新的內容。

只需滾動p元素並等待3秒延遲。

如果像你說的，該數據被正確加載，然後需要唯一的變化是：

var popover = i.data('popover'); 
popover.options.content = data.text;  
i.popover('show');

來源

2013-11-21 12:48:38

我這樣做，但我返回undefined ... i.data （'popover'）給了我上面的代碼未定義。新增了rel =「popover」，但仍未定義。 Bootstrap 3是我使用的。正如我在生成的代碼（開發人員控制檯）中看到的，沒有在我的p元素 – Apostolos

中添加數據彈出窗口值，所以引導程序3就是這樣！在這種情況下，你是初始化工具提示類[見這裏]（http://stackoverflow.com/questions/18410887/bootstrap-3-tooltips-or-popovers-doesnt-work）？如果這不起作用，那麼刪除數據內容屬性，並且每次使用彈出式內容選項將popover內容作爲'.popover（{「content」：「New Text goes here」）;' –

我會「初始化」當鼠標進入p元素（第一篇文章）時彈出對話框或者我應該在與mouseenter進行綁定之前做$（「p.entry」）。popover（） – Apostolos

Bootstrap彈出窗口並使用ajax和django加載內容

回答

相關問題