Client side script seems to not work on page change

frostzn

I have currently a client side code that redirects users if they are not logged in to the log in page so that non-members can't view the pages. The code is as follows.

$(window).on('action:ajaxify.end', function(ev, data) {
    if(data.url !== 'login' && data.url !== 'register'){
        if (!app.user.uid || app.user.uid === 0) {
            ajaxify.go('login');
        } 
    }
});

The code works on the initial page load, but if I click a different page from the login page like going to the categories page, then it no longer works. I need to refresh the page in order for it to work.
I have noticed that if I put an alert or try debugging it always works. Perhaps this is a dumb question on my part but do you guys have any ideas as to why this is the case and how do I fix it to work on page change as well?

<baris>

How about?

$(window).on('action:ajaxify.end', function(ev, data) {
    if(ajaxify.data.template.name !== 'login' && ajaxify.data.template.name !== 'register'){
        if (!app.user.uid || app.user.uid === 0) {
            ajaxify.go('login');
        } 
    }
});

<baris>

@frostzn your initial code seems to work for me as well. Maybe check your browser console for any javascript errors.

frostzn

@baris I seem to have the same issues. And the browser console seems to come up blank for errors. I've also tested on multiple browsers to see if it was a just a browser specific issue but that doesn't seem to be the case. I actually got a very botched way of making it work currently with the code below.

$(window).on('action:ajaxify.end', function(ev, data) {
    if (data.url !== 'login' && data.url !== 'register' && !app.user.uid) {
              ajaxify.go('login');
    }      
    setTimeout(function (){
        if (data.url !== 'login' && data.url !== 'register' && !app.user.uid) {
              ajaxify.go('login');
        }      
    }, 500);
});

I just do the function again after a slight delay and it seems to be working. Which is really odd and not ideal.

<baris>

Did you investigate the network tab in the browser console? Is the navigation to login happening after the page navigation?

When I use your code and try to go to tags page from login page I get these two entries.

frostzn

@baris Oh hmmm, it seems to not happen at all for whatever reason.

<baris>

How are you adding the code that handles the ajaxify.end event?

frostzn

@baris Do you mean where I am adding it? If so, I'm adding to the custom Javascript area in the ACP. Should I add it somewhere else instead?

<baris>

@frostzn no that's fine that's how I tested it as well.

<baris>

You can add a console.log and see if it is getting triggered at all.

$(window).on('action:ajaxify.end', function(ev, data) {
    console.log('action:ajaxify.end');
    if(ajaxify.data.template.name !== 'login' && ajaxify.data.template.name !== 'register'){
        if (!app.user.uid || app.user.uid === 0) {
            ajaxify.go('login');
        } 
    }
});

frostzn

@baris It seems to trigger. I get the console. And if I do ('action:ajaxify.end'); It seems to work while getting the alert message as well.

<baris>

So it is always going into the action:ajaxify.end handler? Can you try the below and see if it works?

$(window).on('action:ajaxify.end', function(ev, data) {
    console.log('action:ajaxify.end');
    if(ajaxify.data.template.name !== 'login' && ajaxify.data.template.name !== 'register'){
        if (!app.user.uid || app.user.uid === 0) {
            $('#content, #footer').removeClass('ajaxifying');
            ajaxify.go('login');
        } 
    }
});

frostzn

@baris Hmm, that doesn't seem to do the trick either. It's a real headscratcher. Thank you so much for your time and effort by the way!

<baris>

No worries, is this a public site or are you testing on local?

frostzn

@baris I am testing locally currently

frostzn

I guess this could be local specific issue, I could try testing this on a test domain and see if it still runs into the same issue.

<baris>

Well I was testing locally as well and wasn't able to reproduce. For me everytime I try to navigate console.log('action:ajaxify.end'); gets executed and it sends me back to the login page.

frostzn

@baris That's curious. Perhaps I messed up while installing Nodebb or something of the like? As it appears to be just me experiencing this issue?

<baris>

You can always setup a new blank nodebb on latest version and test there to rule out anything else.

frostzn

@baris This specific function is currently on a mostly blank slate, which makes it more confusing as well. I've tried putting in an console log after each if statement as well and it all goes through. It even goes to the ajaxify.go('login') but that just seems to do nothing.