Home/ Questions/Q 9219637
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T03:09:39+00:00

I want to create button to add tabs with body tabs Please take look

  • 0

I want to create button to add tabs with body tabs
Please take look at the code where it says

$('#tabs1').tabs('add', 'lorem.txt', xxxxx' .....

as you can see 'lorem.txt' is from where the information is retrieved to show in the body tabs,
I want to put php code and forms inside tabs body and not use 'lorem.txt'
The problem is that it will not work if I put php code inside jquery.

My question is, is there any other way it can done to show forms using php code when person click button to add tabs?
I’m using div tag. Here is my code. 

<script>
(function() {
    $(function() {
        var tab_counter = 0;
        $('#tabs1').tabs({
            closable: true,
            cache:true,
            add: function(e, ui){
                $('#tabs1').tabs('select', '#' + ui.panel.id);
            }
        });
        $('#tab_creator').click(function(){
            tab_counter += 1;
            $('#tabs1').tabs('add', 'lorem.txt', 'Tab ' + tab_counter);
            return false;
        });
        $('#tabs2').tabs();
    });
})(jQuery);
</script>

</head>

<body>

<h2 class="ui-widget ui-widget-header">closable Tabs</h2>
<input id="tab_creator" type="button" value="Add New Tab">
<div id="tabs1">
    <ul>
    <li><a href="#tabs1-1">tabs one</a></li>
    <li><a href="#tabs1-2">tabs two</a></li>
    <li><a href="#tabs1-3">tabs three</a></li>
    </ul>
    <div id="tabs1-1">
        <p> tabs one body</p>
    </div>
    <div id="tabs1-2">
        <p>tabs two body</p>
    </div>
    <div id="tabs1-3">
        <p>tabs three body</p>
    </div>
</div>
<br>
<br>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If the JS code is placed directly at <head> (as your example):

    $('#tabs1').tabs('add', '<?php echo $filename; ?>', 'Tab ' + tab_counter);

    Otherwise, you need something like this:

    $('#tabs1').tabs('add', $( '#tabs1' ).attr( 'data-filename' ), 'Tab ' + tab_counter);

    … where you put the PHP code inside the data-filename attribute in #tabs1:

    <div id="tabs1" data-filename="<?php echo $filename; ?>">

    About data attribute: Google

    • 0