Create Tab dynamically and load tab content using jqueryui

Question

I am playing this Jqueryui Tab Manipulation but I could not modify it the way I want it to work. I have menu like

<li onclick="createTab('Title','home.php')">Home</li>
<li onclick="createTab('Title','edit.php')">Edit</li>
<li onclick="createTab('Title','view.php')">View</li>
<div id="tabs">    
<div id="#tabs-1">
<ul>
   <li><a href="#tabs-1">Tab Title here</a>
    <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>
  </li>
</ul>
</div>
<div id="tabs-1">tab content will be here</div>
</div>

The Jqueryui function I am working so far:

function creatTab(Title, url, e=null) {
       e.preventDefault();
            var label = Title.val() || "Tab " + tabCounter,
                id = "tabs-" + tabCounter,
                li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
                var tabContentHtml = load(url) || "Tab " + tabCounter + " content.";

            tabs.find( ".ui-tabs-nav" ).append( li );
            tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
            tabs.tabs( "refresh" );
            tabCounter++;
        }

and I want to dynamically create tab and load edit.php in the newly created tab content area when a user clicks on Edit menu and so on. In the tab manipulation demo, instead of loading content, it uses dialogue. I am looking for solution in Google for quite a long hours but could not find it except some library like jquery easyui offers simple solution. This does not help as I have already decided to use jqueryui for my project. Please help me.

Greg Ambrose · Accepted Answer · 2016-11-30 03:16:14Z

1

Function name as follows is missing an 'e'

function creatTab

answered Nov 30, 2016 at 3:16

Greg Ambrose

461 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create Tab dynamically and load tab content using jqueryui

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related