load second dropdown values based on the first (how to implement AJAX)

[eluser]bhakti.thakkar[/eluser]
Hi,
i am new to CI.
View:

Code:

[removed]
function LoadSubprograms(Project_ID)
  {
//      alert(Project_ID);
    var ObjHttp= new CreateNewHttpObject();
    if(ObjHttp)
    {
      var dataSource = "<?=base_url()?>certificates/get_subprograms/"+Project_ID;

      ObjHttp.open("post", dataSource);
      ObjHttp.onreadystatechange = function()
      {
          alert('here');
        if (ObjHttp.readyState == 4 && ObjHttp.status == 200)
        {
          var returnVal=ObjHttp.responseText;
          alert(returnVal);
          document.getElementById(Subprogram_ID).value=returnVal;
        }
        ObjHttp.send(null);
      }
    }
  }

  function CreateNewHttpObject()    //Create an Instance of HTTP request.
{
    var xmlHttp=null;
    try{      // Firefox, Opera 8.0+, Safari
     xmlHttp=new XMLHttpRequest();
    }
    catch (e){          // Internet Explorer
      try{
        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e){
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
     }
     return xmlHttp;
  }

[removed]
<TABLE width="100%" class="table" cellpadding=3 cellspacing=1>
&lt;form name="mainform" method=post&gt;
<TR>
    <TD width="20%" class="tdheader">Projects</TD>
    <TD class="datatd"><select name="Project_ID" id="Project_ID">
        &lt;? foreach($query->result() as $row) { ?&gt;
            <option name="Project_ID" value="&lt;?=$row->Project_ID?&gt;">&lt;?=$row->Project_ID?&gt;</option>
        &lt;? } ?&gt;
    </select></TD>
</TR>
<TR>
    <TD class="tdheader">Subprogram</TD>
    <TD class="datatd">
<select name="Subprogram_ID" id="Subprogram_ID">
        &lt;? foreach($subprog_query ->result() as $row2) { ?&gt;
            <option value="&lt;?=$row2->Subprogram_ID?&gt;">&lt;?=$row2->Subprogram_ID?&gt;</option>
        &lt;? } ?&gt;
    </select> </TD>
</TR>
<TR>
    <TD class="tdheader">Certificate type</TD>
    <TD class="datatd">
    <select name="CertificateType">
        <option value="1">Transaction certificate</option>
        <option value="2">Import / Transaction certificate</option>
    </select></TD>
</TR>

Controller :

Code:

function get_subprograms($Project_ID)
{
        $this->load->library('ajax');
        $this->load->model('projects_model');

        $subprog_query = $this->projects_model->getSubprograms($Project_ID);
//        print_r($subprog_query);
        return $subprog_query;
        
    }

}

Nothing happens. can anyone please help me in this

[eluser]ELRafael[/eluser]
You didn't call the js function on the first dropdown. Try to put in the drowpdown something like this

Code:

<!-- put onchange below. the ci forum didn't show what i wrote :( -->
<select name="Project_ID" id="Project_ID">
</select>

You can try use JQuery, I think its a little better. An example:

Code:

[removed]
// <![CDATA[

$(document).ready(function() {
    
    $("select[@name=states]").change(function() {
            $("select[@name=city]").html('<option>Searching...</option>');
            $.post(base_url+'search_city', { uf: $(this).val() }, function (retorno) {
                    $("select[@name=city]").html(retorno);
            });
    });
                  
});

// ]]>
[removed]

//The view
<select name="states" id="states">
  <option value="0" selected="selected">Selecione um estado</option>
  &lt;?php foreach($states->result() as $state) : ?&gt;
  <option value="&lt;?php echo $state->id; ?&gt;">&lt;?php echo $state->name; ?&gt;</option>
  &lt;?php endforeach; ?&gt;
</select>

<select name="city" id="city">
</select>

In this case, every time that select with name states changed, will pass by post (you can change to get) to method search_city the var uf. This var have the id value. In the search_city method you return something like this

Code:

echo '<option value="'.$city_id.'">'.$city_name.'</option>';

[eluser]bhakti.thakkar[/eluser]
First a big thank for your reply. i am trying to implement JQuery in my application. what files are required to be included or downloaded for implementing JQuery with CI. i am googling a lot but not a single blog did i find which will help me to do the same. any link also which guided me will be appreciated

Thanks again. hope you help me

[eluser]ELRafael[/eluser]
www.jquery.com and click download. the downloaded file is the only that you'll need for almost all things.

IMO, I don't use Jquery with CI. I just put my js in a external file. When a need a PHP file to do something (like a SQL in database) then I use CI.

It's not difficult. I suggest you to use, and when you get doubt, call forum. Maybe another section of CI forum.

Good luck.

[eluser]bhakti.thakkar[/eluser]
thanks for that help. i downloaded the .js file and included it. but nothing seems to work. may be i am missing somthing. in the mean while i have tired to do the below. can check what is the problem. i am getting js error : "the requested url not found on the server".

but i have done the proper point to the controller/funtion_name/parameter

certificate_confirm.php

Code:

<?$this->load->view('header');?>
[removed]
    function getHTTPObject(){
          if (window.ActiveXObject)
              return new ActiveXObject("Microsoft.XMLHTTP");
          else if (window.XMLHttpRequest)
              return new XMLHttpRequest();
          else {
              alert("Your browser does not support AJAX.");
              return null;
          }
      }

    function LoadSubprograms(Project_ID){
        httpObject = getHTTPObject();
        if (httpObject != null) {
            httpObject.open("POST", "<?=base_url()?>certificates/get_subprograms/"+Project_ID, true);
            httpObject.send(null);
            httpObject.onreadystatechange = setOutput;
        }
    }
    
    function setOutput(){
        if(httpObject.readyState == 4){
            alert();
            alert(httpObject.responseText);
            document.getElementById('outputText').value = httpObject.responseText;
        }
    }
[removed]


<h2>Request a certificate</h2>
<TABLE width="100%" class="table" cellpadding=3 cellspacing=1>
&lt;form name="mainform" method=post&gt;
<TR>
    <TD width="20%" class="tdheader">Projects</TD>
    <TD class="datatd"><select name="Project_ID" id="Project_ID" >
        &lt;? foreach($query->result() as $row) { ?&gt;
            <option name="Project_ID" value="&lt;?=$row->Project_ID?&gt;">&lt;?=$row->Project_ID?&gt;</option>
        &lt;? } ?&gt;
    </select></TD>
</TR>
<TR>
    <TD class="tdheader">Subprogram</TD>
    <TD class="datatd"><span id="outputText"></span></TD>
</TR>
<TR>
    <TD class="tdheader">Certificate type</TD>
    <TD class="datatd">
    <select name="CertificateType">
        <option value="1">Transaction certificate</option>
        <option value="2">Import / Transaction certificate</option>
    </select></TD>
</TR>
<TR>
    <TD colspan="2">
    <ul id="logout_list">
    <li>&lt;?php echo anchor('logout/logout_routine', "Ok");?&gt;</li>
    <li><a href="&lt;?php echo site_url()?&gt;" class="lbAction" rel="deactivate">&lt;?="Cancel";?&gt;</a></li>
</ul></TD>

</TR>
&lt;/form&gt;
</TABLE>

certificates.php (Controller)

Code:

<?php

class Certificates extends Controller {

    function __construct()
    {
        parent::Controller();
        if (!$this->site_sentry->is_logged_in()) {redirect('login');}
    }

    // --------------------------------------------------------------------

    function index()
    {
        $data['page_title'] = "Request Certificate";

        $this->load->view('certificates/certificate_confirm', $data);
    }

    // --------------------------------------------------------------------

    function logout_routine()
    {
        $this->session->sess_destroy();
        redirect('logout');
    }

    // --------------------------------------------------------------------

    function reqcertificate()
    {
        $data['page_title'] = "Request certificate";
        $this->load->model('projects_model');
        $offset = (int) $this->uri->segment(3, 0);
        $data['query'] = $this->projects_model->getProjects($offset, 5000);
//        $data['subp'] = $this->projects_model->getSubprograms('4233');


        $this->load->view('certificates/certificate_confirm', $data);
    }

    function get_subprograms($Project_ID)
{
        $this->load->model('projects_model');
        $subprog_query = $this->projects_model->getSubprograms($Project_ID);
//        print_r($subprog_query);
        return $subprog_query;    
    }

}
?>

project_model.php

Code:

function getSubprograms($Project_ID)
    {

        $this->db->select('Subprogram_ID , dbo.uf_parmsel_subprogramname_of_subprogram(Subprogram_ID) AS SubprogramName ');
        $this->db->where('Project_ID', $Project_ID);
        
        $res= $this->db->get('Project_Subprogram_T');
              echo "<select id='Subprogram_ID' name='Subprogram_ID'>";
              foreach ($res->result() as $row){
                  echo '<option value="'.$row->Subprogram_ID.'">'.$row->SubprogramName.'</option>';
              }
              echo "</select>";
    }

Please please help me. i am going nuts from past 24 hrs. also i have attached the onchangeevent to the dd which is not gettig pasted : onChange="LoadSubprograms(this.value)"
<select name="Project_ID" id="Project_ID">
&lt;? foreach($query->result() as $row) { ?&gt;
<option name="Project_ID" value="&lt;?=$row->Project_ID?&gt;">&lt;?=$row->Project_ID?&gt;</option>
&lt;? } ?&gt;
</select>