AJAX and jQuery - binding more than one tag

[eluser]Jason Tan Boon Teck[/eluser]
I am trying to make a dynamic drop down list with more than 2 tiers. I have managed to get the last 2 tiers working with AJAX and jQuery, i.e. selecting a Drug Formulary will retrieve via AJAX a list of trade names to select.

Codes that work.
Main view:

Code:

...
// Set for AJAX calling
$siteurl    =   site_url()."/ehr_ajax/get_prescription_drugtradenames";
//echo $siteurl;
?>
[removed]
    $(document).ready(function() {
      $('#drug_formulary_id').change(function (){
            ajax_trade_name()}
        );
        return false;
      })


    function ajax_trade_name() {
        var siteurl = "<?php echo $siteurl; ?>";
        var ajax_drug_formulary_id = $('#drug_formulary_id').val();
        var data = 'ajax_drug_formulary_id=' + ajax_drug_formulary_id;
        //alert(siteurl+' '+data);
        $.ajax({
          type:'POST',
          url:siteurl,
          data: data,
          success: function (result) {
            $('#message').html(result);
          }
        }
    )}

Controller:

Code:

function get_prescription_drugtradenames()
    {
        $data['ajax_drug_formulary_id'] = $_POST['ajax_drug_formulary_id'];  //set the record ID
        //$data['patient_id'] = $this->uri->segment(3);

        $data['tradename_list'] = $this->memr_rdb->get_tradename_by_formulary($data['ajax_drug_formulary_id']);
        $this->load->vars($data);

        $this->load->view("ehr/ajax_get_prescription_drugtradenames");
    }

AJAX view ajax_get_prescription_drugtradenames.php:

Code:

echo "\n<select name='drug_code_id' class='normal' id='tradename'>";
        echo "\n<option value='' >Some examples of this drug</option>";
        foreach($tradename_list as $tradename_item)
        {
            echo "\n<option value='".$tradename_item['drug_code_id']."' ";
            if(isset($drug_code_id)) {
                echo ($drug_code_id==$tradename_item['drug_code_id'] ? "selected='selected'" : "");
            }
            echo ">".$tradename_item['trade_name']."&nbsp;[".$tradename_item['drug_code']."]</option>";
        }
    echo "</select>";

Continue below ...

[eluser]Jason Tan Boon Teck[/eluser]
... continued.

Now I would like to Ajaxify one tier higher as well. The user can drill down from Drug System to Drug Formulary to Drug Trade Name.

I tried the following but it doesn't work as expected. Am i binding the elements incorrectly ($(document).ready(function())?

Main view:

Code:

...
echo "<tr>";
    echo "\n<td width='25%'>System<font color='red'>*</font></td>";
    echo "<td colspan='2' class='red'>";  
    echo "\n<select name='drug_system' class='normal' id='drug_system'>";
    //echo "\n<select name='drug_system' class='normal' o_n_change='[removed]selectDrugSystem()' id='drug_system'>";
        echo "\n<option label='' value='0' selected='selected'></option>";
        foreach($drug_systems as $system_item)
        {
            echo "\n<option label='".$system_item['formulary_system']."' value='".$system_item['formulary_system']."'";
            echo ($drug_system == $system_item['formulary_system'] ? " selected='selected'" : "");
            echo ">".$system_item['formulary_system']."</option>";
        }
        echo "\n<option label='All' value='All'";
        echo ($drug_system == "All"? " selected='selected'" : "");
        echo ">All</option>";
        echo "</select>";
    echo "</td>";
echo "</tr>";
echo "\n<tr>";
    echo "\n<td width='25%'>Drug Formulary<font color='red'>*</font></td>";
    echo "\n<td colspan='2' class='red'>";
        echo "\n<div id='genericnames_select'>";
        echo "\n<select name='drug_formulary_id' class='normal' id='drug_formulary_id'>";
            echo "\n<option value='' >Please select one</option>";
            foreach($formulary_list as $formulary_item)
            {
                echo "\n<option value='".$formulary_item['drug_formulary_id']."' ";
                if(isset($drug_formulary_id)) {
                    echo ($drug_formulary_id==$formulary_item['drug_formulary_id'] ? " selected='selected'" : "");
                }
                echo ">".$formulary_item['generic_name']."&nbsp;[".$formulary_item['formulary_code']."]</option>";
            } //foreach
        echo "</select>";
        echo "</div>";
    echo "</td>";
echo "</tr>";
echo "\n<tr>";
    echo "<td width='25%'>Trade Name</font></td>";
    echo "\n<td colspan='2' class='red'>";
    echo "\n<div id='tradenames_select'>";
        echo "\n<select name='drug_code_id' class='normal'>";
            echo "\n<option value='' >Some examples of this drug</option>";
            foreach($tradename_list as $tradename_item)
            {
                echo "\n<option value='".$tradename_item['drug_code_id']."' ";
                if(isset($drug_code_id)) {
                    echo ($drug_code_id==$tradename_item['drug_code_id'] ? "selected='selected'" : "");
                }
                echo ">".$tradename_item['trade_name']."&nbsp;[".$tradename_item['drug_code']."]</option>";
            }
        echo "</select>";

    echo "</div>";
    echo "</td>";
echo "</tr>";

...
// Set for AJAX calling
$siteurl    =   site_url()."/ehr_ajax/get_prescription_drugtradenames";
$siteurlgeneric     =   site_url()."/ehr_ajax/get_prescription_druggenericnames";
$siteurltrade       =   site_url()."/ehr_ajax/get_prescription_drugtradenames";
//echo $siteurl;
?&gt;
[removed]

    $(document).ready(function() {
      $('#drug_system').change(function (){
            ajax_generic_name()}
        );
      $('#drug_formulary_id').change(function (){
            ajax_trade_name()}
        );
        return false;
      })


    function ajax_generic_name() {
        var siteurlgeneric = "&lt;?php echo $siteurlgeneric; ?&gt;";
        //var drug_system = "&lt;?php echo $drug_system; ?&gt;";
        //var siteurl = $('.siteurl').val();
        var ajax_drug_system = $('#drug_system').val();
        var data = 'ajax_drug_system=' + ajax_drug_system;
        alert(siteurlgeneric+' '+data);
        $.ajax({
          type:'POST',
          url:siteurlgeneric,
          data: data,
          success: function (result) {
            $('#genericnames_select').html(result);
          }
        });
        return false;
      }


    function ajax_trade_name() {
        var siteurltrade = "&lt;?php echo $siteurltrade; ?&gt;";
        //var drug_system = "&lt;?php echo $drug_system; ?&gt;";
        //var siteurl = $('.siteurl').val();
        var ajax_drug_formulary_id = $('#drug_formulary_id').val();
        var data = 'ajax_drug_formulary_id=' + ajax_drug_formulary_id;
        alert(siteurltrade+' '+data);
        $.ajax({
          type:'POST',
          url:siteurltrade,
          data: data,
          success: function (result) {
            $('#tradenames_select').html(result);
          }
        }
    )}

AJAX view

Code:

<?php
echo "\n<tr>";
    echo "\n<td width='25%'>Drug Formulary<font color='red'>*</font></td>";
    echo "\n<td colspan='2' class='red'>";
        echo "\n<select name='drug_formulary_id' class='normal'>";
            echo "\n<option value='' >Please select one</option>";
            foreach($formulary_list as $formulary_item)
            {
                echo "\n<option value='".$formulary_item['drug_formulary_id']."' ";
                if(isset($drug_formulary_id)) {
                    echo ($drug_formulary_id==$formulary_item['drug_formulary_id'] ? " selected='selected'" : "");
                }
                echo ">".$formulary_item['generic_name']."&nbsp;[".$formulary_item['formulary_code']."]</option>";
            } //foreach
        echo "</select>";
    echo "</td>";
echo "</tr>";

[eluser]InsiteFX[/eluser]
All of that html code should be in a view not in php and ajax! you should only be working with the values that need to be updated...

InsiteFX

[eluser]Jason Tan Boon Teck[/eluser]
[quote author="InsiteFX" date="1307328854"]All of that html code should be in a view not in php and ajax! you should only be working with the values that need to be updated...

InsiteFX[/quote]

Those are actually my view files. I just prefer to use more php codes in my views - easier to manipulate. :-)