Login

11-15-2012, 06:35 AM

[eluser]fatfishy[/eluser]
Hey I'm new to Codeigniter and I'm wondering why I'm having problems to combine codeigniter with jquery ajax form posts ..

this my form
test.php (views/test.php)

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

&lt;html&gt;

&lt;head&gt;

 [removed][removed]

  [removed]

$(document).ready(function() {

  $('#username').blur(function() {

    var username = $("#username").val();

 var dataString = 'username=' + username;

  alert(username);

 $.ajax({

  type: "POST",

  url: "/index.php/ajax/username_taken",

  data: dataString,

  success: function(msg) 

        {

   $("#status").html(msg);

  }

  });

  });  

});

  &lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;form action="" method="post"&gt;

 username: &lt;input type="text" id="username" /&gt; &lt;br /&gt; 

&lt;/form&gt;

&lt;div id="status"&gt;&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

yeah I know I can user form helper, I'm just playing with it ...

and this is controller (controllers/ajax.php)

Code:
&lt;?php

class Ajax extends CI_Controller {

  public function username_taken()

  {

    $this->load->model('Login');

    $username = trim($_POST['username']);

    if ($this->Login->login_check($username)) 

      echo "exists";

   else

 echo "not exists";

  }

}

/* End of file ajax.php */

/* Location: ./system/application/controllers/ajax.php */

?&gt;

and this is the model, login.php (models/login.php)

Code:
&lt;?php

class Login extends CI_Model {

 function login_check($username)

 {

  $this -> db -> select('id, username');

  $this -> db -> from('users');

  $this -> db -> where('username = ' . "'" . $username . "'");

  $this -> db -> limit(1);

  $query = $this -> db -> get();

  if($query -> num_rows() >= 1)

  {

   return true;

  } else

   return false;

 }

}

?&gt;

now, I do getting the alerts with the username I've putted in, but I don't get the result from the server side (exists / not exists) ... I wonder why, what I'm doing wrong.

thanks a lot for the help Smile

11-15-2012, 06:51 AM

[eluser]johnpeace[/eluser]
What's firebug show as the return value from your ajax call?

11-15-2012, 06:53 AM

[eluser]fatfishy[/eluser]
firebug = ?

if you mean what the result in the div area (where the result suppost to be posted) then its blank .. nothing

11-15-2012, 06:57 AM

[eluser]johnpeace[/eluser]
Does the request complete successfully? (watch the ajax request on the 'Net' tab)

11-15-2012, 06:57 AM

[eluser]benton.snyder[/eluser]
If I were a gambling man, I would bet that the problem is the following line:

url: "/index.php/ajax/username_taken"

But if you can paste the client's post and the server's response we could help better.

11-15-2012, 06:59 AM

[eluser]benton.snyder[/eluser]
Firebug is a priceless Firefox extension that makes troubleshooting ajax, as well as a plethora of other issues, extremely easy.

For instance, you can click into the Console tab, click on Persist and then refresh the webpage in question. You will then be able to see what the client is sending to the server, and how the server responds.

If you want to be a web developer, you need firebug. Period.

11-15-2012, 07:01 AM

[eluser]fatfishy[/eluser]
well I tried now to check it with an alert in the code,

Code:
success: function(msg) 

         {

   alert("yes");

   $("#status").html(msg);

  }

and the message doesnt come, then I guess the request doesnt get complete successfully ...
I've no idea whats the ‘Net’ tab is, if can be more specific it will be great.

[quote author="benton.snyder" date="1352987979"]Firebug is a priceless Firefox extension that makes troubleshooting ajax, as well as a plethora of other issues, extremely easy.

For instance, you can click into the Console tab, click on Persist and then refresh the webpage in question. You will then be able to see what the client is sending to the server, and how the server responds.

If you want to be a web developer, you need firebug. Period. [/quote]

I'm using Chrome, there is something like this in Chrome browser ?
thanks =)

11-15-2012, 07:12 AM

[eluser]johnpeace[/eluser]
yah, but it's not as good. You should look at Firebug.

In Chrome though, right click -> Inspect Element -> select the Network tab. That'll show you all client/server requests. You can trigger your ajax request and see what happens there.

Quote:If you want to be a web developer, you need firebug. Period.

Yup, pretty much.

11-15-2012, 07:13 AM

[eluser]fatfishy[/eluser]
I guess you guys talked about this ?

http://i49.tinypic.com/14cxon4.jpg

then why am I getting 500 Internet Server error ?

11-15-2012, 07:14 AM

[eluser]benton.snyder[/eluser]
Try changing the url: to the full url. It is likely failing because you are posting to a webpage that doesn't exist and therefore won't respond.

Chrome has a web developer's extension installed by default that is pretty good. You can simply right-click on your webpage and left-click on Inspect Element. In the console tab you can watch the javascript requests, but it is not as detailed nor intuitive as Firebug. Personally, I browse with Chrome, but I develop with Firefox. Firebug really is invaluable for webdev.