ajax login logout calls from same div don't fire until page refresh

Question

I am firing an ajax call for logging in a user to the website. The div "sitelogin" contains the login form parts. After successful ajax authentication the div "sitelogin" removes the login form parts and fills in the ajax html response. The response consists of a logout button and a div with "Welcome user".

Now the logout button is attached to another ajax call for destroying the session and bring back the login parts into the "sitelogin" div. But it does not fire until I refresh the page. Please tell me why does the logout ajax call does not fire if I try to logout with the "logout" button immediately after the login ajax call fills in the "sitelogin" div with the logout response. Both the ajax calls are in the page header.

I've posted more info here

https://stackoverflow.com/questions/18627573/php-ajax-login-and-logout-not-working-together-and-with-nobody-logged-onto-the-s

Please suggest!!

Answer 1

I got the answer to the issue. Jquery has a way of handling elements which enter the dom at a later time. They grab the parent element and then delegate the event to the actual triggering element whenever it is created.

I used the below.

    $('#parent div').on('click','#event triggering element',function(){
        $.ajax({
                //ajax function
            }
        });
        return false
    });

This solved my headache. Hopefully it will help you as well.

Answer 2

I guess you are using jQuery Ajax.

Put your logout ajax call on that page from where your logout button and welcome user div comes.

So when your logout code comes in response, logout ajax call will be initialized, and you can call it without page refresh.

Answer 3

Your problem is, that you bind the onclick event, when the element not exist yet. When the ajax response is put into the div, the bind is, of course, not triggered again.

You should print this javascript code only then, when the user has logged in - even for security reasons! You can print that javascript code directly with php and it will be executed when it is put into the div.