Welcome to WebmasterWorld Guest from 54.163.35.238

Forum Moderators: open

Message Too Old, No Replies

Jquery UI Ajax Login

     

LinusIT

6:39 pm on Jun 18, 2012 (gmt 0)

5+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month