TabView и проблема с кнопкой закрытия
Я пытаюсь сделать то же самое, что и Davs Rants Пример: http://blog.davglass.com/files/yui/tab3/
Но я должен кое-что забыть...
У меня есть эта ошибка:
Узел не найден " code: "8 [Сбой при этой ошибке] this._tabParent.removeChild( tab.get(ELEMENT));
Вот мой код:
function onGenePubmedSubmit() {
var contentCur = document.getElementById("curatedquery");
var contentValue = contentCur.value;
// New tabView widget
var tabView = new YAHOO.widget.TabView('tvcontainer');
// Define label and content
var labelText = nameReq + '<span class="close">X</span>';
var tabcontainer = idReq;
var content = "<div id="+tabcontainer+"></div>";
// Add new tab - work well !
if (labelText && content)
{
tabView.addTab( new YAHOO.widget.Tab({
label:labelText,
content:content,
id: 'pubmedView',
active:true }));
}
// Define DataTable myPubmedListTable Columns
var myColumnDefsPubmed = [
{key:"pmid", label:"PMID", sortable:true},
{key:"articletitle", label:"Article Title", sortable:true},
{key:"abstract", label:"Abstract", sortable:true},
{key:"authorlist", label:"Authorlist", sortable:true},
{key:"medline", label:"Medline", sortable:true}
];
// Define DataSource
var myDataSourcePubmed = new YAHOO.util.DataSource("qct-list-article.html");
myDataSourcePubmed.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSourcePubmed.connXhrMode = "queueRequests";
myDataSourcePubmed.responseSchema = {
resultsList: "articleItemList",
fields: ["pmid","articletitle","abstract","authorlist","medline"]
};
// myPubmedListTable config
var oConfigsPubmed = {
initialRequest: '?term='+ contentValue,
selectionMode: "single"
};
// Create new DataTable - myPubmedListTable
var myPubmedListTable = new YAHOO.widget.DataTable(idReq, myColumnDefsPubmed, myDataSourcePubmed,oConfigsPubmed);
// Show myPubmedListTable
myPubmedListTable.onShow();
// Remove tab on tabView ----------- this part don't work---------- !
YAHOO.util.Event.on(tabView.getElementsByClassName('close')[0], 'click', function(ev) {
YAHOO.util.Event.stopEvent(ev);
// some test - but don't work !
// tabView.set('activeTab', tabView.get('tabs')[0]);
// tabView.set('activeIndex', 1);
// tabView.removeTab(tabView.get("activeTab"));
tabView.removeTab(tabView);
});
}
Кто-нибудь может мне помочь?
Чего мне не хватает?
Спасибо.
3 ответа
Я нашел решение, которое работает, и я добавил paginator.
function onGenePubmedSubmit() {
var contentCur = document.getElementById("curatedquery");
var contentCurValue = contentCur.value;
var tabView = new YAHOO.widget.TabView('tvcontainer');
var labelText = nameReq + '<span class="close">X</span>';
var tabcontainer = idReq;
var content = "<div id="+tabcontainer+"></div>";
if (labelText && content)
{
var ctabView = new YAHOO.widget.Tab({
label:labelText,
content:content,
id: 'pubmedView'+idReq,
active:true });
}
YAHOO.util.Event.on(ctabView.getElementsByClassName('close')[0], 'click',
function(ev) {
YAHOO.util.Event.stopEvent(ev);
// Verify if Tab to remove is curently the activ Tab
if (tabView.get('activeTab')==ctabView)
{
// We activate the first Tab
tabView.set('activeTab', tabView.get('tabs')[0]);
}
// If Tab to remove not activ Tab
else if (tabView.get('activeTab')!=ctabView)
{
// We set the index of the Tab that is currently active in the TabView.
tabView.set('activeIndex',tabView.get('activeIndex'));
}
tabView.removeTab(ctabView);
});
// Verify if tab exist (or not)
var tabExist = document.getElementById('pubmedView'+idReq);
if (tabExist == null)
{
tabView.addTab(ctabView);
}
else
{
alert("Tab already exist") ;
}
// Define DataTable myPubmedListTable Columns
var myColumnDefsPubmed = [
{key:"pmid", label:"PMID", sortable:true},
{key:"articletitle", label:"Article Title", sortable:true},
{key:"abstract", label:"Abstract", sortable:true},
{key:"authorlist", label:"Authorlist", sortable:true},
{key:"medline", label:"Medline", sortable:true}
];
// Define DataSource
var myDataSourcePubmed = new YAHOO.util.DataSource("qct-list-article.html");
myDataSourcePubmed.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSourcePubmed.connXhrMode = "queueRequests";
myDataSourcePubmed.responseSchema = {
resultsList: "articleItemList",
fields: ["pmid","articletitle","abstract","authorlist","medline"],
metaFields: {
totalRecords: "totalArticleRecords" // Access to value in the server response
}
};
// Add Paginator
var pubmedPaginator = new YAHOO.widget.Paginator({
rowsPerPage: 5,
template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE,
rowsPerPageOptions: [5,10,15,20]
});
var myRequestPubmedBuilder = function(oState,oSelf)
{
oState = oState || {pagination:null, sortedBy:null};
var retstart = (oState.pagination != null) ? oState.pagination.recordOffset : 0;
var retmax = (oState.pagination != null) ? oState.pagination.rowsPerPage : 5;
return '?term=' + contentCurValue + '&retstart=' + retstart + '&retmax=' + retmax;
}
// myPubmedListTable config
var oConfigsPubmed = {
initialRequest: '?term=' + contentCurValue + '&retstart=0' + '&retmax=5',
dynamicData: true, // Enables dynamic server-driven data
selectionMode: "single",
paginator: pubmedPaginator,
generateRequest : myRequestPubmedBuilder,
caption : "Pubmed articles for this query : " //+ contentCountPubmed
};
// Create new DataTable - myPubmedListTable
if (tabExist == null)
{
var myPubmedListTable = new YAHOO.widget.DataTable(idReq, myColumnDefsPubmed, myDataSourcePubmed,oConfigsPubmed);
myPubmedListTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
if (oPayload == undefined)
{ oPayload = {}; }
oPayload.totalRecords = oResponse.meta.totalRecords;
return oPayload;
}
// Show myPubmedListTable
myPubmedListTable.onShow();
}
}
Я сделал некоторые изменения: теперь только один контент (первый контент теперь contentCur).
Но та же ошибка.
В моем коде: idReq определен как глобальный (это нормально - я могу добавить вкладки), у меня есть что-то вроде:
<div id=901></div>
Я думаю, проблема в (но что я пропустил?): YAHOO.util.Event.on(tabView.getElementsByClassName('close')[0], 'click', function(ev) { ...
Спасибо.
Кажется, здесь какие-то странные вещи; Я не вижу, где определяется idReq, а содержимое определяется дважды.
Интересно, что-то странное в контенте? <div id=></div>
может вызвать это.