Call JS Function at the End of the Page (AJAX Session Check)

Hi,

i'll figured out, that when you are on a page (previously logged in) and call a Ajax request, i get a 500 error at the response. Now i want to implement a Ajax-SessionChecker to call an simple "is auth" method in my auth controller. The controller, routes etc. are working great, but the js wont work.

My app.js contains the bootstrap.js (untouched) and i can work with the jquery stuff inside my functions.js, but not outside in my app.blade.php file. Why?

Console:

jQuery.Deferred exception: checkSession is not defined ReferenceError: checkSession is not defined

app.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>

    <script type="text/javascript">
        var base_url = {!! json_encode(url('/')) !!};
    </script>

    <script src="{{ mix('js/app.js') }}"></script>

</head>
<body>
<div id="app">
    @yield('content')
</div>

@if (Auth::check())
<script type="text/javascript">
    $(document).ready(function() {
        console.log("ping");
        checkSession();
    });
</script>
@endif

</body>
</html>

functions.js

$(document).ready(function()
{
    ...jquery stuff...
});

function checkSession()
{
    setInterval(function()
    {
        jQuery.get(base_url+'/check', function()
        {
            window.location.href = base_url+'/login';
        });
    }, 10000);
}

bootstrap.js


window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

The "console.log("ping");" will be triggered :(

Hope you can help.

zachleigh

8 years ago

Level 47

@if (Auth::check())
<script type="text/javascript">
    $(document).ready(function() {
        console.log("ping");
        checkSession();
    });
</script>
@endif

Wouldn't you be just double checking auth?

Kunzilla

8 years ago

Level 4

@zachleigh Yeah. This will be trigger the "check" only when your session are exists.

The idea behind this is, when a user comes back to the computer and the session are expired, you have to re-login. When the browser still opened, the user get a 500 error.

If you have a better solution, you are welcome :)

Maybe a check on every ajax call with a redirect if the user getting a 500 error?

Kunzilla

8 years ago

Level 4

@zachleigh Maybe i must redo my idea. But the problem still exists with other functions too.

zachleigh

8 years ago

Level 47

You can use remember me to prevent users from having to log in again. This works, but the csrf token can still expire. For this you can try something like Caffine: https://caffeine.forlaravel.com

robrogers3

8 years ago

Level 37

where is functions.js, is it rolled into app.js?

if so, that won't work. it's not exported.

you can do window.check_session = function() { console.log('ping') };

and it should work.

just try calling check_session in the console. if it doesn't work there then it won't work anywhere.

and yeah, I just read your last comment. that's the problem. the window solution is quick and dirty. but if you got a lot, then dont' wrap functions.js in app.js or or export it/them as a module.

1 like

Please or to participate in this conversation.