Selecting previous tab after form submission

[benyates1]

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>

[Andres_Vaquero]

Hi @benyates1, when you click on a tab, does the URL change?

[benyates1]

It does, it adds #tabname to the end of the URL but I have tried using that already - in fact it is included when using the document referrer - but no look, it still returns the user to the first/default tab.

[Andres_Vaquero]

Maybe upon landing on the page you could check the URL anchor and simulate a click on the appropriate tab…

[benyates1]

Yes, that may work but I’m not sure how to write something like that.

[Andres_Vaquero]

Hi @benyates1, try this:

function fireEvent (node, event)
{
	if(!(node instanceof HTMLElement)) {
		console.error("could not fire event, expecting a dom node and got:", node);
		return;
	} 
	if (document.createEventObject) {
		// dispatch for IE
		var evt = document.createEventObject();
		return node.fireEvent('on' + event, evt)
	}
	else {
		// dispatch for firefox + others
		var evt = document.createEvent("HTMLEvents");
		evt.initEvent(event, true, true); // event type,bubbling,cancelable
		return !node.dispatchEvent(evt);
	}
};

window.addEventListener("load", function(){
	var hash = window.location.hash;
	if (hash !== "") {
		var id = hash.replace("#", "");
		var node = document.getElementById(id);
		if (node) {
			fireEvent(node, "click");
		}
	}
});

[James_Hibbard]

Hi,

As the OP is using jQuery, this can probably be shortened somewhat:

var hash = window.location.hash;
if (hash !== "") $(hash).trigger("click");

Make sure this is placed at the foot of the document, or in a $(document).ready() callback, and you’re good to go.

[benyates1]

Thanks for the help here @James_Hibbard and @Andres_Vaquero. Works perfectly.