| Jquery UI Ajax Login
|
LinusIT
msg:4466837 | 6:39 pm on Jun 18, 2012 (gmt 0) |
I was using Fancybox for a dialog style login but since discovering Jquery UI and Ajax I thought I'd change things around on my site. I can think of many uses for the Jquery UI framework and Ajax, it's just learning it that's slowing me down.
I've tried to get it working but need some help on the last part (funnily the most important part)
Simple HTML:
<div id="login-form" style="display:none">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="username">Username</label>
<input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div> |
|
Javascript:
<script>
$(function() {
$( "#login-form" ).dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 350,
title: 'Login',
buttons: {
"Submit": function() {
var bValid = true;
var username_frm=$("#username").val();
var password_frm=$("#password").val();
var dataString = 'username='+username_frm+'&password='+password_frm;
if ( bValid ) {
$.ajax({
type: "POST",
url: "login2.php",
data: dataString,
dataType: "json",
cache: false,
success: function(html){
//alert(html); //TESTING - DOESN'T WORK
if(html=='true')
{
$("#login-form").dialog('close');
window.location.href = 'index2.php?result=success';
}
}
});
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
$( "#login-form" ).dialog( "open" );
});
</script> |
|
Shortened PHP:
if($login_result) {
if(mysql_num_rows($login_result) == 1) {
$users = mysql_fetch_assoc($login_result);
echo "true";
} else {
echo "false";
}
}else {
die("Query failed");
} |
|
The dialog is being displayed on page load, this is just for easy testing purposes. When I fill the two fields and press Submit nothing happens. I have looked at all the other Ajax code I've got but can't suss out why nothing is happening.
Would appreciate some guidance :) thanks
|
|
