Jquery Dropdown

[eluser]RobertB.[/eluser]
I can't generate the second dropdown. Only if I print_r() I get the values inside the second one. If I try to load the view I get a blank page with this error "Firebug cannot find _firebugConsole element true Window search"

What am I doing wrong.

VIEW

Code:

<"script" type="text/javascript">

function bindSub()
{
    $.ajax({
           url: "search/subCats",
           type: "POST",
           dataType: "html",
           data: $('#search_form').serialize(),
           success: function (response)
                {
                   var dynamic_options = $("*").index( $('.dynamic')[0] );
                   if ( dynamic_options != (-1)) $(".dynamic").remove();
                    $("#sub").append(response);
                    }
                  
          });
    
          return false
}
        
<"/script">
        
    &lt;?php
        $form_data = array('id' => 'search_form');
    ?&gt;
    
    &lt;?=form_open('search/businesses', $form_data)?&gt;

        <select id="cat" name="Categories">
            <option value="-">-</option>
            &lt;?php foreach($categories as $row => $category) : ?&gt;
                <option value="&lt;?=$category->id?&gt;">&lt;?=$category->category?&gt;</option>
            &lt;?php endforeach; ?&gt;
        </select>
        
        <select id="sub" name="subcats">
            <option value="-">-</option>
            &lt;?php foreach($subcats as $row => $subcat) : ?&gt;
                <option value="&lt;?=$subcat->id?&gt;">&lt;?=$subcat->subcat?&gt;</option>
            &lt;?php endforeach; ?&gt;
        </select>

        <p><button class="button" type="submit">Submit</button></p>

    &lt;?=form_close()?&gt;
    
</div>

CONTROLLER

Code:

function index()
    {
        $this->categories();            
    }
    
    function categories()
    {                        
        $data['categories'] = $this->search->getCategories();
        
        $data['title'] = "City Sniff. Local businesses Directory";        
        $data['main_content'] = 'search/search_view';        
        $this->load->view('new/template', $data);
    }
    
    function subCats()
    {                        
        $cat = $this->input->post('Categories');
        
        //die();
                
        $data['subcats'] = $this->search->getSubCats($cat);
        
        print_r($data['subcats']);
        //$data['title'] = "City Sniff. Local businesses Directory";
        //$data['main_content'] = 'search/search_view';
        //$this->load->view('new/template', $data);
        //$this->load->view('search/search_view', $data);
    }

[eluser]RobertB.[/eluser]
Anyboby? The only way is echoing the results in the controller?

[eluser]pickupman[/eluser]
You can render the view, and save the output from the view using TRUE as the third parameter. What I have is a folder structure like /views/search/(regular views) and /views/search/jquery/(jquery views). I recently started using a template library that I can reuse blocks of views, and no longer need these extra ajax views. You could use this as well.

Code:

function subCats()
    {                        
        $cat = $this->input->post('Categories');
        
        $data['subcats'] = $this->search->getSubCats($cat);
            
        $output = '';        
        foreach($data['subcats'] as $subcat){
           $output .= '<option value="'.$options[$subcat-id].'">'.$subcat->category.'</option>';
        }
        echo $output;        

    }

[eluser]RobertB.[/eluser]
Thanks,
That was what I need it.
Working great.

[eluser]RobertB.[/eluser]
Hey again,
One more question. Theres anyway for Jquery to detect which variable returned the value from the controller.

CONTROLLER

Code:

$output1= 1;
$output2= 2;

if($this){
echo $output1;
}else{
echo $output2;
}

VIEW

Code:

<_script>
var output1 = &lt;?=$output1?&gt;;
if(!output1){                
$("#div2").html(html);
}else{
$('#div1').html(html);
}
<_/script>

Obviously this does NOT work I'm just trying to get the basics on how to do it

[eluser]pickupman[/eluser]
You would want to change to dataType to 'json' format in your ajax call, and then use:

Code:

//In your controller
        $data['output'] = '';        
        foreach($data['subcats'] as $subcat){
           $data['output'] .= '<option value="'.$subcat-id.'">'.$subcat->category.'</option>';
        }
        $data['element'] = 'div1';
        
        echo json_encode($data);

//In your view
$.ajax({
        //keep your old setup stuff here
        dataType: 'json', //change to this
        success: function(response){
           $('#' + response.element).append(response.output); //this will update element specified in controller and append output to it
        }
});

[eluser]RobertB.[/eluser]
Ur the MAC,
It works like a charm I would never figure that out by myself.

Thanks

[eluser]pickupman[/eluser]
Thanks...with AJAX, json is your friend.