setting up html link to work with jquery

Question

I am trying to create a single page app. After a successful login, a success page is displayed (login_success.php) with a link to logout. When you click the logout link, I want it to empty the "main" div, and insert logout.php (a "you have been logged out" page) into the "main" div. However, when I click the logout link, nothing happens (it seems like the jquery isn't getting exectuted). I'm not sure what to do with the "href" in the link - as I do not want the page to actually change. Here is my code:

js/application.js

$("logoutlinkdiv").click(function() {
    $(this).find('a').click(function ()) {
        $("#main").empty();
        $("#main").load("logout.php");
    });
});

templates/login_success.php

<?php
session_start();

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

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

UPDATE

Now I have this for code - it still does nothing when I click "Log out":

templates/login_success.php

<?php
    session_start();

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

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

js/application.js

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

index.php

<!DOCTYPE html>
<html>
<head>
<title>it IT</title>
<script src="reqscripts/jquery.js"></script>
<script src="js/application.js"></script>
</head>
<body>
<form id="login" method="post" action="checklogin.php">
    <h1>Member Login</h1>
    <p>Username:<input name="myusername" type="text" id="myusername"></p>
    <p>Password:<input name="mypassword" type="password" id="mypassword"></p>
    <input type="submit" name="Submit" value="Login">
</form>
<div id="main"></div>
</body>
</html>

checklogin.php

<?php

session_start();

$host="localhost"; // Host name
$username="root"; // Mysql username
$password="bonjour3"; // Mysql password
$db_name="itit"; // Database name
$tbl_name="members"; // Table name

// Connect to server and select databse.
$mysqli = new mysqli("$host", "$username", "$password", "$db_name")or die("cannot connect");

// Define $myusername and $mypassword
$myusername=$_POST['myusername'];
$mypassword=$_POST['mypassword'];

$sql = $mysqli->prepare("SELECT * FROM $tbl_name WHERE username=? and password=?");
$sql->bind_param('ss',$myusername,$mypassword);
$sql->execute();
$sql->store_result();//apply to prepare statement
$numRows = $sql->num_rows;

if($numRows === 1){
    $_SESSION['username'] = $myusername;
}
else {
    echo "Wrong Username or Password";
    session_destroy();
}
?>

Again, when I click on "Log out" from within "login_success.php", nothing happens except that a "#" is appended to the url (which should happen because it is the placeholder for the link). Any suggestions?

score 0 · Answer 1 · answered Jun 14 '13 at 14:20

You have to put your jQuery script inside login_success.php:

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

<script type="text/javascript">
   $("#logoutlinkdiv a").click(function() {
           $("#main").empty();
           $("#main").load("logout.php");
   });
</script>
</body>
</html>

Or, instead of .click(), use .on():

$("#logoutlinkdiv a").on("click", function() {
      $("#main").empty();
      $("#main").load("logout.php");
});

Update v1

Why do you search about a inside #logoutlinkdiv? Just to burn performance? — You do not need this. I have updated the code to clean it.

cfs · Answer 2 · 2013-06-17T11:44:34.100

0

Use event.preventDefault() to prevent the browser from following the link.

You'll only need one click handler; you've nested your handlers, which will result in some strange behavior (everytime you click the logoutlinkdiv it will attach another even listener to the anchor, so you will eventually get event firing multiple times). Also, check your selector syntax, as you had an error. I've updated it to search for all anchors in the logoutlinkdiv:

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

I'm guessing this is just a typo, but your HTML also doesn't show importing application.js, make sure you have that file imported or it won't be executed.

edited Jun 17 '13 at 11:44

answered Jun 14 '13 at 14:21

cfs

10,610
3
30
43

thanks - im pretty sure my application.js is being imported...I have this in my index.php - ` `...and I have other jquery code that works in it. I changed my code to reflect your suggestion...still no luck. – ewizard Jun 14 '13 at 16:11
@ewizard Sorry... my answer had a typo: I forgot to pass the `event` object to the click callback. I updated my answer; try that and see if it works. – cfs Jun 17 '13 at 11:45
i actually figured it out with the help of a friend...however i have a new issue with the same program...u can look at it here http://stackoverflow.com/questions/17139592/php-mysql-jquery-beginnings-of-an-spa-login-system – ewizard Jun 17 '13 at 19:31

score 0 · Answer 3 · answered Jun 14 '13 at 14:21

0

This function is wrong. You are missing the #

$("logoutlinkdiv")

It should look like this:

$("#logoutlinkdiv")

answered Jun 14 '13 at 14:21

Get Off My Lawn

34,175
38
176
338

thanks for the response..i fixed the above mistake...as well as my jquery as was suggested below...still no luck – ewizard Jun 14 '13 at 16:34

setting up html link to work with jquery

3 Answers3

Update v1