Chained drop downs not populating

Question

I'm working on a chained drop down to filter data. My first drop down is populating fine but the second does not seem to be working. I've been trying to find the issue for a bit now but to no avail. I'm using javascript to make the chain work.

Model

function get_sub_list(){
    $this->db->select('sub_name');
    $query = $this->db->get('subdivisions');

    if ($query->num_rows() > 0)
        {
            return $query->result();
        }else{
            return 'No Infom Found';
        }
}

function get_xings($subdivision){
    $this->db->select('Street');
    $this->db->where('RrSubDiv', $subdivision);
    $query = $this->db->get('xings');
    log_message('info', "Value of subdivision was $subdivision");
        if ($query->num_rows() > 0)
        {
            return $query->result_array();
        }else{
            return 'No Subs Found';
        }
}

View

<?php
        $subdivision = array('Choose a Sub');
        foreach($all_subs as $sub){
            $subdivision[$sub->sub_name] = $sub->sub_name;
        }

        echo form_label('Subdivision: ', 'subs');
        echo form_dropdown('subs', $subdivision, '', 'id="subdrop"');
        echo form_label('Xing: ', 'xings');
        echo form_dropdown('xing', array('Choose a State First'), '', 'id="xingdrop"');
        echo br(3);
        echo form_submit('zipsubmit', 'Get Data');

    ?>

</div>
<script type="text/javascript" src="<?php echo base_url(); ?>js/dropdown.js"></script>

Controller

public function multi_drop(){
        $this->load->model('Xings_model','',TRUE);
        $data['all_subs'] = $this->Xings_model->get_sub_list();
        $this->load->view('atis/create_xing', $data);
    }
    public function ajaxdrop(){
        if($this->_is_ajax()){
            $this->load->model('Xings_model','', TRUE);
            $subdivision = $this->input->get('subdivision', TRUE);
            $data['sub_xings'] = $this->Xings_model->get_xings($subdivision);
            //$this->load->library("security");
            //$data = $this->security->xss_clean($data);
                echo json_encode($data);
            }else{
                echo "Apperently is_ajax returned false!";
                show_error('This method can only be accessed internally.', 404);
        }
    }

    public function handle_submission(){
        $this->load->view('multi_response');
    }

    function _is_ajax(){
        return
    (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));
    }

Javascript

(function() {
    var httpRequest;
    dropper =document.getElementById("subdrop");
    dropper.onchange = function() {
        makeRequest('localhost/highball061516/atis/xing/ajaxdrop?subdivision=' + dropper.value);
    };

    function makeRequest(url) {
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            httpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE
            try {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
    }
    if (!httpRequest) {
        altert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', url);
    httpRequest.setRequestHeader('X-Requested-With','XMLHttpRequest');
        httpRequest.send();
    }

    function alertContents(){
        if (httpRequest.readyState === 4) {
            if (httpRequest.Status === 200){
                var data = JSON.parse(httpRequest.response);
                var select = document.getElementById('xingdrop');
                if(emptySelect(select)){
                    for (var i = 0; i < data.sub_xings.length; i++){
                        var el = document.createElement("option");
                            el.textContent = data.sub_xings[i].Street;
                            el.value = data.sub_xings[i].Street;
                            select.appendChild(el);
                    }
                }
            }else{
                alert('There was a problem with the request.');
            }
        }
    }

    function emptySelect(select_object){
        while(select_object.options.length > 0){
            select_object.remove(0);
        }
        return 1;
    }
})();

Danny Fardy Jhonston Bermúdez · Answer 1 · 2017-01-05T22:44:27.260

Change .Status to .status at:

if (httpRequest.Status === 200){

Check this reference: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status

Update: I found an issue with the curly braces in your code.

This version should be work properly.

(function() {
  var httpRequest;
  dropper = document.getElementById("subdrop");
  dropper.onchange = function() {
    makeRequest('localhost/highball061516/atis/xing/ajaxdrop?subdivision=' + dropper.value);
  };

  function makeRequest(url) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
      }
    }
  }
  if (!httpRequest) {
    altert('Giving up :( Cannot create an XMLHTTP instance');
    return false;
  }
  httpRequest.onreadystatechange = alertContents;
  httpRequest.open('GET', url);
  httpRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  httpRequest.send();

  function alertContents() {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        var data = JSON.parse(httpRequest.response);
        var select = document.getElementById('xingdrop');
        if (emptySelect(select)) {
          for (var i = 0; i < data.sub_xings.length; i++) {
            var el = document.createElement("option");
            el.textContent = data.sub_xings[i].Street;
            el.value = data.sub_xings[i].Street;
            select.appendChild(el);
          }
        }
      } else {
        alert('There was a problem with the request.');
      }
    }
  }

  function emptySelect(select_object) {
    while (select_object.options.length > 0) {
      select_object.remove(0);
    }
    return 1;
  }
})();

Update 2: Use a Custom Helper XMLHttpRequest Function.

(function ()
{
    var httpRequest;
    var dropper = document.getElementById("subdrop");
    dropper.onchange = function ()
    {
        makeRequest(
        {
            url: 'localhost/highball061516/atis/xing/ajaxdrop?subdivision=' + dropper.value,
            type: 'GET',
            callback: alertContents
        });
    };
    function makeRequest(options)
    {
        httpRequest = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
        options.contentType = "application/x-www-form-urlencoded";
        httpRequest.open(options.type, options.url, options.async || true);
        httpRequest.setRequestHeader("Content-Type", options.contentType);
        httpRequest.setRequestHeader("X-Requested-With","XMLHttpRequest");
        httpRequest.send((options.type == "POST") ? options.data : null);
        httpRequest.onreadystatechange = options.callback;
        return httpRequest;
    }
    function alertContents()
    {
        if (httpRequest.readyState === 4)
        {
            if (httpRequest.status === 200)
            {
                var data = JSON.parse(httpRequest.response);
                console.log(data);
                var select = document.getElementById('xingdrop');
                if (emptySelect(select))
                {
                    for (var i = 0; i < data.sub_xings.length; i++)
                    {
                        var el = document.createElement("option");
                        el.textContent = data.sub_xings[i].Street;
                        el.value = data.sub_xings[i].Street;
                        select.appendChild(el);
                    }
                }
            }
            else
            {
                alert('There was a problem with the request.');
            }
        }
    }
    function emptySelect(select_object)
    {
        while (select_object.options.length > 0)
        {
            select_object.remove(0);
        }
        return 1;
    }
})();

Uncaught SyntaxError: Unexpected token function line 32 `function alertContents(){` — David, Jan 04 '17 at 06:55
I've updated my answer, please check and let me know if this works. — Danny Fardy Jhonston Bermúdez, Jan 04 '17 at 07:06
I changed the javascript then ran it on my local host. So I believe its all tested. — David, Jan 04 '17 at 07:22
with the updated code i got this error "Giving up :( Cannot create an XMLHTTP instance" — David, Jan 05 '17 at 16:57
I've updated my answer with a new code by using my custom helper XMLHttpRequest function. You could try with that code. Let me know if this works. — Danny Fardy Jhonston Bermúdez, Jan 05 '17 at 18:00
its giving this error dropdown.js:20 GET http://localhost/atis/xing/ajaxdrop?subdivision=UP%20Mojave 404 (Not Found) — David, Jan 05 '17 at 19:47
404 Not Found. You're having issues with the url. Maybe the url is incorrect. — Danny Fardy Jhonston Bermúdez, Jan 05 '17 at 22:44
I don't know how that would be the links all work. Why is it looking for a URL anyway i just want the second drop down to populate — David, Jan 05 '17 at 22:49
The second dropdown requires the data from the url request. If your url doesn't work properly, you won't be able to fill with data. — Danny Fardy Jhonston Bermúdez, Jan 06 '17 at 21:19
The data comes from the database fine, but the ajaxdrop function only works if I comment out the if and else statements — David, Jan 07 '17 at 03:54
I think that your issue is related to this question: http://stackoverflow.com/questions/26547369/how-to-find-out-if-a-request-is-an-ajax-request and this queston: http://stackoverflow.com/questions/2579254/does-serverhttp-x-requested-with-exist-in-php-or-not. — Danny Fardy Jhonston Bermúdez, Jan 07 '17 at 21:01

score 0 · Accepted Answer · answered Jan 08 '17 at 03:46

I was missing a function to gather the data for the second drop down. Below is the correct model code. With the added function at the top.

    function get_xing_list(){
    $this->db->select('street');
    $query = $this->db->get('xings');

    if ($query->num_rows() > 0)
    {
      return $query->result();
    }else{
      return 'No Xings Found';
    }
}  

    function get_sub_list(){
        $this->db->select('subdname');
        $query = $this->db->get('subdivisions');

        if ($query->num_rows() > 0)
            {
                return $query->result();
            }else{
                return 'No Subs Found';
            }
    }

    function get_sub_xings($subdname){
        $this->db->select('street');
        $this->db->where('subdname', $subdname);
        $query = $this->db->get('xings');
        log_message('info', "Value of subdivision was $subdname");
            if ($query->num_rows() > 0)
            {
                return $query->result_array();
            }else{
                return 'No Subs Found';
            }

Chained drop downs not populating

2 Answers2