Несколько строк таблицы не создают PHP/Ajax

Я создаю форму покупки продукта. Где мне нужно создать несколько строк таблицы. Я имею в виду, что когда я выбираю продукт, он должен создать новую строку, но создает только одну строку. Пожалуйста, проверьте изображение - https://www.screencast.com/t/YuzCMY2Is

Вот html-код -

<div class="row">
                        <div class="col-md-12">
                            <div class="product_name">
                                <div class="form-group has-feedback">
                                    <select name="products" id="Products"  class="select-search" required>
                                        <option value="">Select Product</option>
                                        <?php
                                            if(isset($products)){
                                                foreach($products as $proData){
                                                    if($proData['status'] == 1){
                                                        echo '<option value="'.$proData['id'].'">'.$proData['name'].'</option>';
                                                    }
                                                }
                                            }
                                        ?>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div><!-- row end -->
<div class="row">
                        <div class="col-md-12">
                            <div class="product_header">
                                <h6 style="display: inline;">Purchase Product List</h6>
                                <div class="pull-right">
                                    <div class="form-group">

                                    </div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <table class="table table-responsive cms_table">
                                <thead>
                                    <tr>
                                        <th>Product Name</th>
                                        <th>Quantity</th>
                                        <th>Unit Price &#2547;</th>
                                        <th>Pack Size (Kg)</th>
                                        <th>Unit (Jar/Drum)</th>
                                        <th>Total Kg/s</th>
                                        <th>Total Price &#2547;</th>
                                        <th><button class="btn btn-default" type="button" id="newRow"><i class="icon-plus2"></i></button></th>
                                    </tr>
                                </thead>
                                <tbody id="ProductDisplay">

                                    <!-- product rows display hear -->

                                </tbody>
                                <tfoot>
                                    <tr class="text-right">
                                        <td colspan="5"><strong>Total Kg/s & Amount</strong></td>
                                        <td>-</td>
                                        <td>-</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colspan="6" class="text-right"><strong>Less :</strong></td>
                                        <td><input type="number" name="less" placeholder="Less" class="form-control"></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colspan="6" class="text-right"><strong>Discount % :</strong></td>
                                        <td><input type="number" name="discount" placeholder="Discount %" class="form-control"></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colspan="6" class="text-right"><strong>Due :</strong></td>
                                        <td><input type="number" name="due" placeholder="Due" class="form-control"></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colspan="6" class="text-right"><strong>Total :</strong></td>
                                        <td><input type="number" name="total" value="200000" class="form-control" readonly></td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div><!-- row end -->

аякс код -

$('#Products').change(function(){
        var products = $('#Products').val();

        $.ajax({
            url : "<?php echo base_url('Purchase/ajaxProducts')?>",
            method : 'POST',
            data : { 'products' : products },
            success:function(data){
                $('#ProductDisplay').html(data);
            }
        });
    });

php-код -

public function ajaxProducts(){
        $products = $this->input->post('products');

       /* echo $products; exit();*/
        $this->db->select('*');
        $this->db->from('products');
        $this->db->where('id', $products);
        $ajaxQuery = $this->db->get()->result_array();

            foreach($ajaxQuery as $proData){
                if($proData['status'] == 1){
                    echo '
                        <tr>
                            <td><input class="form-control" type="text" name="product_name[]" value="'.$proData['name'].'"></td>
                            <td><input class="form-control" type="number" name="qnt[]" placeholder="Quantity"></td>
                            <td><input class="form-control" type="number" name="unit_price[]" value="'.$proData['regular_price'].'"></td>
                            <td><input class="form-control" type="number" name="pack_size[]" placeholder="Pack Size"></td>
                            <td><input class="form-control" type="number" name="unit_pack[]" placeholder="Unit Pack (jar/Drum)"></td>
                            <td><input class="form-control" type="number" name="total_kg[]" placeholder="Total Kg/s" value="" readonly></td>
                            <td><input class="form-control" type="number" name="total_price[]" placeholder="Total Price &#2547;" value="" readonly></td>
                            <td><button type="button" class="btn btn-danger"><i class="icon-trash"></i></button></td>
                        </tr>

                    ';
            }
        }
    }

Я использую Codeigniter. Спасибо


person Maruf Ahmed    schedule 09.05.2017    source источник


Ответы (1)


Прежде всего, не повторяйте сразу.. в вашем цикле for в php сделайте это..

$output = '';
foreach($ajaxQuery as $proData){
    if($proData['status'] == 1){
        $output .= '
            <tr>
                <td><input class="form-control" type="text" name="product_name[]" value="'.$proData['name'].'"></td>
                <td><input class="form-control" type="number" name="qnt[]" placeholder="Quantity"></td>
                <td><input class="form-control" type="number" name="unit_price[]" value="'.$proData['regular_price'].'"></td>
                <td><input class="form-control" type="number" name="pack_size[]" placeholder="Pack Size"></td>
                <td><input class="form-control" type="number" name="unit_pack[]" placeholder="Unit Pack (jar/Drum)"></td>
                <td><input class="form-control" type="number" name="total_kg[]" placeholder="Total Kg/s" value="" readonly></td>
                <td><input class="form-control" type="number" name="total_price[]" placeholder="Total Price &#2547;" value="" readonly></td>
                <td><button type="button" class="btn btn-danger"><i class="icon-trash"></i></button></td>
            </tr>';
    }
}
echo $output;

затем в вашем JS ..

вместо использования $('#ProductDisplay').html(data); используйте $('#ProductDisplay').append(data);, если вы добавляете строку

person Demonyowh    schedule 09.05.2017
comment
нет проблем .. пожалуйста, проверьте мой ответ как решение вашей проблемы .. - person Demonyowh; 09.05.2017