CodeIgniter Forums
load second dropdown values based on the first (how to implement AJAX) - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived General Discussion (https://forum.codeigniter.com/forumdisplay.php?fid=21)
+--- Thread: load second dropdown values based on the first (how to implement AJAX) (/showthread.php?tid=12485)

load second dropdown values based on the first (how to implement AJAX) - El Forum - 10-21-2008

[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

load second dropdown values based on the first (how to implement AJAX) - El Forum - 10-21-2008

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

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

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

Code:
[removed]
// &lt;![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>';


load second dropdown values based on the first (how to implement AJAX) - El Forum - 10-21-2008

[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

load second dropdown values based on the first (how to implement AJAX) - El Forum - 10-22-2008

[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.

load second dropdown values based on the first (how to implement AJAX) - El Forum - 10-22-2008

[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:
&lt;?$this->load->view('header');?&gt;
[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", "&lt;?=base_url()?&gt;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:
&lt;?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;    
    }

}
?&gt;

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>