EllisLab text mark
Advanced Search
     
Use AJAX to validate a field
 
xcristi
Posted: 05 September 2007 03:13 AM   [ Ignore ]
Joined: 2007-01-24
16 posts

Hello guys,

So, I know little about AJAX, but I need to implement such thing in a CI application. I just need from some directions, because I’m a little confuse here…

I have a form (view) with a input text field, let’s say ‘name’ and a DB with a table that contains field ‘names’. What I want to do is to verify the value entered for name in table and display a message ‘No duplicate’ or ‘Duplicate name’ (or something like that).

I load the library ajax but I haven’t an idea what to put into view and what into controller. Maybe you could show me some direction to follow.

Thanks.
 
rogierb
Posted: 05 September 2007 04:15 AM   [ Ignore ]   [ # 1 ]   [ Rating: 0 ]
Avatar
Joined: 2007-05-24
717 posts

Implementing ajax into CI is a piece of cake. You can create a controller called ‘ajax’ or some other name you fancy. This controller is doing the checking, ofcourse db stuff go into the ‘ajax’ model, view stuff into view.

In your view which has the input field, do an ajax call like you normally would, where you call you ajax controller. like: hhttp://yoursite.com/ajax/checkmyfield/withthisvalue.

so you have:
ajax controller
ajax model
ajax field

and your nomal controller/view

Hope this helps.

 Signature 

The art of managing is to explain tomorrow why yesterdays solution doesn’t work today.
livecodes.eu
 
xcristi
Posted: 05 September 2007 05:05 AM   [ Ignore ]   [ # 2 ]   [ Rating: 0 ]
Joined: 2007-01-24
16 posts

Let’s say I have something as

<input type="text" name="zuzu" id="zuzu" onBlur="..."/> 

A controller (without a model for the simplicity sake):

<?php

class Ajaxtest extends Controller {

function Ajaxtest() {
    parent::Controller();
}

function index() {
    return "ajax test";
}    

}
?> 

and in my view <div id=“test”></div>.

How can I display “ajax test” in the div above using ajax? What get to onBlur event?

Maybe there are silly questions, but have mercy, I really try to understand it.
Thanks
 
deviant
Posted: 05 September 2007 05:40 AM   [ Ignore ]   [ # 3 ]   [ Rating: 0 ]
Joined: 2007-07-24
82 posts

It really depends if you are using a JS framework and which one you are using.
 
rogierb
Posted: 05 September 2007 05:50 AM   [ Ignore ]   [ # 4 ]   [ Rating: 0 ]
Avatar
Joined: 2007-05-24
717 posts

I would do something like this:

<input type="text" name="zuzu" id="zuzu" onBlur="..."/><div id="ajaxreply"></div> 

And I would not use the index() inside the Ajaxtst class but rather:

function check_field_something($value_to_check=null) {
   echo "this is the reply" //goes into view!
} 

so I can re-use the ajax controller.

Now for the “onBlur” part. This all depends on you ajax class.
Let’s dasy for arguments sake you normally use callAjax(“http://somesite/ajax”) as an ajax call. Now you would use

.. onBlur('http://mysite.com/ajaxtest/'+document.formname.zuzu.value()) 

to get a call to the controller. But it all depends on your ajax library.

 Signature 

The art of managing is to explain tomorrow why yesterdays solution doesn’t work today.
livecodes.eu
 
xcristi
Posted: 05 September 2007 06:24 AM   [ Ignore ]   [ # 5 ]   [ Rating: 0 ]
Joined: 2007-01-24
16 posts

I want to use AJAX for CodeIgniter (http://codeigniter.com/wiki/AJAX_for_CodeIgniter/)

p.s. if you think there are easier solutions, please let me know
 
rogierb
Posted: 05 September 2007 07:53 AM   [ Ignore ]   [ # 6 ]   [ Rating: 0 ]
Avatar
Joined: 2007-05-24
717 posts

I would go for jquery. Very lightweight and quite easy to understand. There are some good examples on how to use jquery on the jquery site.

Besides the ajax part, jquery can be used for some very iteresting effects.

But then again, picking an javascript library is a matter of personal taste.

 Signature 

The art of managing is to explain tomorrow why yesterdays solution doesn’t work today.
livecodes.eu
 
xcristi
Posted: 05 September 2007 08:17 AM   [ Ignore ]   [ # 7 ]   [ Rating: 0 ]
Joined: 2007-01-24
16 posts

I will try JQuery and be back with questions smile

Thanks rogieb.
 
xcristi
Posted: 05 September 2007 09:37 AM   [ Ignore ]   [ # 8 ]   [ Rating: 0 ]
Joined: 2007-01-24
16 posts

I try to put at work the codeigniter class from http://codeigniter.com/wiki/jQuery/.
Has anyone a short example using it? Maybe form related?

Thanks.
 
rogierb
Posted: 05 September 2007 10:13 AM   [ Ignore ]   [ # 9 ]   [ Rating: 0 ]
Avatar
Joined: 2007-05-24
717 posts

Just include the the jquery JS in your template.


In your view:

function do_onblur() {
$("your_responsetext_id").append("
    $.ajax({
         type: "POST",
      url: "<?=base_url()?>/ajax/function/"+$("input[@name='youtfieldname']").val()+"/,
      async: false
     }).responseText;
");
} 

and add do_onBlur() to your onblur function.
No need to incorporate jquery into a class unless you have the time.

 Signature 

The art of managing is to explain tomorrow why yesterdays solution doesn’t work today.
livecodes.eu
 
xcristi
Posted: 06 September 2007 09:13 AM   [ Ignore ]   [ # 10 ]   [ Rating: 0 ]
Joined: 2007-01-24
16 posts

Hey man, thanks again.
After struggling these days with the new (for me) jQuery, I managed to get some results.

In my view there is something as:

$(document).ready(function(){
    $('#statiune').bind('blur', function(){
        $('#ajaxreply').text(
            $.ajax({
                type: 'POST',
                url: 'http://link/on/my/site',
                data: 'z=' + $('#statiune').val(),
                async: false,
            }).responseText
        );
        $('#ajaxreply').fadeOut(3000);
   });
}); 

where #statiune is ID for the field I need to check. I took its value (data: ‘z=’ + $(’#statiune’).val()) and POSTit to a function in my controller (indicated in URL). In that function take $this->input->post(‘z’) and use it in a model function to do the work. The reply message is handled by #ajaxreply in my view.

I wrote these lines for the ones who can be interested in this kind of validation.

Thanks for you help.