simple login system spa/php/mysql/jquery

Question

I am trying to create a simple login system - I have gotten as far as my user being able to sign in and see his profile page. I am trying to make the link work in the login_success.php template...right now it just appends "#" to the url (because I am using that as a place holder.

Here is my code:

js/application.js

$(document).ready(function() {
    $("#main").load("templates/indexforms.php", function () {
        $("#login").submit(function(e) {
            e.preventDefault();
            $.post("checklogin.php", $(this).serialize(), function() {
                $("#main").load("templates/login_success.php");
                $("#login").remove();
                $("#register").remove();
            });
        });

        $("#register").submit(function(e) {  
            e.preventDefault();
            $.post("checkreglogin.php", $(this).serialize(), function(){
                $("#main").load("templates/login_success.php");
                $("#login").remove();
                $("#register").remove();
            });
        });
    });


    $("#loginlinkdiv a").click(function(event) {
        event.preventDefault();
        $("#main").empty();
        $("#main").load("templates/logout.php");
    });

    $("#logoutlinkdiv a").click(function(event) {
        event.preventDefault();
        $("#main").empty();
        $("#main").load("templates/indexforms.php");
    });
});

templates/login_success.php

<?php
session_start();

if($_SESSION['username'] === null){
    header("location: ../index.php");
}
?>

<h1>Login Successful</h1>
<h2>Username: <? echo $_SESSION['username']?></h2>
<div id="logoutlinkdiv" >
    <a href = "#" >Log out</a>
</div>

I can't figure out why nothing happens when I click the log out link.

It should work. Try putting your JS at the bottom of the page instead of the top. Try putting an alert("hi") in the logout div to see if its not your indexforms.php that crashes when called from that page. — Jack M., Jun 17 '13 at 22:38
If page/content (login_sucess) is loaded via ajax -> maybe script doesn't recognize it as part of DOM, so, try to use on: http://api.jquery.com/on/ — sinisake, Jun 17 '13 at 22:40
@MrJack I did as you said...nothing happens still...even with code at bottom...i put alert(hi) in the logout link div and it gets rendered in the browser correctly. — ewizard, Jun 17 '13 at 23:22
@nevermind tried this `$("#loginlinkdiv a").on("click", function(event) {` still no luck — ewizard, Jun 17 '13 at 23:24

score 1 · Accepted Answer · answered Jun 17 '13 at 23:45

1

I think that this should work:

$(document).on("click", "#logoutlinkdiv a", function(e) {
e.preventDefault();
   alert('logout button clicked');
 });

And explanation: http://bugs.jquery.com/ticket/11203

answered Jun 17 '13 at 23:45

sinisake

11,240
2
19
27

Anchor to `#main` instead of document. – Ja͢ck Jun 17 '13 at 23:48
@nevermind did it...thanks - why did this work and not the other way? – ewizard Jun 17 '13 at 23:51
Please check this (more detailed explanation than on previous link i have sent): http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on/8111096#8111096. – sinisake Jun 18 '13 at 00:11

simple login system spa/php/mysql/jquery

1 Answers1

Linked