I have a jQuery Tab that looks like this:
<div class="tabs">
<ul class="tab-links">
<li id="aa" class="active">About</li>
<li id="bb">CV</li>
<li id="cc">Contact</li>
</ul>
On the contact tab, I have placed an email form, which uses php.
The problem I am facing is the fact that when the form is submitted
the user gets automatic redirected to the about tab, because this of course
have a class set to "active".
What I would like is to add the class "active" to the contact < li > and remove it from the about < li > after the form is submitted in order for the user to see the success/error msg being displayed in the contact tab. I have tried following the instructions in this tread, by implementing this code:
$(document).ready(function () {
$([#contact]).tabs( "option", "active", 3 );});
This does not solve the problem..
I am not very experienced with either php or jQuery, so if somebody could point me in the right direction I would be very thankful!
UPDATE:
I have added id elements to the < li >, and have tested the code below, the alert msg appear when the submit button is pressed. But so far I have not figured how to remove and add the class properly.
$("form").submit(function(){
alert("Submitted");
$('#aa').removeClass('active');
$('#cc').addClass('active');
});
You can use PHP variable & if condition to accomplish this task.
The following can be a possible solution:
Edit your [your-contact-processing-file].php to the following:
<?php
header("location: your-main-file.php?contact=1");
?>
Edit your-main-file.php with the following code:
<?php
// keep this PHP code on the top
$con = '';
if(isset($_REQUEST['contact'])){
if(isset($_REQUEST['contact'] == 1)){
$con = 1;
} else {
$con = ''; // to avoid PHP error if some other value is passed through contact
}
}
?>
<div class="tabs">
<ul class="tab-links">
<li
<?php
if ($con == '';) echo 'class="active"';
?>>
About
</li>
<li>CV</li>
<li
<?php
if ($con == 1;) echo 'class="active"';
?>>
Contact
</li>
</ul>
Hope this helps.
Note: it's not a jquery solution but should work fine.
Related
My situation:
I have several pages like home.php, about.php, gallery.php ...
In all these pages i include the menu with the anchors with php. so the menu is not in the pages. In all the pages i have the line: include('includes/menu.php');
What i want to achieve: if url is mydomain.com /gallery.php the anchor in the menu should have an extra class like "active" so i can style it different (current page is open).
I tried it with jquery:
I gave all the anchors a class "clickable" like below:
<ul class="main-menu">
<li><a class="clickable" href="index.php">Home</a></li>
<li><a class="clickable" href="gallery.php">Gallery</a></li>
<li><a class="clickable" href="openingtimes.php">Openingtimes</a></li>
</ul>
And load this jquery code:
$(document).ready(function()
{
$(function() { //run when the DOM is ready
$(".clickable").click(function() {
$(this).addClass("active"); //add the class to the clicked element
});
});
});
But the problem that appears: when click on the anchor, lets say gallery.php, it gets the class "active' shortly but the gallery.php is loading and the menu is again included via php. Ofcourse, this works only if you stay on the same page.
What can i do best with this situation to make an anchor active when the specific page is loaded?
Maybe read the url and then on basis of this url add a class to the anchor?
Use $_SERVER['PHP_SELF'] or $_SERVER['REQUEST_URI']
Try using:
<ul class="main-menu">
<li><a class="clickable <?php if($_SERVER['PHP_SELF'] == '/index.php') { echo "active"; } ?>" href="index.php">Home</a></li>
<li><a class="clickable <?php if($_SERVER['PHP_SELF'] == '/gallery.php') { echo "active"; } ?>" href="gallery.php">Gallery</a></li>
<li><a class="clickable <?php if($_SERVER['PHP_SELF'] == '/openingtimes.php') { echo "active"; } ?>" href="openingtimes.php">Openingtimes</a></li>
</ul>
Also make sure if the file is in another directory to add the name ex. if($_SERVER['PHP_SELF'] == '/folder/index.php')
Documentation: http://php.net/manual/en/reserved.variables.server.php
I am new in CodeIgniter.I have a registration form view.Within this view there are several tabs like one for personal details,another for photo upload and another for job details.In first call i load the tab for personal details and there is a submit button for saving personal details.I want to navigate to photo upload tab after i submit the personal data.Is it possible to load photo uploading tab in the same view?
Try this.. It Works for me.
View :
<?php $tab = (isset($tab)) ? $tab : 'tab1'; ?>
<ul class="nav nav-tabs" id="myTabs">
<li class="<?php echo ($tab == 'tab1') ? 'active' : ''; ?>" >
Personal Info
</li>
<li class="<?php echo ($tab == 'tab2') ? 'active' : ''; ?>" >
Family Info
</li>
<li class="<?php echo ($tab == 'tab3') ? 'active' : ''; ?>" >
Upload Photo
</li>
</ul>
and for each tab-pane set class as :
<div class="tab-pane <?php echo ($tab == 'tab1') ? 'active' : ''; ?>" id="tab_1_1">
Update your controller as:
$data['tab'] = 'tab3';
$this->load->view('commons/header');
$this->load->view('addmember',$data);
$this->load->view('commons/footer');
Tis code will show 1st tab (Personal info) as the default tab and after submission of 1st tab, it navigate to the 3rd tab (Upload Photo). You can change it to the 2nd tab if needed.
Hope this will help you.
I don't know how your view looks like.Here is a way that may help you.
First write a function at your controller like this
function myFunction($tab=1)//may be index
{
$data['tab']=$tab;
//do other stuff
if($tab==2)
{
//save personal details
$data['id']=the_id_you_saved;
}
//suppose your last tab is 3
if($tab==3)
{
//do your stuff or redirect
}
$this->load->view('your_tab_view', $data);
}
Now your view file will look like this.
//load your other htmls
<?php
if($tab==1)
{
?>
<form action="controler_name/myFunction/2" method="post">
//your personal information form
</form>
<?php
}
else if($tab==2)
{
?>
<form action="controler_name/myFunction/3" method="post">
<input type="hidden" name="id" value="<?php echo $id ?>">
//your file upload form
</form>
<?php
}
?>
Hope you will get the idea how to do that. Thanks
I have a suggestion, though there may be other ways of doing it.
In the view you create three tabs and load the view in each tabs through ajax.
This can be done like when you click submit of the first tab if successful it returns the view for the next tab and on ajax success you display the next tab making the previous tab as display:none;
similarly other tabs. Using templates this can be achieved easily.
$user['details'] = array('name=>test','email=>test#test.com');
$this->load->view('header');
$this->load->view('addphoto',$user);
$this->load->view('footer');
I have give you a sample structure for controller page. From where you can call the add photo and send user details.
The following displays several tabs with UnitName labels. When an associated tab is clicked it causes a table associated with that tab to be displayed (javascript).
How would I change this so a particular UnitName is treated as the active one and display the associated table automatically as opposed to have to click the desired UnitName tab first?
foreach($unit_list as $unit)
{
echo '<li>'.$unit['UnitName'].'</li>';
}?>
//the following doesn't happen until the javascript knows which tab is active
<div class="tab-content">
<?php $j=0;$i=0;
foreach($unit_list as $unit)
{?>
<div class="tab-pane" id="unit<?php echo $j;?>">
<ul class="nav nav-tabs tab-color" id="deptTabs">
<?php $userDept = 0; $k=$i; foreach($dept_list[$j] as $dept)
{?>
<li
<?php
if($dept['Department']==$user_info[0]['Department'])
{
$userDept=$i;
echo "class=\"active\"";
}?>
>
<a href="#dept
<?php echo $i;?>
" data-toggle="tab">
<?php echo $dept['Description'];?></a></li>
<?php $i++;
}
$i=$k #put i back to the value it started at?>
</ul>
Just use .trigger() with jquery.
$(document).ready(function(){
$('#dept_tabs li').each(function(i,v){
if(i.hasClass('active')){
i.trigger('click');
}
});
});
This will loop through all the li elements, find the one thats active,
And trigger a 'click' event on it.
This is assuming that you have a predefined 'click' event assigned to these tabs.
Ie...
$('#deptTabs li').click(function(){
// Show table here based on which tab was clicked
});
This may seem like a duplicate question but I have googled and search stackoverflow how an a anchor tag would act like as a submit that would fit on the website that I am trying to do.
I have this code on my right panel navigation:
<div class="content clearfix">
<div class="left_column">
<div class="product_menu">
<? if($_SESSION['logged_in'] == 1) {
$customer_panel = '
<div class="customer_nav">
<h1 class="customer_nav_name">Hello ' . $_SESSION['fname'] . ',</h1>
<ul class="clearfix">
<li>View Profile</li>
<li>Update Information</li>
<li>
<!-- this is where i would like the signout button to act as a submit
i have left it plane to start from scratch -->
Sign Out
</li>
</ul>
</div>';
echo $customer_panel;
}?>
<h2><span>Product Categories</span></h2>
<ul id="prod_nav" class="clearfix">
<li class="top"><span>Processed Meat</span></li>
<li class="top"><span>Ready Made</span></li>
<li class="top"><span>Siomai & Siopao</span></li>
<li class="top"><span>English Pork Snacks</span></li>
</ul>
</div>
And here is my usual code when i use a submit button and not an anchor tag to make a POST method:
if(isset($_POST['signout'])) { // logout button
// Clear and destroy sessions and redirect user to home page url.
$_SESSION = array();
session_destroy();
// Redirect to where the site home page is located -- Eg: localhost
header('Location: http://localhost/');
}
I have read many of this questions but I don't know jQuery or how to achieve this using javascript.
I also tried using this solution:
<form id="signout" action="index.php" method="post">
Sign Out
<input type="hidden" name="signout" value="signout"/>
</form>
that I kinda found from here at stackoverflow.
The problem about this is that if I include the onclick="" , the whole page does not show. but if i remove it, the page comes back to normal. - it doesn't work inside an <li> element.
It might sound basic, but it would help me and other new starters to understand how to make it possible. Thank you very much. :)
Try this,
STEP 1 :
Put the following scripts in your html file.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(function() {
$('.signout-btn').click(function() {
$('#signout').submit();
});
})
</script>
STEP 2 :
Add an attribute class="signout-btn" to anchor tags, which you want to trigger the form submission.
I'm still new to Front End Development and working on my first really big site / wordpress blog.
So my question is this, I have a Menu that will be the same on all pages on the site. However each section will have it's name highlighted in the Menu Nav.
Current Nav_Bar markup:
<div id="nav_bar">
<ul class="nav">
<li class="nav_li">Home</li>
<li class="nav_li">About</li>
<li class="nav_li selected">Blog</li>
<li class="nav_li">Book</li>
<li class="nav_li">Media</li>
<li class="nav_li">Events</li>
<li class="nav_li">Services</li>
<li class="nav_li">Contact</li>
<li class="search">
<input type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" />
</li>
<li class="search_btn">
<div class="search_button">Go</div>
</li>
</ul>
</div><!-- nav_bar -->
Now I've build pages before using this simple PHP code: <?php include("menu.php"); ?>
However, how would you guys 1st: organize this menu to accept and incoming value, like menu.php+select="home" and 2nd how would you pass in that value to add a class of selected to one of the Menu items?
First off your class on li "nav_li" is redundant and could be removed. Use .nav li in place to ref these list items with less lines of code. This works both as a JQuery selector and CSS selector. Second, to answer you actual question; I would use the active class as follows:
// Assuming the following html. <ul class="nav"><li>About</li></ul>
$('.nav li').click(function() {
$('.nav li.active').removeClass('.active');
$(this).addClass('.active');
window.location = $(this).children('a').attr('href');
return;
});
Now in the area where you keep your navbar you check to see if the current url is active by the following:
<?php
$currentUri = $_SERVER['REQUEST_URI'];
<ul class="nav">
<li class="<?php if($currentUri == '/about.php') {echo 'active';} ?>">About</li>
</ul>
Add the condition in the php script to each list item.
Sincerely,
Kevin
I assume you want your 'incoming value' for the purpose of highlighting a menu item (rather than displaying a particular page)? It's unnecessary, because the browser already knows what page it's on.
This is one way of highlighting the current page in jQuery:
$('.nav li a').each(function(){
var link = $(this).attr('href'),
current_page = location.href;
if(current_page.indexOf(link) != -1) {
$(this).addClass('current-page');
}
});
Before the include, set a value in some parameter, like $page = 'blog' and then in the menu.php
<li class="nav_li<?php echo $page === 'blog' ? " selected='selected'" : "" ?>">Blog</li>
This can be done using javascript
var url=document.location.toString();
if(url=="http://www.something.com/some.php")
{
//code to add class to specific link
}
else if(url=="http://www.something.com/someelse.php")
{
//code to add class to specific link
}
You can also do this on server side in menu.php
$url=$_SERVER['REQUEST_URI']
Then check the url and add class name accordingly
If I'm understainding what you're after, maybe something like:
index.php:
<?php
$page = 'home';
// page code ...
?>
about.php:
<?php
$page = 'about';
// page code ...
?>
etc, etc...
Then menu.php tweaked slightly:
<div id="nav_bar">
<ul class="nav">
<li class="nav_li home">Home</li>
<li class="nav_li about">About</li>
<li class="nav_li blog">Blog</li>
<li class="nav_li book">Book</li>
<li class="nav_li media">Media</li>
<li class="nav_li events">Events</li>
<li class="nav_li services">Services</li>
<li class="nav_li contact">Contact</li>
<li class="search">
<input type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" />
</li>
<li class="search_btn">
<div class="search_button">Go</div>
</li>
</ul>
</div><!-- nav_bar -->
and finally some javascript:
<script>
$(function () {
$('#nav_bar li.<?=$page?>').addClass('selected');
});
</script>
That assumes jQuery is being used, but it isn't necessary obviously, the same could be done with straight javascript.