Question

0

127

Vistas

When removing jquery ui tab programatically, can I renumber the remaining ids?

I am adding and removing jquery tabs programatically, with:

function addtab(input) {
     var num_tabs = $("div#tabs ul li").length + 1;
     $("div#tabs ul").append(
     "<li class='test' title = '" + input + "'><a href='#tab" + num_tabs + "'>" + input + "</a><span class='ui-icon ui-icon-close' role='presentation'></span></li>"
     );
     $("div#tabs").append(
          "<img id='tab" + num_tabs + "' src='<%=request.getContextPath()%>/Viewer_2D'; height='100%' width='100%'/>"
     );
     $("div#tabs").tabs("option", "active", num_tabs-1);
     $("div#tabs").tabs("refresh");
}

$(function() {
     $("#tabs").on( "click", "span.ui-icon-close", function() {
          var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
          $( "#" + panelId ).remove();
          tabs.tabs( "refresh" );
     });
});

If I add three tabs, and then remove the last tab, there is no problem when trying to add an additional tab- the id of the new tab will be 'num_tabs'. However, if I were to add three tabs, and then remove the first tab, then the tab with id=num_tabs already exists. How can I handle this? Can I renumber the tab ids after removing tabs?

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-10T12:38:05.916Z

You didn't mention this in your question, but I assume there isn't a need for the ID's to be sequential. What matters is that each ID is unique.

Instead of using num_tabs to determine the number of the tab, you could simply always increment the number (do not decrement it when deleting tabs).

This can be done in multiple ways, like...

Use a variable that keeps track of how many tabs you've added.
Use jQuery's data- syntax (see .data() to store the number of the tab as a value on the tab. By doing this, you can retrieve the number on the last tab and increment it to determine the number of the next tab.
Parse the id of the last-tab using a regex expression to retrieve the numeric value and increment that number when adding a new tab.