I have a user area that uses jQuery tabs as its main navigation method, but when submitting forms (especially when uploading images) the user is redirected to the first tab. Is there a way that I can have them return to the tab they left to submit the data?
Code I’m using to redirect profile data updates;
// Redirect to previous page
header('Location: ' . $_SERVER['HTTP_REFERER']);
Code i’m using to redirect after image upload;
<script>
alert('Your photo was uploaded.');
window.location.href='<?php echo $_SERVER['HTTP_REFERER']; ?>?success';
</script>
<script>
alert('There was an error while uploading your photo... Please try again.');
window.location.href='<?php echo $_SERVER['HTTP_REFERER']; ?>?fail';
</script>
The tabs (toggles between divs with the class of pages
and the ID’s below (mainphoto etc);
<!-- NAVIGATION TABS -->
<div class="profile-nav">
<ul id="profile-navigation">
<li class="active" style="font-size: 14px;"><a href="#mainphoto">Main Photo</a></li>
<li style="font-size: 14px;"><a href="#galleryphotos">Gallery Photos</a></li>
<li style="font-size: 14px;"><a href="#albums">Albums</a></li>
</ul>
</div>
Just in case its needed - the JS for the tabs;
<!-- MINI TAB NAVIGATION JS (profiles, search, listing pages etc) -->
<script type="text/javascript">
$(function(){
function contentSwitcher(settings){
var settings = {
contentClass : '.pages',
navigationId : '#profile-navigation'
};
//Hide all of the content except the first one on the nav
$(settings.contentClass).not(':first').hide();
$(settings.navigationId).find('li:first').addClass('active');
//onClick set the active state,
//hide the content panels and show the correct one
$(settings.navigationId).find('a').click(function(e){
var contentToShow = $(this).attr('href');
contentToShow = $(contentToShow);
//dissable normal link behaviour
e.preventDefault();
//set the proper active class for active state css
$(settings.navigationId).find('li').removeClass('active');
$(this).parent('li').addClass('active');
//hide the old content and show the new
$(settings.contentClass).hide();
contentToShow.show();
});
}
contentSwitcher();
});
</script>