在不使用AJAX的情況下更新Kendo UI TabStrip內容的問題？

我有一個小控制檯，顯示在我的網站中的某些行動的輸出，需要有另一個控制檯，將顯示不同類型的輸出，使我想結合兩個控制檯在Kendo UI TabStrip，事情是，在控制檯上顯示的信息沒有通過AJAX收到，所以當我開始像以前那樣插入HTML元素時，該選項卡沒有得到更新。在不使用AJAX的情況下更新Kendo UI TabStrip內容的問題？

這是我的初始化標籤：

$('#tabConsole').kendoTabStrip({ 
     animation: { 
      open: { 
       effects:'fadeIn' 
      } 
     } 
    });

這是我的HTML的外觀：

<div id="tabConsole"> 
     <ul> 
      <li class="k-state-active">Salida</li> 
      <li id="notificacionTab">Notificaciones</li> 
     </ul> 
     <div id="userConsole"></div> 
     <div id="notificationConsole"></div> 
</div>

這是我嘗試更新它：

function appendToConsole(content, type, optional) { 
//code to append to console 
    var actualDate = new Date(); 
    var prevContent = $('#userConsole').html(); 
    if (typeof prevContent === 'undefined') { 
     prevContent = ''; 
    } 
    var strType = ''; 
    var iconType = ''; 
    var moreOutput = ''; 
    if (type == 1) { 
     strType = 'infoConsole'; 
     iconType = 'infoIcon.png'; 
    } else if (type == 2) { 
     strType = 'warningConsole'; 
     iconType = 'warningIcon.png'; 
     moreOutput = '<img id="viewDetails" value="' + optional + '" class="moreConsole" src="../Content/images/icons/arrow.png">'; 
    } else if (type == 3) { 
     strType = 'errorConsole'; 
     iconType = 'errorIcon.png'; 
    } 
    var iconOutput = '<img class="iconConsole" src="../Content/images/icons/' + iconType + '">'; 
    var dateOutput = '<div class="dateConsole">' + iconOutput + ' ' + actualDate.toLocaleDateString() + ', ' + actualDate.toLocaleTimeString() + ' : </div>'; 
    var consoleOutput = prevContent + '<div class="outputConsole">' + dateOutput + content + moreOutput + '</div>'; 
    $('#userConsole').html(consoleOutput.toString()); 
    var height = $('#userConsole')[0].scrollHeight; 
    $('#userConsole').scrollTop(height); 
//my try to update the tab 
    var tabStrip = $('#tabConsole'), 
     selectedIndex = tabStrip.data('kendoTabStrip').select().index(), 
     clone = original.clone(true); 
    clone.children('ul') 
    .children('li') 
    .eq(selectedIndex) 
    .addClass('k-state-active') 
    .end(); 
    tabStrip.replaceWith(clone); 
    $('#tabConsole').kendoTabStrip({ 
     animation: { 
      open: { 
       effects: 'fadeIn' 
      } 
     } 
    }); 
}

如何我可以更新TabStrip內DIV的內容嗎？

編輯

看來劍道UI重新命名的DIV IDS表示的選項卡tabConsole-1和tabConsole-2，解釋爲什麼更新不工作，仍然有很多的奇怪的行爲，我必須指定每個DIV的高度，以便溢出propety可以工作，也可以使用編號爲的視圖詳細信息和類更多控制檯當設置爲絕對位置時，將獲取呈現在表示選項卡的DIV之外，但如果更改將屬性定位到相對位置，圖像會保留在DIV中，但不會像DIV所示那樣顯示在DIV的末尾，但相對於DIV的大小在他們面前的DIV。

我真的很困惑如何設置樣式，以便正確顯示內容。

$(tabConsole.contentElement(idx)).append(newContent)

其中：

來源

2013-04-09 Uriel Arvizu

將內容添加到tabStrip可以使用實現

idx是標籤索引，
newContent是要添加到現有的內容是什麼，並
tabConsole是變量設置爲$("#...").kendoTabStrip(...).data("kendoTabStrip");。

你並不需要創建一個新的標籤欄（除了你不應重新創建KendoUI元素，因爲這是一個非常昂貴的操作）。

關於使用同一個id的多個標籤...您不應該使用它，請改爲使用class。 id s應該是唯一的。

我仍試圖理解你的造型問題。

來源

2013-04-09 20:45:39 OnaBai

例如，當我將類型爲moreConsole的圖像設置爲新內容中的位置屬性爲絕對值時，所述圖像位於TabStrip之外，此時它應位於其各自的DIV父級內。 – 2013-04-09 20:56:13

如果它是絕對的，它是絕對的:-)我準備提出我提議的解決方案的小提琴隨時發表評論，我們可以改進它。 – OnaBai 2013-04-09 20:57:30

在此處查看http://jsfiddle.net/OnaBai/kwyvK/ – OnaBai 2013-04-09 21:02:33

在不使用AJAX的情況下更新Kendo UI TabStrip內容的問題？

回答

相關問題