Call a function in javascript only after page load

Question

I have a button that is set up to call a javascript function to automatically activate a "tab" on a page. When that tab is loaded, there are subtabs that display. I am trying to set it up so that one of the subtabs is also automatically activated when the button is clicked.

Currently I can get the first tab to select, but I can't get the subtab to select. #detailsTab is the id of the first tab. #personal-information is the id of the subtab I am trying to select.

The following is what I have.

This is all in the same file:
HTML:

<button class="button button--primary button--sm" onclick="viewDetials()">View Details</button>

Javascript:

<script type="text/javascript">
    function viewDetials() {
        $("#detailsTab").click();
        personalSubTab();
    }

    window.onload = function personalSubTab() {
        $("#personal-information").click();
    }
</script>

I tried switching the order of the two functions, but that didn't help either — AtlasBowler
– AtlasBowler, Commented Jul 23, 2015 at 17:45

spencer.sm · Accepted Answer · 2015-07-23 18:01:31Z

1

Try combining your functions and adding a short delay for the subtab.

function viewDetials() {
    $("#detailsTab").click();

    setTimeout(function(){
        $("#personal-information").click();
    }, 200);  // This value can be tweaked

}

edited Jul 23, 2015 at 18:01

answered Jul 23, 2015 at 17:50

spencer.sm

20.8k10 gold badges86 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AtlasBowler Over a year ago

that doesnt work either. $("#personal-information").click(); has to be called AFTER the detailsTab is loaded.

spencer.sm Over a year ago

It's hard to tell exactly what would work for you without actually being able to see the full code of the page. But does this method work better than my original post?

AtlasBowler Over a year ago

This worked. I had to tweak the delay, but it works. Thanks!

ijsnow · Accepted Answer · 2015-07-23 17:59:33Z

0

The following will be called when the document is ready.

<script type="text/javascript">
    function viewDetials() {
        $("#detailsTab").click();
        personalSubTab();
    }

    function personalSubTab() {
        $("#personal-information").click();
    }

    // Document ready
    $(function () {
        personalSubTab();
    });
</script>

answered Jul 23, 2015 at 17:59

ijsnow

1627 bronze badges

1 Comment

AtlasBowler Over a year ago

still doesn't activated the subtab that I am trying to get.

nril · Accepted Answer · 2015-07-23 18:07:05Z

0

I'm not exactly sure what you want to do - but if you want to generate a click event on another button/div use trigger, not click - like this:

function personalSubTab() {
$("#personal-information").trigger('click');}

answered Jul 23, 2015 at 18:07

nril

5682 silver badges7 bronze badges

Collectives™ on Stack Overflow

Call a function in javascript only after page load

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related