AJAX - CodeIgniter - Forms

[eluser]Y0shi[/eluser]
Hi dudes,

I got a bit into developing codeigniter functions contenting ajax parts.

I wanted to change a dropdown's content if another dropdown in the form changes. So they're kind a dependent on each other. More exactly I wanted to enhance a category selector I built and therefore there are categories and their subs which I want to be chosen by the dropdowns.

Anyone of you got some code examples? I found some via google and on the board, but they were not really helpful to my problem.

Hope you can help me
Thanks in advance.

Regards

[eluser]Twisted1919[/eluser]
It's pretty simple .
Build your form with the two selects , the first one will be populated from database when page loads .
The secomd one , that contains subcategories , you will let it empty , than using javascript(jquery), when the first select changes(see .change() ) you will do a database query (usnig $.ajax() from jquery )and select the subcategories that belongs to that category . You will build your result to return in the format like: <option value="subcat1">Subcat1</option>.
After that , simple assign the result to the id of the second select(the one for your subcategories)and you are done .

[eluser]Y0shi[/eluser]
Hi,

thanks for the fast reply.

I was that far, that I wrote a .change function but somehow I didnt get it work. Are there any codeexamples for this? I would be very grateful if you could link them.

Regards

[eluser]mattpointblank[/eluser]
using jQuery:

Code:

$().ready(function() {

    $('#select_1').bind("change", function(){
        id = $(this).attr('value');
        corresponder = $('#select_2'); // next select menu
        $(corresponder).html('<option>Loading...</option>');

              $.ajax({
            type: "POST",
             url: "&lt;?php echo site_url(); ?&gt;/controller/function",
            data: 'parentID='+id,
            success: function(response){
            $(corresponder).html('').append(response);
            }
         });


    });

});

Your controller needs to echo something like this for each subcategory:

<option value="id_of_subcategory">Name of subcategory</option>

[eluser]Tandubhai[/eluser]
$().ready(function() {

$('#select_1').change(function(){
id = $(this).attr('value');
if(id=='') return false;
corresponder = $('#select_2'); // next select menu
$(corresponder).html('<option>Loading...</option>');

$.ajax({
type: "POST",
url: "&lt;?php echo site_url(); ?&gt;/controller/function",
data: 'parentID='+id,
success: function(response){
$(corresponder).html('').append(response);
}
});


});

});

[eluser]metrofader[/eluser]
[quote author="mattpointblank" date="1257284669"]using jQuery:

Code:

$().ready(function() {

    $('#select_1').bind("change", function(){
        id = $(this).attr('value');
        corresponder = $('#select_2'); // next select menu
        $(corresponder).html('<option>Loading...</option>');

              $.ajax({
            type: "POST",
             url: "&lt;?php echo site_url(); ?&gt;/controller/function",
            data: 'parentID='+id,
            success: function(response){
            $(corresponder).html('').append(response);
            }
         });


    });

});

Your controller needs to echo something like this for each subcategory:

<option value="id_of_subcategory">Name of subcategory</option>[/quote]



So my controller needs to $_GET['parentID'] in order to get the value from select_1? How does the controller receive the value from select_1?

[eluser]metrofader[/eluser]
Just to be clear, I'm using a view to get the 'parentID' not a Controller. It's not working for me. Is it because I'm trying to $_GET['parentID'] from the view instead of the Controller?

[eluser]mattpointblank[/eluser]
You can't access $_GET in CodeIgniter anyway, but yes, you should (properly) be trying to access it from a controller. Look at the code I posted - the jQuery $.ajax() function is using a type of 'POST' - this means that in your controller, you can do $this->input->post('parentID') to get the value.

[eluser]Watermark Studios[/eluser]
Tandubhai makes a good point about checking for id == '' before running your ajax function. You don't want to even tie up resources running the ajax call until you know they have selected something.

Other than that, I agree with Matt. IMHO, JQuery is the way to go. Note: You can use $_GET in CodeIgniter, but you have to configure it to use parameterized urls instead of what we are used to using. $_POST is cleaner and generally safer anyway.

Good luck,

Ken