This is a very basic example, which I havn't tested (I wrote it here in the forum quick reply box), but should work. Try it out and work your way from there. Again, jquery can be downloaded from their website, jquery.com.
EDIT: In login.php there is a part where the comments say "do this yourself", you should implement that yourself :P
A page with a link to open the login popup.
HTML Code:
<html>
<head>
<title>Test</title>
<script type="text javascript" src="path/to/jquery.js">
<script type="text/javascript">
$(document).ready(function(){
/* Hide the popup */
$("#login_form").hide();
/* Onclick function to show popup */
$("#login_button").click(function(){
$("#login_form").show().load("login_form.php");
});
});
</script>
</head>
<body>
Click red box to login.
<div id="login_button" style="width:100px; height:50px; background-color:#f00;"></div>
<div id="login_form" style="width:600px; height:400px"></div>
</body>
</html>
The page that opens in the popup, login_form.php
HTML Code:
<script type="text/javascript">
$(document).ready(function(){
$("#login_submit").click(function(){
// $.post(url, data, callback, type);
$.post(
"login.php",
{uname: $("#uname").val(), pword: $("#pword").val()},
function(data) {
// data contains array produced in login.php
if (data.status == 'error') {
$("#msg").html(data.errorMsg).css('color' : 'red');
} else {
$("#msg").html("You have been logged in, reloading page...").css('color' : 'green');
setTimeout("location.reload(true);",2);
}
},
"json"
);
// do not send the form the "normal way"
return false;
});
});
</script>
<div id="msg"></div>
<form>
<p>Username: </p><input type="text" id="uname"><br />
<p>Password: </p><input type="text" id="pword"><br />
<input type="submit" id="login_submit">
</form>
}
And finally, the login.php file
PHP Code:
<?php
session_start();
$return = array('status' => '', 'errorMsg' => '');
if (isset($_POST['uname']) && isset($_POST['pword'])) {
if (empty($_POST['uname']) || empty($_POST['pword'])) {
$return['status'] = 'error';
$return['errorMsg'] = "Please enter both username and password";
} else {
// validate username and password in database
// do this yourself
if ($validated) {
// set sessions, like
$_SESSION['uname'] = $validatedUsername;
$return['status'] = 'success';
} else {
$return['status'] = 'error';
$return['errorMsg'] = "Username or password incorrect, please try again.";
}
}
} else {
// could be someone who's trying to acces this page directly, just exit
exit();
}
// all output will be sent to jQuery via ajax, so just echo the result (in json format)
echo json_encode($return);
?>
__________________
34343639363436653237373432303635373837303635363337 34323037343638363137343263323036343639363432303739 366637353366
Last edited by lizciz; 10-27-2009 at 11:28 AM..
|
