CODEWITHSUNDEEP
phpjqueryajaxcodeigniter
Salman Khan Sohoo
Salman Khan Sohoo

Reputation: 115

Populating Dropdown dynamically with each dowpdown using ajax PHP

This is my php CodeIgniter Code which is generating 30 Dropdowns which is also populated from database and that is workig absolutly fine. here is the preview of my dropdown list. every list will be populated with the related paraller field.enter image description here

<?php for($i=1; $i<=30; $i++){ ?>
<div class="form-group c">
    <div class="col-sm-12">
        <div class="input-group">
            <div class="col-xs-12 col-sm-12 <?php if (form_error('iat_code_'.$i)) { echo "has-error";} ?>">
                <?php
                          $itm_iat_codes = $itm_iat_code_1.$i;
                          if(isset($itm_iat_codes)){$itm_iat_codes;}else{$itm_iat_codes = "";}
                          echo form_dropdown(
                              'iat_code_'.$i,
                              $ProductAttributeTitle,'',
                              'class="col-xs-12 col-sm-6 required-field form-control"  
                              id="iat_code_'.$i.'" placeholder="IAT Code" tabindex="1" data-style="form-control" required');
                ?>
            </div>
            <?php echo form_error('iat_code_'.$i, '<div for="iat_code_'.$i.'" class="alert-danger">', '</div>'); ?>
        </div>
    </div>
</div>
<?php    }?>

Here is another Code which is also generating 30 emppty dropdowns and these will be filled up by using ajax. PHP Code

`<?php for($i=1; $i<=30; $i++){ ?>
<div class="form-group c">
    <div class="col-xs-12 col-sm-12">
        <div class="input-group">
            <select name="istbs_code_<?php echo $i; ?>" class="col-xs-12 col-sm-6 required-field form-control" id="istbs_code_<?php echo $i; ?>" placeholder="ISTBS Code" tabindex="1" data-style="form-control">
                <option value="">Select Option</option>
            </select>
        </div>
    </div>
</div>
<?php } ?>`

Here is my ajax code that populates other dropdown from database.

$("#iat_code_1").change(function(){
        var json = {};
        var abc = json['iat_code_1'] = $(this).val();
        var request = $.ajax({
            url: "<?php echo base_url($controller.'/get_product_attributes'); ?>",
            type: "POST",
            data: json,
            dataType: "html",
            success : function(response){
                $("#istbs_code_1").html(response);
            }
        });   
    });

Now problem is that which i'm facing is in ajax, if i'm populating all 30 dropdown with each related for that purpose i've to make 30 ajax functions but i want to make it with only one ajax function, is it posible to do it? if any one know please help.

Upvotes: 3

Views: 1850

Answers (3)

Suresh
Suresh

Reputation: 5997

Here is a sample code which fetching data by single Ajax call & repopulate those data in the dynamically created dropdown list.

client Side file(index.php)

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        console.log( "ready!" );

        $.ajax({
            method: "GET",
            url: "dropDownList.php",
        }).done(function( response ) {
            console.log('Response Data', response);

            $.each( response, function( key, value ) {

                $.each( value, function( key1, value1 ) {
                    console.log( "KEY1 : "+key1+", VALUE1 : " + value1['value'] );

                    var option_value = value1['value'];
                    var option_text = value1['text'];
                    var dd_option_list = "<option value='"+option_value+"'>"+option_text+"</option>";

                    $('#dropdown_'+key).append(dd_option_list);
                });
            });
        });

    });
</script>
</head>
<body>

<?php

    $noOfDropDownList = 3;

    for ($i=1; $i <= 3 ; $i++) {
        echo "<select id='dropdown_$i' name=''>";
        echo "</select><br>";
    }
?>

</body>
</html>

Server Side FIle (dropDownList.php)

<?php
$dropdownList[1][] = array('value' => 'apple','text' => 'apple');
$dropdownList[1][] = array('value' => 'mango','text' => 'mango');
$dropdownList[1][] = array('value' => 'bananan','text' => 'bananan');

$dropdownList[2][] = array('value' => 'cat','text' => 'cat');
$dropdownList[2][] = array('value' => 'dog','text' => 'dog');
$dropdownList[2][] = array('value' => 'rat','text' => 'rat');

$dropdownList[3][] = array('value' => 'google','text' => 'google');
$dropdownList[3][] = array('value' => 'apple','text' => 'apple');
$dropdownList[3][] = array('value' => 'microsoft','text' => 'microsoft');

header('Content-Type: application/json');
echo json_encode($dropdownList);

Hope, it'll help you fig. out how to impliment such functionality in your context.

Upvotes: 1

Gauri Bhosle
Gauri Bhosle

Reputation: 5483

You don't have to write ajax call 30 times . Just create one function which calls ajax and on change event call that function as shown below. and even you don't have to write change event 30 time just add one common class (here eg.dropchange ) to all dropdown as shown below and change dropdown change event accordingly

`<?php for($i=1; $i<=30; $i++){ ?>
<div class="form-group c">
    <div class="col-xs-12 col-sm-12">
        <div class="input-group">
            <select name="istbs_code_<?php echo $i; ?>" class="dropchange col-xs-12 col-sm-6 required-field form-control" id="istbs_code_<?php echo $i; ?>" placeholder="ISTBS Code" tabindex="1" data-style="form-control">
                <option value="">Select Option</option>
            </select>
        </div>
    </div>
</div>
<?php } ?>`

        $(document).on("change",".dropchange ",function(){
           var thisid=this.id;
            var json = {};
            var abc = json['iat_code_1'] = $(this).val();
            var request = callajax(thisid);
        });

    function callajax(thisid){
    $.ajax({
                url: "<?php echo base_url($controller.'/get_product_attributes'); ?>",
                type: "POST",
                data: json,
                dataType: "html",
                success : function(response){
                    $("#"+thisid).html(response);
                }
            });   
    }

Upvotes: 1

Ashish Mashru
Ashish Mashru

Reputation: 11

Here you can fetch all the dropdown data by using single ajax call but after that you need to do client side validation as per requirnment.

Upvotes: 1

Related Questions