Welcome Guest, Not a member yet? Register   Sign In
Populate query result to drop down list with Ajax
#1

[eluser]kuanfai[/eluser]
Hi, I think this topic has been discussed before however I can't find the solution for my problem. There are two drop down list in my html form, the contents of "contest" drop down depends on the selected option from "store" drop down box.

Code:
<?php
    $default = 'Please Select';
    $options = array($default=>$default, 'value1'=>'value1',);
    $choosestore = 'onChange="doWork(this.value)"';
?>
<table align="center" class="table_noborder">
    <tr>
        <td colspan="3" align='left'><h3>Create Configuration</h3></td>
    </tr>
    <tr>
        <td align='left' class='td1'>Store</td>
        <td colspan='2' align='left'>&lt;?php echo form_dropdown('store', $options, $default, $choosestore);?&gt;</td>
    </tr>
    <tr>
        <td align='left' class="td1">Contest</td>
        <td colspan='2' align='left'>
            <select id='contest' name='contest'>
            </select>
        </td>
    </tr>

and my javascript for fetching 2nd list from DB:
Code:
[removed]
&lt;!--
      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 doWork(storeid){
        httpObject = getHTTPObject();
        if (httpObject != null) {
            httpObject.open("POST", "&lt;?=base_url()?&gt;index.php/smscontest/searchcontest/"+storeid, true);
            httpObject.send(null);
            httpObject.onreadystatechange = setOutput;
        }
    }
    
    function setOutput(){
        if(httpObject.readyState == 4){
            alert(httpObject.responseText);
            document.getElementById('outputText').value = httpObject.responseText;
        }
    }

--&gt;
[removed]

The PHP codes which query the db:
Code:
function searchcontest ($storeid) {
        $query = $this->configmodel->get_contest($storeid);
        $output = Array('contest');
        foreach ($query->result() as $row){
           $arr = Array('contest' => $row->contest);
           $output[] = $arr;
        }

         echo $output;
    }

my problem is the returned $output is an array, how do I pass its value to the "contest" drop down list? (Only one column of the output needs to be populated to the "contest" drop down list.)
#2

[eluser]Sumon[/eluser]
Might be a solution: Write full drop down list in searchcontest () function.
Function looks like:
Code:
function searchcontest ($storeid) {
  $query = $this->configmodel->get_contest($storeid);
  $output = Array('contest');
  echo "<select id='contest' name='contest'>";
  foreach ($query->result() as $row){
  $arr = Array('contest' => $row->contest);
  echo '<option value="$row["value"]">$row["label"]</option>'
  }
  echo "</select>";
}
I am confused it might not follow MVC but it shall work.
#3

[eluser]kuanfai[/eluser]
Thanks Sumon. It does work. But is there any other way to do it?
#4

[eluser]Sumon[/eluser]
Ops there are one way in my mind to follow MVC for current situation.
Code:
// this is Modle function Called by controller
function searchcontest ($storeid) {
        $query = $this->configmodel->get_contest($storeid);
        $output = Array('contest');
        foreach ($query->result() as $row){
           $arr = Array('contest' => $row->contest);
           $output[] = $arr;
        }
        return $output;
    }
and here is the view page which called by controller using $this->load->view("contest_dropdown");
Code:
// Lets say contest_dropdown.php
<select id='contest' name='contest'>
&lt;?
$TotalRecord=count($ContestData);
for($I=0;$I<$TotalRecord;$I++)
   foreach($ContestData[$I]->result() as $Contest):
?&gt;
  <option value="&lt;?=$Contest->value?&gt;">&lt;?=$Contest["label"]?&gt;</option>
&lt;? endforeach; ?&gt;
</select>
Hope helps you.
#5

[eluser]kuanfai[/eluser]
Hi Sumon, appreciate your help. I have also figured out how to solve this problem with the following changes to the controller and [removed]

Code:
function searchcontest ($storeid) {
        $query = $this->configmodel->get_contest($storeid);

        echo "var contests = new Array();";
        $count = 0;
        foreach ($query->result() as $row) {
            echo "contests['$count'] = '$row->contest';";
            $count++;            
        }
        
    }

and

Code:
function setOutput(){
        if(httpObject.readyState == 4){

            clearList(document.getElementById('contest'));

            eval(httpObject.responseText);
            if(contests && contests.length && contests.length > 0) {
                for(i = 0; i < contests.length; i++) {
                    document.getElementById('contest').options.add(new Option(contests[i]));
                }
            }
        }
    }

    function clearList(elem) {
        for(i=elem.length-1; i>=0; i--) {
            elem.options[i] = null;
        }
    }

Cheers!
#6

[eluser]Bramme[/eluser]
You should have a look at JSON. This was specifically designed for this type of thing. I don't know how to handle it in raw javascript, but I know jquery supports it. Basically you echo your array like you would echo html, only you use the json structure (I believe you have to set a header too), you get that result through your ajax call and then jquery can process that json array.




Theme © iAndrew 2016 - Forum software by © MyBB