Reloading Current Settings Tab on Save

We are in the process of building a plugin and have been working on a settings page that utilizes a tabbed layout. The system heavily utilizes the options framework used in the WordPress SEO by Yoast plugin.

The issue we're having is that unlike Yoast's plugin, we can't seem to get the current tab to show up again when the settings are saved. We've looked through the Yoast plugin code to try to figure out how they do this, and we can't seem to find anything.

Any suggestions? I've attached a screenshot of the tab that appears right after you save settings in Yoast. That's what we want to happen.

  • Michelle Shull

    Hi, Jonathan!

    This is actually a bit above my head as a support tech, but let me see if one of our second level guys might have some time to help out here. That team is pretty busy, so it may take a bit before you hear a reply from them, and this may be something they'll want to point you towards hiring a dev to help with. If they can provide some guidance here, I'm sure they will.

    We also recently added a few developer chats to our Live Chat schedule: https://premium.wpmudev.org/live-support/ It might be worth swinging by one of the code chats for some help here, as well.

    Thanks for your questions!

  • Hoang Ngo

    @Jonathan,

    The Yoast submits all the data to /wp-admin/options.php, after the submission, it's redirect back to the dashboard page, from here, I think this code inside the file /wordpress-seo/js/wp-seo-admin.min.js handler the tab select

    // init
        var active_tab = window.location.hash.replace('#top#', '');
    
        // default to first tab
        if (active_tab == '' || active_tab == '#_=_') {
            active_tab = jQuery('.wpseotab').attr('id');
        }
    
        jQuery('#' + active_tab).addClass('active');
        jQuery('#' + active_tab + '-tab').addClass('nav-tab-active');
    
        jQuery('.nav-tab-active').click();

    I think this is the place you will need to dig in. Let's see if that help for you :slight_smile:.

    Best regards,
    Hoang

  • Jonathan

    Hi Hoang,

    Thanks for getting back to me. We did see that code, but unfortunately, it doesn't tell us how they actually get the hash to be included when the page reloads. The code you provided takes the hash in the URL and uses that to show in the appropriate tab. For us, when we submit to options.php the settings page does reload, but it doesn't include the hash at the end. We need to find out how they are able to include the hash at the end of the URL when the settings page reloads.

    Thanks again for the help.

    Jonathan

  • Hoang Ngo

    @Jonathan,

    I think this is the flow. When you click on a tab button, the script append the hash to form action url, example /wp-admin/options.php#top#webmaster-tools. Hash usually not submit to server, but will keep on browser, so actually, that hash has maintained when it's submit to options.php file till redirect on your page.

    You can make a simple test like this. First we create a test form in your footer page.

    add_action('wp_footer', 'test_redirect');
    function test_redirect()
    {
        ?>
        <form method="post" action="<?php echo home_url() ?>#abc">
            <button type="submit" name="test" value="test">Submit</button>
            <?php wp_referer_field() ?>
        </form>
    <?php
    }

    This will submit the form to homepage, with the has #abc.
    Next, we process the redirect

    add_action('init', 'test_redirect_submit');
    function test_redirect_submit()
    {
        if (isset($_POST['test'])) {
            wp_redirect(add_query_arg('just-r', 'redirect', wp_get_referer()));
            exit;
        }
    }

    Ok now, please go to any page but not the homepage, click on the submit button of your test form. It will firstly go to homepage url with the #abc hash, and then, it will redirect to the page you clicked the submit button , with a test parameter on URL, also, still with the #abc hash too.

    Hope this can help :slight_smile:

    If you have any issues please don't hesitate to let us know so we can assist.

    Best regards,
    Hoang

  • Jonathan

    Great! This is perfect Hoang. I was able to use the following javascript code from Yoast and it worked perfectly.

    function wivm_set_tab_hash() {
            var settings = jQuery('#wivm-settings'); //ID of the form tag for our settings form
            if (settings.length) {
                var currentUrl = settings.attr('action').split('#')[0];
                settings.attr('action', currentUrl + window.location.hash);
            }
        }
    
      /**
       * When the hash changes, get the base url from the action and then add the current hash
       */
      jQuery(window).on('hashchange', wivm_set_tab_hash);
    
      /**
       * When the hash changes, get the base url from the action and then add the current hash
       */
      jQuery(document).on('ready', wivm_set_tab_hash);

    I really appreciate you looking into this. Thanks a ton.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.