[eluser]jblack199[/eluser]
Okay, so I've been learning both jquery and CI at the same time. Having never used either its not the easiest thing in the world to do however I'm getting there. After some CSS issues, I finally got my view looking and performing so far how I want it for my login form.
Code: <div id="tabs">
<ul>
<li><a href="#login">Login</a></li>
<li><a href="#tabs-3">Recover password</a></li>
</ul>
<div id="login">
<?php echo form_open('adm/login/submit', 'id="frmLogin"'); ?>
<ul>
<li>
<label for="email" class="desc">
Email:
</label>
<div>
<?php echo form_input('email', '', 'id="email" class="field text full"'); ?>
</div>
</li>
<li>
<label for="password" class="desc">
Password:
</label>
<div>
<?php echo form_password('password', '', 'id="password" class="field text full"'); ?>
</div>
</li>
<li class="buttons">
<div>
<?php
$data = array(
'name' => 'submit',
'id' => 'submit',
'type' => 'submit',
'class' => 'ui-state-default ui-corner-all float-right ui-button',
'content' => 'Login'
);
echo form_button($data);
?>
</div>
</li>
</ul>
<?php echo form_close(); ?>
[removed]
$('form#frmLogin').submit(function() {
$.ajax({
url: $(this).attr('action'),
type: 'POST',
data: $(this).serialize,
success: function(msg){
alert(msg);
}
});
return false;
});
[removed]
</div>
<div id="tabs-3">
<?php echo form_open('adm/login/recover', 'id="frmRecover"'); ?>
<ul>
<li>
<label for="email" class="desc">
Registered Email:
</label>
<div>
<?php echo form_input('email', '', 'tabindex="1" class="field text full" id="email"'); ?>
</div>
</li>
<li class="buttons">
<div>
<?php
$data = array(
'name' => 'submit',
'id' => 'recover',
'type' => 'submit',
'class' => 'ui-state-default ui-corner-all float-right ui-button',
'content' => 'Send new password'
);
echo form_button($data);
?>
</div>
</li>
</ul>
<?php echo form_close(); ?>
[removed]
$('form#frmRecover').submit(function() {
$.ajax({
url: $(this).attr('action'),
type: 'POST',
data: $(this).serialize,
success: function(msg){
alert(msg);
}
});
return false;
});
[removed]
</div>
</div>
So all that works, i also have a div for my error message:
Code: <div class="response-msg error ui-corner-all">
<span>Euccess message</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
cont. next post
[eluser]jblack199[/eluser]
So first thing I need to know is how to structure my query to basically like like this:
$query = "SELECT * FROM users WHERE email = '".$_POST['email']."' AND password LIKE BINARY MD5('".$_POST['password']."') AND usergroup = '3' AND status = '1'";
Then handling the output being that its done with jquery.... if there are errors, I need to figure out how to tell JS there are errors and what they are or if there arent errors so it can automatically redirect to the inside admin panel...
Only thing I can think of there, is if there are errors (form validation errors, username/password combo errors, or even not the proper usergroup or status) i'd need to echo out the word 'error' for JS, then requery another function just to obtain the list of errors.. and thats the best i can come up with.
[eluser]jblack199[/eluser]
Figured out how to setup the query:
Code: $query = $this->db
->where('email', $this->input->post('email'))
->where("password like binary '".md5($this->input->post('password'))."'", NULL, FALSE)
->where('usergroup', '3')
->where('status', '1')
->get('users')
->result();
Now just to figure out how to handle the errors that could occur... While I was figuring out the query I thought of a possible other way to handle it. Since, if it logs me in correctly i'll be redirecting anyway -- wouldnt I just be able to call redirect(); instead of passing it back through jquery and only pass info back to jquery IF there are errors to be displayed?
[eluser]pickupman[/eluser]
First just make sure everything is working with javascript for degradation purposes. When using .ajax() return something from your controller in json, and on the success: callback process the json.
Code: $('form#frmRecover').submit(function() {
$.ajax({
url: $(this).attr('action'),
type: 'POST',
data: $(this).serialize,
success: function(data){
if(data.response = 'true'){
$(".response-msg").empty().append(data.message);
}
}
});
return false;
});
//In controller/action method
//Check if page is coming via AJAX
if($this->input->is_ajax_request()){
$data['response'] = 'false'; //set default json response
//Process login
$user = $this->usermodel->login( $this->input->post('email'), $this->input->post('password') ); //run your login query
if($user){
$this->session->set_userdata('id', $user->id);
$this->session->set_userdata('logged_in', TRUE);
$data['response'] = 'true'; //for json
$data['message'] = 'Welcome back ' . $user->first_name;
}
return json_encode($data); //return JSON back to jQuery
}
[eluser]jblack199[/eluser]
hmm i'll give something similar to that a try and see what happens. while I wont be using set_userdata i'll have another session control that i need to set multiple items....
in the end, every page load it will not just check if logged_in = true it'll check and ensure that the time hasnt expired, and that the username/password is still valid and that the account is still active and in the right usergroup... but i like where you've taken me.. we'll see how it works probably tomorrow or super late tonight.
[eluser]jblack199[/eluser]
I've been playing around with the code and I've figured out how to handle it (the json_encode didnt work at all).. but by figuring it out, i've uncovered a nasty issue...
when i submit the form via ajax the $_POST and $this->input->post variables are completely empty... so something is going on that's making it so that the form fields aren't being submitted when done through ajax.. however when i remove the return false; from my javascript and allow the page refresh, when the page refreshes everything is working just fine.
any ideas?
[eluser]pickupman[/eluser]
Change javascript to serialize.to serialize() in the the line for the data element in your ajax() event.
[eluser]jblack199[/eluser]
Yeah I figured that out shortly after I posted I felt dumb. Though one thing I still can't figure out is why in the world I cant put my JS in an external JS file say login.js and include it in the head.
I've tried .bind, i've drive document.ready i've tried many things and it just doesn't seem to pickup the JS code for the submission. I hate having my JS inside my HTML other than that, everything is working splendidly..
as far as data handling, I figured out exactly how to do it and i'm surprised I didnt see it before. if we log in, i pass back 'loggedin' or something else like that to tell JS that it did infact login. and in my JS i check if the response equals 'loggedin' or whatever i put it redirects, otherwise it shows the error and places the UL in the div.
[eluser]pickupman[/eluser]
If you want to include the js in an external file, just make sure the external file as the < script > block there as well, along with your document ready function to run the js.
Code: < script s r c = "linkto/external.js">< / script> #whitespace for editor protection
//In linkto/external.js
< script type="text/javascript">
jQuery(document).ready(function($){
//Form submission code here
});
[eluser]jblack199[/eluser]
I know how to include the js from an external file... i'm new to CI not development in general... what i'm saying is when i do it, it doesn't load... jquery loads just fine, as does my tabs.js, but trying to include my login.js the login functions just arent working at all...
but i've tried the following:
Code: $(document).ready() { }
$('#frmLogin').bind('click', function() {});
and just having the query function (listed above) in there too... i've checked the source to ensure the path is correct, i've checked and ensured the file is actually there... it just doesn't seem to want to work when its loaded from an external file...
|
