Bad MVC - how to avoid it when using AJAX dropdown?

[eluser]imcl[/eluser]
Hello friends,

At the risk of exposing my ignorance in CI / AJAX and getting pummeled for what I'm currently doing, can anyone help me with this issue?

I have a simple 2-tier dropdown:

- in the first dropdown you select your 'plant'.

- onChange, this dropdown runs controller /plant/Subtype/ via AJAX.

- /plant/Subtype/ has a method that calls /plant_model/Subtype_model

- /plant_model/Subtype_model runs a query that fetches all subtypes for that specific plant.

- now I know that the right thing to do would be to return $query; and send it back to the controller -- then send it to the view in order to populate a form_dropdown().

- but what I'm doing is echoing straight form the model to the browser:

Code:

// plant_model/subtype_model/
echo form_dropdown('plant_subtype', $options, $row->subtype);

Before you splatter you screen with projectile puke, understand that I'm doing this because the AJAX method I'm using clears up the DIV where the second dropdown should go.

Code:

function getPlantSubtype(strURL) {
            var req = getXMLHTTP();
            if (req) {
                req.onreadystatechange = function() {
                    if (req.readyState == 4) {
                        if (req.status == 200) {
                            document.getElementById('plant_subtype')[removed]=req.responseText;
                        } else {
                            alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                        }
                    }
                }
                req.open("GET", strURL, true);
                req.send(null);
            }
        }

In that case, how would I run a loop through the items from the $query result if they were passed back to the controller, then to the view?

If anyone could give me the roadmap, it would be much appreciated!

Thanks.

[eluser]Agustín Villalba[/eluser]
I recommend you to pass the result from the model to the controller as an array, and after pass it to a view called "ajax_generic_dropdown_view" which receives the array and iterates over it generating the options of the dropdown.

[eluser]JuanitoDelCielo[/eluser]
Every layer should do their job

Controller

Code:

function subcategories () {
        
    $category_id = $this->uri->segment(3);

    // The Model
        
    $query = $this->categories->subcategories($category_id);
                    
    $this->load->view('selectsubcategories', array('query' =>$query));
                
}

view

Code:

<?php foreach( $query->result() as $subcategory ) :?>
<option value="&lt;?php echo $subcategory->subcategory_id; ?&gt;">&lt;?php echo $subcategory->name;?&gt;</option>
}

Finally JS

Code:

url = 'http://localhost/../';
    
    $('select[name=category]').change(function(){
        
        category = $(this).attr('value')
        
        $('select[name=subcategory]').attr('disabled', 1);
        
        $('select[name=subcategory]').load(
            url + 'offer/subcategories/' + category,
            function complete(){
                $('select[name=subcategory]').attr('disabled', 0);
            }
        );
        
        
        
    });
    
    $('select[name=category]').trigger('change')

[eluser]imcl[/eluser]
OK thanks to both - will try your suggestions