I have an onclick event on my anchor tag that redirects the user to a specific page and auto clicks on a link after the loading of the page.

this is what i have right now:

var experience_modal = "#experienceModal";

    function experienceModal() {

        window.location.href = "/Resume";
        $(experience_modal).trigger('click');

    };

<p style="margin-bottom: 10px;"><strong><a href="javascript:void(0);" onclick="experienceModal()">Add</a> an Experience</strong></p>



    

I have an onclick event on my anchor tag that redirects the user to a specific page and auto clicks on a link after the loading of the page.

this is what i have right now:

var experience_modal = "#experienceModal";

    function experienceModal() {

        window.location.href = "/Resume";
        $(experience_modal).trigger('click');

    };

<p style="margin-bottom: 10px;"><strong><a href="javascript:void(0);" onclick="experienceModal()">Add</a> an Experience</strong></p>



    

I am encountering a problem that the trigger property does not work after the redirecting to the specific page.

please guide me on how to fix this problem.

thank you in advanced!

• javascript
• jquery
• html

Share Improve this question Follow edited Feb 15, 2017 at 4:40 Sreetam Das 3,40922 gold badges2424 silver badges3636 bronze badges asked Feb 15, 2017 at 3:45 TerenceTerence 35211 gold badge66 silver badges1919 bronze badges 1

• once the page is redirected the javascript will not run anymore, this won't work – cansyrup756 Commented Feb 15, 2017 at 3:50

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

On page load/reload all js execution stops. That's why your trigger mand does not run after assigning a new URL to location.href. You need to get the pages 'municate' each other somehow.

One way would be passing a query string in URL :

Code on the page that the user supposed to click "Add an experience" :

window.location.href = "/Resume?showExpModal";

Code on Resume page :

$(document).ready( function() {
  // existing code
  // ...
  if(window.location.href.split('?').pop() == 'showExpModal') {
    $(experience_modal).trigger('click');
  }
}

window.location.href triggers a new page load, which means that any additional code on the current page will not be exceuted.

I guess one option would be to redirect to the current page, with an added query string, that would then trigger some conditional code. But that seems a bit convoluted, I'd suggest rethinking your strategy instead.

Try executing your code before leaving the page..?

Try this

var experience_modal = "#experienceModal";

function experienceModal() {
    setTimeout(function() {
       window.location.href = "/Resume";
    })
    $(experience_modal).trigger('click');

};

You can use sessionStorage or cookies to hold on to some information that you can access on the next page.

/***/ On the previous page /***/
sessionStorage.setItem('click-this-button-after-page-loads', '#thisButton');

/***/ On the new page /***/
let buttonToBeClicked = sessionStorage.getItem('click-this-button-after-page-loads');

// Click the button here
document.querySelector(buttonToBeClicked).click();

// Remove the key from session storage
sessionStorage.removeItem('click-this-button-after-page-loads');

The session storage goes away when the browser is closed. You can read more on the MDN: https://developer.mozilla/en-US/docs/Web/API/Window/sessionStorage