-
xarp posted...
I love this tutorial. Better than having code somewhere to copy and paste, because this way I actually have to write it by myself and remember (learn) it much more. Thanks! Well done!
-
widi dwi posted...
wow .... this tutorial is help me alot ,thx. i`ll wait for another tutorial ..
-
shanail posted...
hi!
great vids and very clear. i hope there more about jquery and some sample regarding desktop widget with jquery
thank much :)
-
richievc posted...
meant to say not redirecting sorry about that :)
-
richievc posted...
Very nice tt, I got everything working as expected but the redirect is redirecting go figuar the last thing you would think well if you can think of any reason please let me know
-
pkkoso posted...
very very nice...
Fantastic tutorial. I’m working to get my jQuery, CodeIgniter, Xhtml & CSS skills to the next level, and your tutorials are helping with that. Thanks.
:-)
-
kunal posted...
Thanks a bunch. very helpful and it was exactly what I needed to know.
-
jerryLee posted...
sorry to double post, but this should work in localhost right? I am running it on my WAMP server, and it does not give me the error message, just redirects to index.php, no matter what. BTW, the index php is the main folder, not the sub folder I am using for the script. I am sure it is a simple mixup.
Username:
Password:
-
jerryLee posted...
Another great tutorial
-
indra posted...
veryyyyyyy usefull thank, you so awesome
-
dani posted...
This tutorial provides an understanding of jquery
-
Trent posted...
Very Awesome! Thanks for the tutorial!
-
Swetz posted...
just for your reference i have this code which is showing error
$(document).ready(function(){
$('#error').hide();
$('form[name=loginform]').submit(function(){
$('#error').slideUp();
$.post('/ajax.php'),{username: $('[name=username]').val(), password: $('[name=password]').val()}, function(data) {
if(data.success)
{
location.href = data.redirect;
}
else
{
$('#error').html(data.message).slideDown();
}
}, 'json');
return false;
});
});
-
Swetz posted...
hey very nice tut.. i wrote the code same like urs.. but im getting this error in firebug
missing ; before statement
}, 'json');
m very new to jquery.. so not sure wat its telling me to do. can u plz help?
thanks a lot
-
Steve posted...
sorry, my PHP is
-
Steve posted...
Spent literally days to explain the whole exchange of data between PHP and AJAX... you just explained it perfectly in 10mins.
Thanks so much
-
Steve posted...
Sorry for mega triple post, removed the php thing.
if ($_POST) {
$username = $_POST['loginuser'];
$password = $_POST['loginpass'];
if($username == 'test' && $password == 'test')
{
$data['success'] = true;
$data['message'] = "you did good... very good";
exit;
} else {
$data['success'] = false;
$data['message'] = "you did bad... well, kinda";
}
json_encode($data);
}
thats better.
Thanks, Steve
-
Steve posted...
Okay, will change that one. Thanks.
I am however, having a problem, I am trying to post data back to the javascript and print it out in my main page.
currently just a simple message to test the system is working, once I've sorted that I will use information from databases.
I don't suppose you could help me with it at all?
What I am trying to get is when the login is successful or unsucess full pass some text back to the page and print it in a div.
What i've got so far:
My Javascript
$(document).ready(function() {
//anything here happens on load... so hiding logged in stuff etc.
$('form[name=loginform]').submit(function() {
$.post('../_process/login.php', {loginuser: $('[name=loginuser]').val(), loginpass: $('[name=loginpass]').val()},
function(data) {
if (data.success) {
$('#loginactive').html(data.message);
} else {
//if it didnt work
}
}, 'json');
return false;
});
});
My PHP:
Thanks for even more help btw. You pay someone hundreds to come and teach you this in person!!
-
Steve posted...
I got it - you need the echo before json_encode($data)
I dropped the exit part when its successful, as it kills the program before the echo is executed.
Didn't change anything on the Javascript.
Thanks again, time to get some dynamic data in there now!
-
ShawnMcCool posted...
I'm working on a short series of Code Igniter PHP framework screencasts that really should be made before I dig into something that requires an infrastructure. I'll try to get that up over the next couple of weeks. Thanks for the feedback.
-
Shawn McCool posted...
@Johnny
I'll be adding the code to the post shortly.
-
Shawn McCool posted...
@Gagan
You need to make sure that your ajax_login.php is only returning a json object, no additional data. One good way to do this would be to use the Firefox extension "Firebug". You can open the firebug console and enable it for your page. Then, when you try to execute your script you'll see the specific call it makes to ajax_login.php. You'll be able to see both what is sent (the request) and the response. The response must be a valid json object. I notice that you're 'echo'ing quite a few extra values. I understand that this may have been debug code, but it will break jQuery's interpretation of the results.
-
Shawn McCool posted...
Thanks a lot man. One thing to mention. I did a few things wrong in this video. One, JSON is pronounced JASON, like the name. Another, to prevent your submit form from doing a full page submit I suggested to use return false; Instead it needs to look more like:
$('form').submit( function( event )
{
event.preventDefault();
// your code here
});
This is the proper way to prevent a submit in a form or a location change with a link.
-
Ray posted...
Good Job!
-
PuReWebDev posted...
Fantastic tutorial. I'm working to get my jQuery, CodeIgniter, Xhtml & CSS skills to the next level, and your tutorials are helping with that. Thanks.
-
Nikunj Sardhara posted...
Thanx Dude,..It helped me a lot..
you're awesome (y)
-
Nikunj Sardhara posted...
It helped me a lot
thanx dude
you're Osum.. (y)
-
Mr. Haynes posted...
I have tried several times but I cannot get the error message piece to work, it just does not show up?
Log In
Username:
Password:
</html
-
Mike Brown posted...
your awesome man. Really. This is perfect. I just clicked on your site and will look around now keep in mind, but I'm hoping you have something that will filter an email address (you used user) with this. You know, regular expression. I wanna add extra security to my site alongside my php script. Again though, you rock!
-
Kiko Fernandes posted...
Great tutorial!!!
Nice and clear with the informations.
See ya! :D
-
Justin posted...
Very helpful. Nice follow up to the "What Exactly is JSON?" post. These are great posts.
Could you build on this login example? I want to build a login form that checks against a database of existing usernames as the user enters their name in the field.
-
Julio posted...
Thanks man, it helped a lot!
-
Jose Chero posted...
Excelente vídeo amigo, me sirvió de mucho. Gracias!!
-
Johnny posted...
wish the code was available this is what im looking for.. but stopping and typing out the code is going to be a pain.
i also need to convert this to a mysql check too
thanks for the tut tho
-
John Bowling posted...
Shawn
I just want to say that this is a superb way of introducing someone to getting started with JSON & AJAX.
I followed it and made some silly mistakes.
I had to go back and check where I went wrong jumping from video to MX for coding but got there in the end, and maybe learnt more by having to write this from scratch.
Suggest that you don't need the scripts, making people follow the real value of the tutorial as demonstrated in the video.
FAULTLESS....
Thank you
-
John posted...
This was a great vid. Learning aside, my favorite part had to be when you were saying if "data.success == tr.... ennhhh". Haha, old habits die hard?
-
John posted...
Hellow, that's an wonderful video. It's really helpful for me. I was looking forward including jquery in my project and hopefully include the login form in my web project. Thanks again.
-
Helder posted...
Very nice job! I'm waiting for the next jquery + ajax and CI videos. :D
-
Gagan Shrestha posted...
i did what the screen cast did but did not get the result as it shows
Actually the callback function(data) didn't get the value passed from the php page.
i have shown my code given below
my php page is
exec($sql);
$rec = $ado->fetch($result);
$count=$ado->count($result);
echo $count;
//if username exist
//compare the password
echo "passwrod from database ".$rec['password'];" ";
echo "password from user ".$password;
if($rec['password']==$password)
{
//now set the session from here if needed
// $_SESSION['u_name']=$username;
$data['success']=true;
$data['redirect']='/user';
}
else {
$data['success']=false;
$data['message']="your message is wrong....";
}
echo json_encode($data);
?>
and my javascript ajax call is
$(document).ready(function()
{
$("#login_form").submit(function(){
//remove all the class add the messagebox classes and start fading
//check the username exists or not from ajax
$.post("ajax_login.php",
{
username:$('#username').val(),
password:$('#password').val()
} ,function(data){
if(data.success) {
alert("you are authenticated");
location.href=data.redirect;
}
else {
alert("you are not authenticated");
}
},'json');
return false; //not to post the form physically
});
});
please help me did i missed some thing?
Any help would be great...
-
Eric Chan posted...
Great tutorial. is pity cool, it help me better understanding how to use the json . thanks
-
Eduardo posted...
Sorry, found my mistake.
The php url was not correct, more precisely it was loginAjax.php whn it should be /phpbb2/loginAjax.php
Sorry!
-
Eduardo posted...
Hi to everyone.
The example works perfectly in firefox, but in IE it doesn't, i tried to debug the code, but can't debug the javascript part because the form is not submitting anythin, any idea?
-
Diraj posted...
Great job!....I have gone through some many tutorials before but I dint get anything out of them, but this one helped me to understand step by step..
-
Dex Barrett posted...
Thanks dude, i was trying to make a simple login making my own Ajax functions but i started having problems with it because the login check didnt really worked -it used to redirect before ajax responsetext arrived-. This is really what i was looking for. I already knew JQuery library but i wanted to keep it simple. But from now i'll let Jquery do the dirty job. Great site.
-
DenW posted...
Hi,
Great vid! Tought me a lot about structure of jguery..
One question: what's the editor you're using?
Thanks!
-
Darren Nolan posted...
Very impressed with your work. Very much so. I've been programming in PHP for years now, but when it comes to JavaScript I'm pretty limited. This was just what I was looking for in the next step towards having Ajax solutions in my projects.
-
Cheryl posted...
Thanks so much -- I needed a very simple login for an online form and this works perfectly. cheers, Cheryl
-
Balog Dominik posted...
Thank you :D its great.
-
Amy Crompton posted...
Great example that degrades very well.
Thanks
-
Alexander posted...
Nice tutorial but i can't make it work.
I'm having some troubles and i can't figure out the problem.
Can you post the code? Thanks, in this way maybe i will finally understand my problem.
Thanks and sorry for my poor english.
