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.
Related
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.
I am creating a website using HTML/bootstrap and to reduce the repetition of same code I tried using PHP include for footer and sidebar, like this:
<html>
<body>
<?php include('navigation.php'); ?>
Contents of this page here...
<?php include('sidebar.php'); ?>
<?php include('footer.php'); ?>
</body>
</html>
I wanted to do the same thing for navigation menu also, But as the highlighted links changes with each page I am not sure how to change that dynamically.
Since I am using bootstrap just need some method by which I can manipulate the class="active" in the menu links.
(NB: new to php.)
There are tho easy ways to do that. The best way to me is to put the contents of your navigation.php file in a function which has an argument. Then you call the function after your include and you pass as argument a number or a string which represents the item you need to put as active.
Your function then would be something like this:
<?php
function displayNavBar($activeItem){ ?>
<li class="">
<ul class="" > <li <?php if($activeItem=="Home"){echo "class='active'";}?>>
Home</li> <li>contact</li> <li class="active">privacy</li> <li>about</li </ul> </li>
<?php } ?>
Obviously I have written the cose only for the first item, you need to do the same with the others. And then in your file you have to call the function created:
displayNavBar("Home"):
I'm not sure about the structure of your site, but usually you would read the current url and set the active class according to that. So using, for example:
$current_page = $_SERVER['PHP_SELF'];
If you were at /index.php, then you would have
$current_page = '/index.php';
Then it is a simple matter of saying
<li<?php echo $current_page=='/index.php' ? ' class="active"' : ''; ?>>Home</li>
<li<?php echo $current_page=='/about.php' ? ' class="active"' : ''; ?>>About</li>
This is just an example. Set the current page as above, see what the result is using echo, then set the link as below.
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
});
I'm building a wordpress theme. In the backend, the user has the option to enter the url for their social networks (i.e. twitter, facebook, instagram etc). These URL's are then dynamically added to images in the theme front end linking to the respective networks.
The issue I have is that if a user doesn't enter a url for a network, I don't want the image to display. I am trying to write code that says, if the url is blank, echo 'class="hidden"' - this class has display:none in the css.
here is a snippet of my php:
<ul class="icons">
<li <?php if (get_theme_mod('footer_twitter')==0) {echo 'class="hidden"'; } ?>><span class="label">Twitter</span></li>
</ul>
and the css:
ul.icons li.hidden {
display:none;
}
The php code above currently outputs the echo statement for all cases, even when a url is entered in the backend. Can anyone help me with this code
Check the return of "get_theme_mod()" You can check this by using, cause i dont think it "== 0". http://codex.wordpress.org/Function_Reference/get_theme_mod
var_dump(get_theme_mod('footer_twitter'));
//string(0)
Here is your new code:
<ul class="icons">
<li class="<?php echo empty(get_theme_mod('footer_twitter')) ? 'hidden' : ''; ?>">
<a href="<?php echo get_theme_mod('footer_twitter'); ?> " class="icon circle fa-twitter">
<span class="label">Twitter</span>
</a>
</li>
</ul>
Please check this Syntax: http://php.net/manual/en/control-structures.alternative-syntax.php its the best way to code control structures in your "View" code.
<?php if (!empty (get_theme_mod( 'set_address2' ))) {
echo get_theme_mod( 'set_address2');
}?>
This seemed to work for me in Wordpress.
Let me know if this works.
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.