Add new tab dynamically with bootstrap/twig -
i want add remove tab dynamically bootstrap in twig found source code dynamically add/remove new tab dosen't work when click on "add tab" nothing happend can me please twig :
{% block javascripts %} {{ parent() }} <script type="text/javascript" > $(doument).ready(); var pagenum = 1; $('#btnadd').click(function () { var nexttab = $('#tabs li').size()+1; $('<li><a href="#tab'+nexttab+'" data-toggle="tab">tab '+nexttab+'</a></li>').appendto('#tabs'); $('<div class="tab-pane" id="tab'+nexttab+'">tab' +nexttab+' content</div>').appendto('.tab-content'); $('#tabs a:last').tab('show'); }); $('#btnadd').click(function () { var nexttab = $('#tabs li').size()+1; $('<li><a href="#tab'+nexttab+'" data-toggle="tab">tab '+nexttab+'</a></li>').appendto('#tabs'); $('<div class="tab-pane" id="tab'+nexttab+'">tab' +nexttab+' content</div>').appendto('.tab-content'); $('#tabs a:last').tab('show'); }); </script> {% endjavascripts %} {% endblock %} {% block sonata_admin_content %} <a href="javascript:;" id="btnadd"><i class="icon-plus-sign-alt"></i> add tab</a> <ul class="nav nav-tabs hidden-print" role="tablist" id="tabpanel"> <li classe="active"><a id="tab_form" href="#formulaire" role="tab" data-toggle="tab">formulaire</a></li> <li><a id="tab_form" href="#formulaire" role="tab" data-toggle="tab">tableau de bord</a></li> </ul> <div class="tab-content"> <div class="tab-pane" id="formulaire"> <div class="stats-content"> <div class="connectedsortable ui-sortable"> {% include 'techappstatsbundle:stats:form.html.twig' %} </div> </div> </div> </div> {% endblock %}
in add button click use
var nexttab = $("#tabpanel li").length+1; //add tab button ul $("#tabpanel").append("<li><a href='#tab"+nexttab+"' data-toggle='tab'>tab"+nexttab+"</a></li>"); //add tab content $(".tab-content").append("<div id='tab"+nexttab+"' class='tab-pane'>tab"+ nexttab+"content</div>");
Comments
Post a Comment