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.
Related
I created navigation tabs that load content when you click the tab. But in the active tab, the content of all the tabs is loading. I have included a PHP file to load the content but when I remove the PHP file and put normal content it's working properly.
<div class="nav-tabs-horizontal" data-plugin="tabs">
<ul class="nav nav-tabs nav-tabs-line" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-toggle="tab" href="#settingsTab"
aria-controls="settings" role="tab">Settings</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#locationsTab"
aria-controls="locations" role="tab">Buisness </a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#taxTab"
aria-controls="tax" role="tab">Tax</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#productsettingsTab"
aria-controls="product" role="tab">
Product </a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#invoiceTab"
aria-controls="invoiceTab" role="tab">Invoice Settings
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#emailTab"
aria-controls="emailTab" role="tab">Email Settings
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#audit"
aria-controls="audit" role="tab">Audit</a>
</li>
</ul>
<div class="tab-content ">
<div class="tab-pane active" id="settingsTab" >
<?php include 'settings.php'; ?>
</div>
<div class="tab-pane" id="locationsTab" >
<?php include 'locations.php'; ?>
</div>
<div class="tab-pane " id="taxTab" >
<?php include 'tax.php'; ?>
</div>
<div class="tab-pane " id="productsettingsTab" >
<?php include 'product.php'; ?>
</div>
<div class="tab-pane " id="invoiceTab" >
<?php include 'invoice.php'; ?>
</div>
<div class="tab-pane " id="emailTab" >
<?php include 'email.php'; ?>
</div>
<div class="tab-pane " id="audit" >
<?php include 'auditlogs.php'; ?>
</div>
</div>
</div>
As per the screen, it appears that few files (either bootstrap or jquery) are not loading. Please correct them.
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>
I have create my login in codeigniter using sessions and whenever i try to add if statements to hide register page and login page from nav bar once user is logged in it does not seem to work. This below is my navigation menu code and i was wondering just exactly where and how would i write down statement to hide the register and login page once user is logged in?
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active ">
<a class="nav-link" href="<?php echo base_url();?>index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active ">
<a class="nav-link" href="index.php/user/account">Account</a>
</li>
<?php if($this->session->userdata('username')) : ?>
<li class="nav-item">
<a class="nav-link" href="index.php/user">Login</a>
</li>
<?php if($this->session->userdata('username')) : ?>
<li class="nav-item ">
<a class="nav-link" href="index.php/registerPage">Register</a>
</li>
</ul>
</div>
</nav>
I know the sessions is working as whenever i go back to login it redirects me to account page which then gives me option to logout and also show login details. just not sure how to put it in this navigation menu.
you have a mistake on your if statement here i have updated your code.
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active ">
<a class="nav-link" href="<?php echo site_url();?>">Home <span class="sr-only">(current)</span></a>
</li>
<?php
//here we check if session `username` is exist. so it means that the current user is logged in correctly
if($this->session->userdata('username')) : ?>
<li class="nav-item active ">
<a class="nav-link" href="<?php echo site_url('/user/account'); ?>">Account</a>
</li>
<?php else : ?>
<li class="nav-item">
<a class="nav-link" href="<?php echo site_url('/user'); ?>">Login</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="<?php echo site_url('/registerPage'); ?>">Register</a>
</li>
<?php endif;?>
</ul>
</div>
</nav>
Try This
if (isset($this->session->userdata['username'])) {
$message= '<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active ">
<a class="nav-link" href="<?php echo base_url();?>">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item active ">
<a class="nav-link" href="index.php/user/account">Account</a>
</li>
</ul>
</div>
</nav>';
} else {
$message = '<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active ">
<a class="nav-link" href="<?php echo base_url();?>">Home
<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active ">
<a class="nav-link" href="index.php/user/account">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php/user">Login</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="index.php/registerPage">Register</a>
</li>
</ul>
</div>
</nav>';}
echo ($message);
I have the following html sidebar menu:
<li {{{ (Request::is('bookings/*') }}} data-toggle="collapse" data-target="#bookings">
<i class="fa fa-address-book" aria-hidden="true"></i> Bookings <i class="fa fa-chevron-down" aria-hidden="true"></i>
</li>
<ul class="sub-menu collapse" id="bookings">
<li class="collapsed">All Bookings</li>
<li class="collapsed" >Add New</li>
</ul>
<li {{{ (Request::is('bookings/*') || Request::is('bookings') ? 'class=active' : '') }}} data-toggle="collapse" data-target="#item2">
<i class="fa fa-address-book" aria-hidden="true"></i> Item 2 <i class="fa fa-chevron-down" aria-hidden="true"></i>
</li>
<ul class="sub-menu collapse" id="item2">
<li {{{ (Request::is('bookings') ? 'class=active' : 'collapsed') }}}>All Bookings</li>
<li {{{ (Request::is('bookings/create') ? 'class=active' : 'collapsed') }}} >Add New</li>
</ul>
This is a basic Bootstrap collapse menu that contains a sub menu which expands when the li element is clicked.
The problem I have is lets say I have 2 or 3 of these menu items that all have sub menus. There is a possibility that all of them could open at the same time, I don't like this because this forces a scroll overflow as the height increases which then shows a scrollbar for the side menu.
Is there a way I can prevent multiple elements from being expanded in Bootstrap?
I am using Laravel 5 if that helps.
I think this should help you, just play a little with it to adapt it to your needs:
<div class="row">
<div class="col">
<ul class="nav nav-stacked" id="accordion1">
<li class="panel"> <a data-toggle="collapse" data-parent="#accordion1" href="#firstLink">Test12</a>
<ul id="firstLink" class="collapse">
<li>SubTest1</li>
<li>SubTest1</li>
<li>SubTest1</li>
</ul>
</li>
<li class="panel"> <a data-toggle="collapse" data-parent="#accordion1" href="#secondLink">Test2</a>
<ul id="secondLink" class="collapse">
<li>SubTest2</li>
<li>SubTest2</li>
<li>SubTest2</li>
<li>SubTest2</li>
</ul>
</li>
</ul>
</div>
</div>
See it here
https://codepen.io/anon/pen/ZaMOxN
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.