Javascript change location href and click on a certain button

Question

I would like to redirect the user onclick to a certain page "user/logged_in1" if the user is not already on that page and after the redirect a certain button must be clicked. This button opens a modal.

Doesn't work with this function:

function redirect_to_logged_in_and_open_modal() {
    if(window.location.href.indexOf("logged_in") > -1) {
        return
     } else {
         location.href="user/logged_in1";
         document.getElementsByClassName("zimmerbtn")[0].click();    
     }
}

It seems it searched already for the button before the redirect happens and therefore the list is empty. How to fix this?

EDIT

This is a little bit more complex. The modal should only open if the user uses the redirect. If I use onload on the body tag, the modal will always open if the page is loaded, I don't need that. I need that modal only to be opened if the redirect happens.

The whole thing is a Python flask application:

{% if current_user.zahlung_iban == None and have_this_user_a_room != None %}
        <li><a class="btn mybtn" onclick="redirect_to_logged_in_and_open_modal()" data-toggle="modal" data-target="#premium-special-modal"> Zimmer anbieten </a></li>
{% else %}
        <li><a class="btn mybtn" href="{{ url_for('zimmer_einstellen') }}"> Zimmer anbieten </a></li>
{% endif %}

As you see there is a certain trigger for the button to become the redirect button.

EDIT

Okay working with a cookie sounds like a possible solution. But I cant figure out how to delete the cookie after the button was clicked, none of the proposed code works, eventhough it looks simple:

function redirect_to_logged_in_and_open_modal() {
    if(window.location.href.indexOf("logged_in") > -1) {
        return
     } else {
         location.href="user/logged_in1";
         document.cookie = "redirected_coz_of_click";
     }
}

$( document ).ready(function() {
    if ($(".logged-in-container")[0]) {

        var delete_cookie = function(name) {
            document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
        };

        if (document.cookie.indexOf('redirected_coz_of_click') > -1 ) {
            document.getElementsByClassName("zimmerbtn")[0].click();
            delete_cookie('redirected_coz_of_click');
            console.log(document.cookie);
        } else {
            console.log("cookie removed");
        }
    } 
});

How can you trigger a click event on an element in the page **after** you're redirecting the visitor to another page? — Ofir Baruch, Jan 31 '17 at 08:54
Your function is being executed on the page you currently are. Not on the page you are redirecting the user. You need to have a function (probably on the onLoad Event) that will execute when the user lands on the page you are redirecting him. — Strahdvonzar, Jan 31 '17 at 08:55

score 2 · Answer 1 · edited May 23 '17 at 11:46

1: Append a parameter to the redirect url

user/logged_in1?click=btn_id

2: On landing on that page you can then check if the parameters is there. Found this method

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
    sURLVariables = sPageURL.split('&'),
    sParameterName,
    i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

Found the method here: https://stackoverflow.com/a/21903119/3514785

So you could use it like this:

var btnToClickId = getUrlParameter("click");

3: With jquery (or javascript if you want) fire the click event on that btn:

$("#"+btnToClickId).click();

NB: You want to do the check after the page has loaded:

$(window).on("load",function() {
    var btnToClickId = getUrlParameter("click")
    if(btnToClickId) {
        $("#"+btnToClickId).click();
    }
});

So in summary

a: Edit your page and remove this line document.getElementsByClassName("zimmerbtn")[0].click(); because it is pointless

b: In the target page in the js copy and past the `getUrlParameter' method.

c: Then inside a on window load event listener do the url check as specified in 3.

ALTERNATIVE TO URL PARAMETER

You could instead use localStorage or some cookie to store the target id right before redirecting. Make sure you remember to clear it in the target page after grabbing it so that it is not always triggered even when you have not redirected from the page that triggers this whole process.

score 1 · Answer 2 · answered Jan 31 '17 at 08:56

You can not access elements that have not even loaded yet. By using location.href = '' you are simply directing a user to a page, any javascript after will fail because the page hasn't been loaded yet.

You tell us that you want to redirect a user to a page onclick. This sounds like the essential of an anchor tag:

<a href="user/logged_in1">Click Me</a>

For step 2, just place the javascript on the page you are redirecting to. Bind to the load event of the page and then execute your javascript:

window.onload = function() {
    document.getElementsByClassName("zimmerbtn")[0].click();  
};

score 1 · Answer 3 · answered Jan 31 '17 at 09:04

1

You can use cookie.

Set cookie when user click on the redirect button and when page is loaded, check if the cookie is set and open the modal. When you done with opening the modal clear the cookie. In that way you can easily achieve this.

answered Jan 31 '17 at 09:04

Vijay Mishra

350
2
14

that sounds like something I need. Will check how to achieve that – Roman Jan 31 '17 at 09:04
You can check it in $(document).ready(function()) of the redirected page. – Vijay Mishra Jan 31 '17 at 09:07

score 0 · Answer 4 · answered Jan 31 '17 at 08:56

0

Instead of triggering click. Call the onclick function in body onload method of user/logged_in1.

<body onload="openModal()">

answered Jan 31 '17 at 08:56

nmkyuppie

1,456
1
14
30

score 0 · Answer 5 · answered Jan 31 '17 at 08:57

You are trying to access a content on your initial page, but you have already redirected the user from that page, so this cannot be achieved by the current method.

I believe what you are trying to do is to open up a modal, after redirecting, do the following.

On your redirected page add the following, use jquery to achieve this

$( document ).ready(
   // add the functionality to launch modal here
);

score 0 · Accepted Answer · answered Jan 31 '17 at 10:03

I created an onclick() function for this button:

onclick="redirect_to_logged_in_and_open_modal()"

In the function I check if I am not already on the logged_in site. If not I redirect but I add an additional parameter to the URL ?redirected.

In the next step if the logged_in is loaded and the parameter is in the URL the modal will also open, thats it.

Thanks @Zuks for the Idea adding a param to URL.

function redirect_to_logged_in_and_open_modal() {
    if(window.location.href.indexOf("logged_in") > -1) {
        return
     } else {
         window.location.assign("https://www.example.com/user/logged_in1?redirected");
     }
}

$( document ).ready(function() {
    if ($(".logged-in-container")[0]) {

        if(window.location.href.indexOf("redirected") > -1) {
            document.getElementsByClassName("zimmerbtn")[0].click();
         } 
    } 
});

Javascript change location href and click on a certain button

6 Answers6