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

Question

我有一個小的控制台，用於顯示網站中某些操作的輸出，需要另一個控制台來顯示不同類型的輸出，這使我想將兩個控制台組合在Kendo UI TabStrip中，問題是顯示的信息AJAX不會在控制台上收到該文件，因此當我像以前一樣開始插入HTML元素時，該選項卡沒有得到更新。

這是我初始化選項卡的方式：

    $('#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的內容？

編輯

Kendo UI似乎將表示選項卡的DIV的ID重命名為tabConsole-1和tabConsole-2，解釋了為什么更新不起作用，仍然有很多奇怪的行為，我必須為每個DIV指定高度，所以溢出屬性將起作用，ID為viewDetails和class moreConsole的圖像也設置為絕對位置時，將在表示選項卡的DIV外部進行渲染，但是如果將position屬性更改為relative，則圖像將保留在DIV內，但不會顯示就像我想要的那樣位於DIV的末尾，但是相對於它們之前的DIV的大小。

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

Answer 1

可以使用以下方法將內容添加到tabStrip ：

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

哪里：

• idx是標簽索引，
• newContent是您想要添加到現有內容中的內容，
• tabConsole是設置為$("#...").kendoTabStrip(...).data("kendoTabStrip"); 。

您不需要創建新的tabStrip（此外，您不應重新創建KendoUI元素，因為這是一項非常昂貴的操作）。

關於使用具有相同id多個標簽...您不應使用它，而應使用class 。 id應該是唯一的。

我仍在嘗試了解您的樣式問題。