I've created two tabs, using PHP tab one is made to insert data to database and another to view the data from the database, someone suggested ajax, but i couldn't find the answer i want.
example code -
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="container tab-pane active">
<?php require("insert.php"); ?>
</div>
<div id="menu1" class="container tab-pane fade">
<?php require("view.php"); ?>
</div>
</div>
at tab one, i insert data (PHP) and tab two i view the data in table (PHP), so after inserting, i have to refresh the whole page to view the updated data on tab two.
So is it possible to refresh tab two right after i insert data on tab two, so i can view updated data without refreshing the whole page? if this is already solved, please comment answer links.
It may seem crude, but i made it work using JavaScript.
$(document).ready(function(){
$(".t1").load("insert.php");
$(".t2").load("view.php");
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
if(target=='#home')
{
$(".t1").load("insert.php");
}
else if(target=='#profile')
{
$(".t2").load("view.php");
}
});
});
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile">Menu 1</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="container tab-pane active t1">
</div>
<div id="profile" class="container tab-pane fade t2">
</div>
</div>
Related
I need to remove the ACTIVE class from nav-item when the user closes the tab. I try to build tabs with text content inside. Tabs should be closed by default when the user opens the page. When the user clicks on a tab to open it, it should change the color to blue (So here I can use the active class to add style), but when it closes, it should change the color to white. The best way would be to remove the ACTIVE class from li and I stuck here. How to do it? Unfortunately Bootstrap does not remove the ACTIVE class when I click on the tab to close it. Bootstrap removes the ACTIVE class only when I switch between tabs.
Here is my HTML:
<div class="col-md-12">
<ul class="nav nav-tabs justify-content-center" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#one" role="tab">One</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#two" role="tab">Two</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#three" role="tab">Three</a>
</li>
</ul>
<div class="tab-content">
<div class="text-center tab-pane" id="one" role="tabpanel">1 tab content</div>
<div class="text-center tab-pane" id="two" role="tabpanel">2 tab Content</div>
<div class="text-center tab-pane" id="three" role="tabpanel">3 tab content</div>
</div>
</div>
And here is my JS:
jQuery(function ($) {
$(".nav-link").click(function(){
if ($(this).hasClass('active')){
$('#' + this.hash.substr(1).toLowerCase()).toggleClass('active');
}
});
});
Just go over all the nav-item's and remove the class when the user closes the tab
$('.your-close-icon').on('click', function() {
$('.nav-item').removeClass('active');
});
how can i locate the page and makes active the certain tab
here's my php
header('location: home.php?id=tab2');
and my html : tab
<ul class="nav nav-tabs" role="tablist" id="navtabs">
<li class="nav-item">
<a class="nav-link active" id="tab1" data-toggle="tab" href="#aaa">Apply Now!</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab2" data-toggle="tab" href="#bbb">Announcements</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab3" data-toggle="tab" href="#ccc">Examination Schedule</a>
</li>
<div class="tab-content">
<div id="aaa" class="container tab-pane active"><br>
Tab 1
</div>
<div id="bbb" class="container tab-pane fade"><br>
This is Tab 2
</div>
<div id="ccc" class="container tab-pane fade"><br>
Tab 3
</div>
i want to locate my php function with already active the certain tab
You can easily receive the value of the id parameter:
$tab_id = $_REQUEST['id'];
Then check if each nav-link has the needed $tab_id:
<a class="nav-link <?php $tab_id === 'tab1' ? 'active' : '' ?>" id="tab1" data-toggle="tab" href="#aaa">Apply Now!</a>
The same for tab contents:
<div id="aaa" class="container tab-pane <?php $tab_id === 'tab1' ? 'active' : '' ?>"><br>
Tab 1
</div>
I hope it will help to resolve your problem.
Sorry if this has been asked already before, but I tried looking for the answer and couldn't find it.
I am creating a website where a user submits information on their child such as age, school, skill level, etc. when registering.
Once they have completed registering their information and child information they can sign in and go to their dashboard.
I have a menu item that is called "dancers" and the sub menu item should be the dancer/child name that was entered when they registered. another menu item that is also there is "add new dancer".
So what I am trying to do is when they register, upon signing in they should already have the dancer in the dropdown menu for "dancers". which would have been retrieved from the database.
And every time they add a new dancer a new submenu item of that dancer's name should appear.
here is my html menu code:
<div class="row subnav">
<div class="col-sm-12">
<ul>
<li class="li-spacing">Home</li>
<li class="dropdown li-spacing">
<a class="dropdown-toggle" data-toggle="dropdown">Dancers<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Name</li>
<li class="divider"><hr></li>
<li>Name</li>
<li class="divider"><hr></li>
<li>Add New</li>
</ul>
</li>
<li class="dropdown li-spacing">
<a class="dropdown-toggle" data-toggle="dropdown">Report Cards <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>View all</li>
<li class="divider"><hr></li>
<li>Add New</li>
</ul>
</li>
<li class="li-spacing">History</li>
<li class="li-spacing">Events</li>
<li class="li-spacing">Fun</li>
</ul>
</div>
</div>
I am very new to php, and really need some direction in where to start with this.
any help is much appreciated!
After much research and working on other pages on my website I have finally found a solution that worked perfect for me.
<div class="row subnav">
<div class="col-sm-12">
<ul>
<li class="li-spacing">Home</li>
<li class="dropdown li-spacing">
<a class="dropdown-toggle" data-toggle="dropdown">Dancers<b class="caret"></b></a>
<ul class="dropdown-menu">
<?php
$dancers = "SELECT `dancer_name` FROM `dancers` WHERE name = '$name'";
$dres = mysqli_query($con,$dancers);
if($res==FALSE){
die('there was an error running query [' . $con->error . ']');
}
while($data=mysqli_fetch_array($dres)){
echo '
<li>'.$data["dancer_name"].'</li>
<li class="divider"><hr></li>
';
}
?>
</ul>
</li>
</ul>
I am working on html tabs via php, i want to generate ID for tabs via php (unique ID in href="#Uniqueid1")
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"><a href="#uniqueid1" class="border-0 nav-link active" data-toggle="tab" >TAB1</a></li>
<li role="presentation" class="nav-item"><a href="#uniqueid2" class="border-0 nav-link" data-toggle="tab" >TAB2</a></li>
and later use them via php for ID
<div class="tab-pane active" id="uniqueid1">
<ul class="icon-list">List 1</ul>
</div>
<div class="tab-pane active" id="uniqueid2">
<ul class="icon-list">List 2</ul>
</div>
any instruction will be great help!
Method to do it will be amazing!
You can generate an array of ids using for-loop:
<?php
$tabs=10;
$ids=[];
For($i=0;$i<$tabs;$i++){
$ids[]=$i;
}
?>
<ul class="nav nav-tabs" role="tablist">
<?php foreach($ids as $number):?>
<li role="presentation" class="nav-item"><a href="#uniqueid<?=$number?>" class="border-0 nav-link" data-toggle="tab" >TAB<?=$number?></a></li>
<?php endforeach ?>
</ul>
And the blocks of data:
<?php foreach($ids as $number):?>
<div class="tab-pane active" id="uniqueid<?=$number?>">
<ul class="icon-list">List <?=$number?></ul></div>
<?php endforeach ?>
PHP features a way to do this with uniqid(), also it allows to set a prefix.
Documentation here.
Uniqueness
uniqid() does not ensure uniqueness because it relies on system clock (which can sometimes be outdated, then updated). Set the 2nd argument $more_entropy to true to strengthen uniqueness.
Example $myId = uniqid('tabid-', true)
I use bootstrap theme bs-admin-bcore and I want to make menu in file "menu.php" to be more dynamic.
For example, I have this code :
<ul id="menu" class="collapse">
<li class="panel">
<a href="index.php" >
<i class="icon-table"></i> Dashboard
</a>
</li>
<li class="panel ">
<a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#component-nav">
<i class="icon-tasks"> </i> UI Elements<span class="pull-right"><i class="icon-angle-left"></i></span> <span class="label label-default">10</span>
</a>
<ul class="collapse" id="component-nav">
<li class=""><i class="icon-angle-right"></i> Buttons </li>
</ul>
</li>
</ul>
when I call index.php <li class="panel"> becomes <li class="panel active"> and when I call button.php EU Elements becomes active.
You have to add "active" class to the parent li of buttons as well n it will work.