在不使用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应该是唯一的。

我仍在尝试了解您的样式问题。