Jquery - trying to delete existing tabs which were dynamically added

SmithJonas
March 9, 2024
178 views
0 votes
2 Answers

Here i am in a situtation where i am trying to add the dynamic tabs to the existing tabs but also if that link or popup is agai opened, i am trying to make sure it does not duplicate the tabs, my current code is doing as such as of now

Here is my html and my jquery code

function loadbtns(dataAttributes) {
  $.ajax({
    url: "x.cfm?section=11",
    type: 'POST',
    data: dataAttributes,
    dataType: 'json', 
    
    success: function(response) {
      console.log(response);
      if(Object.keys(response).length > 0) {

        $('#tabs').find("li.addedDynamic").each(function() {
          $(this).remove();
        });
        var tabTitle1 = response.title1; // replace with how you access your title in data
        var tabContent1 = response.msg1 + "n" + response.label1 + "n" + response.textData1 + "n" + response.content1; // replace with how you access your content in data
        var tabTitle2 = response.title2;// replace with how you access your title in data
        var tabContent2 = response.msg2 + "n" + response.label2 + "n" + response.textData2 + "n" + response.content2; // replace with how you access your content in data

        var tabTemplate = "<li><a class='addedDynamic' href='#{href}'>#{label}</a></li>";
        var id1 = "tabs-" + ( $("#tabs li").length + 1 );
        var id2 = "tabs-" + ( $("#tabs li").length + 2 );

        var li1 = $( tabTemplate.replace( /#{href}/g, "#" + id1 ).replace( /#{label}/g, tabTitle1 ) );
        var li2 = $( tabTemplate.replace( /#{href}/g, "#" + id2 ).replace( /#{label}/g, tabTitle2 ) );

        $("#tabs").find( ".ui-tabs-nav" ).append( li1 );
        $("#tabs").append( "<div id='" + id1 + "'>" + tabContent1 + "</div>" );

        $("#tabs").find( ".ui-tabs-nav" ).append( li2 );
        $("#tabs").append( "<div id='" + id2 + "'>" + tabContent2 + "</div>" );

        $("#tabs").tabs( "refresh" );
      }
    }
  });
}

now the html code i have is:

<div id="tabs">
            <ul>
                <li id="Tabsheet"><a href="#newMgrAprvlScreen" class="tName"></a></li>
                <li id="Tabcs"><a href="#commentsSectionData" class="cName"></a></li>
            </ul>
            <div id="Screen">
                <div class="modal_datatable">
                    <table class="table2 display" id="ModalTblData">
                    </table>
                    <table id="ModalTblData2" class="table2 display">
                    </table>
                </div>
            </div>
            <div id="SectionData"></div>
        </div>

the above will stay as is and will never be changed and deleted, the new tabs will be created by the jquery code and the jquery response is ike this

{
    "textData1": "<div><textarea required minlength="5" name="adjustment1" id="adjustment1" class="textareaWidth width100" cols="50" wrap="Virtual"></textarea></div>",
    "msg1": "<div id="divIDMsg_1" style="text-align:center;display:none;"> accepted and email sent successfully!</div>",
    "textData2": "<div><textarea required minlength="5" name="adjustment2" id="adjustment2" class="textareaWidth width100" cols="50" wrap="Virtual"></textarea></div>",
    "msg2": "<div id="divIDMsg_2" style="text-align:center;display:none;">request has been sent!</div>",
    "title2": "Request",
    "title1": "Accepted",
    "content2": "<div class="pad5 padleft0"><input type="button" data-reqAdj="Request" data-accAdj="Accepted " data-emailSend="Email with this request has been sent!" data-accepted=" accepted and email sent successfully!" data-details="Please enter details." data-invalid="Error! Your input is invalid!" class="ui-button ui-corner-all ui-widget openSection2" onclick="submitRequest2(this)" data-reviewstatus="R" data-tmcardid="221" data-weekid="02/24/24" data-stype="REG" data-stime="NuMDA=" data-instance="Vf=" data-minvalue="40" data-email="ICAA=" data-empname="MOsa" data-wkend="02/24/24" data-emplyid="76" data-action="2" data-approver="NO" value="Request Adjustment" name="adjusted" id="adjusted"></div>",
    "content1": "<div class="pad5 padleft0"><input type="button" data-reqAdj="Request" data-accAdj="Accepted " data-emailSend="Email with this  request has been sent!" data-accepted=" accepted and email sent successfully!" data-details="Please enter details." data-invalid="Error! Your input is invalid!" class="ui-button ui-corner-all ui-widget openSection" onclick="submitRequest(this)" data-reviewstatus="Y" data-tmcardid="221" data-weekid="02/24/24" data-stype="REG" data-stime="NDAuMDA=" data-instance="TkE=" data-minvalue="40" data-email="RAgICAgICA=" data-empname="MOsa" data-wkend="02/24/24" data-emplyid="7151" data-action="1" data-approver="NO" value="Accepted" name="accepted" id="accepted"></div>",
    "label2": "<div class="pad5">Request</div>",
    "label1": "<div class="pad5">Accepted </div>"
}

but it keeps on adding new tabs instead of clearing existing if any, what could be wrong here

Answers

It seems like you are removing tabs with the class "addedDynamic" before adding new ones. However, it might be more efficient to clear all dynamic tabs outside of the success callback, and then add the new ones. Try modifying your code like this:

function loadbtns(dataAttributes) {
  // Clear all existing dynamic tabs
  $('#tabs').find("li.addedDynamic").remove();

  $.ajax({
    url: "x.cfm?section=11",
    type: 'POST',
    data: dataAttributes,
    dataType: 'json', 
    
    success: function(response) {
      console.log(response);
      if (Object.keys(response).length > 0) {
        var tabTemplate = "<li><a class='addedDynamic' href='#{href}'>#{label}</a></li>";

        var id1 = "tabs-" + ($("#tabs li").length + 1);
        var li1 = $(tabTemplate.replace(/#{href}/g, "#" + id1).replace(/#{label}/g, response.title1));
        $("#tabs").find(".ui-tabs-nav").append(li1);
        $("#tabs").append("<div id='" + id1 + "'>" + response.msg1 + "n" + response.label1 + "n" + response.textData1 + "n" + response.content1 + "</div>");

        var id2 = "tabs-" + ($("#tabs li").length + 2);
        var li2 = $(tabTemplate.replace(/#{href}/g, "#" + id2).replace(/#{label}/g, response.title2));
        $("#tabs").find(".ui-tabs-nav").append(li2);
        $("#tabs").append("<div id='" + id2 + "'>" + response.msg2 + "n" + response.label2 + "n" + response.textData2 + "n" + response.content2 + "</div>");

        $("#tabs").tabs("refresh");
      }
    }
  });
}

This modification ensures that you remove all existing dynamic tabs before adding the new ones, preventing duplication.

If you want to further enhance this to prevent duplications even when the same content is loaded again, you can maintain a list of unique tab titles or IDs and check against this list before adding a new tab. Here’s an updated version of your code with this modification:

var addedTabs = [];

function loadbtns(dataAttributes) {
  $.ajax({
    url: "x.cfm?section=11",
    type: 'POST',
    data: dataAttributes,
    dataType: 'json',

    success: function(response) {
      console.log(response);
      if (Object.keys(response).length > 0) {
        // Clear existing dynamic tabs and the addedTabs array
        $('#tabs').find("li.addedDynamic").each(function() {
          $(this).remove();
        });
        addedTabs = [];

        // Add new tabs
        addDynamicTab(response.title1, response.msg1, response.label1, response.textData1, response.content1);
        addDynamicTab(response.title2, response.msg2, response.label2, response.textData2, response.content2);

        $("#tabs").tabs("refresh");
      }
    }
  });
}

function addDynamicTab(tabTitle, msg, label, textData, content) {
  // Check if the tab title is not already added
  if (addedTabs.indexOf(tabTitle) === -1) {
    var tabTemplate = "<li><a class='addedDynamic' href='#{href}'>#{label}</a></li>";
    var id = "tabs-" + ($("#tabs li").length + 1);
    var li = $(tabTemplate.replace(/#{href}/g, "#" + id).replace(/#{label}/g, label));

    $("#tabs").find(".ui-tabs-nav").append(li);
    $("#tabs").append("<div id='" + id + "'>" + msg + "n" + label + "n" + textData + "n" + content + "</div>");

    // Add the tab title to the addedTabs array
    addedTabs.push(tabTitle);
  }
}

This modification ensures that existing dynamic tabs are removed along with clearing the addedTabs array. As a result, each time new content is loaded, it will replace the existing tabs and prevent duplications.

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – trying to delete existing tabs which were dynamically added

Answers