使用ajax javascript显示数据库中的数据

Question

I want to create form in popup and then show the result in the same popup. Data has been inserted, but after insert, the popup was close.

What I want is after submit form clicked, the data insert to database, and the result data show in same popup page.

Here's the view page

 <script type="text/javascript">
  $('a[href="#myModal"]').on('click',function(){
  var category= $(this).attr('data-value');

  $('input[name="category"]').val(category);

//Save Data
$('#add_btn').on('click',function(){
    var product_name=$('#product_name').val();
    var price=$('#price').val();
    var category=$('#category').val();

    $.ajax({
        type : "POST",
        url  : "<?php echo admin_url(). 'product/add_product'; ?>",
        data : {product_name:product_name, price:price, category:category},
        success : function(data){
            var data = JSON.parse(data);
            var html = '';
            var i;

            for(i=0; i<data.length; i++){

                html += '<tr>'+
                            '<td>'+data[i].product_name+'</td>'+
                            '<td>'+data[i].price+'</td>'+
                        '</tr>';
            }
            $('#show_product').html(html);

        }
    })
});
});
</script>

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Category Product</h4>
        </div>

        <div class="modal-body">
            <form method="post" id="task-form">
                <table class="table">
                    <tbody>
                        <tr>
                            <td><label for="product_name">Product Name</label></td>
                            <td></td>
                            <td><input type="text" class="form-control" name="product_name" id="product_name"></td>
                        </tr>
                        <tr>
                            <td><label for="price">Price</label></td>
                            <td></td>
                            <td><input type="text" class="form-control" name="price" id="price"></td>
                        </tr>
                        <tr>
                            <input type="hidden" id="category" name="category" value="">
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><button type="submit" class="btn-primary" value="Submit" id="add_btn">Add Product</button></td>
                        </tr>
                    </tbody>
                </table>
            </form>

            <table class="table">
                <thead>
                    <tr>
                        <th>Product Name</th>
                        <th>Price</th>
                    </tr>
                </thead>

                <tbody id="show_product">
                </tbody>

            </table>
        </div>
    </div>
</div>

Here's controller

   public function add_product()
   {
       $product_name= $this->input->post('layanan');
       $price = $this->input->post('kapasitas');
       $category = $this->input->post('jenis');

       $data2 = array(
        'product_name' => $product_name,
        'price' => $price,
        'category' => $category
        );

        $this->product_model->input_product($data, db_prefix() . 'product');
        $data=$this->product_model->list_product($category);
        echo json_encode($data);
    }

Here's my model

public function input_product($data2,$table)
{
   $this->db->insert($table,$data2);
}

public function list_product($category){
    $abc=$this->db->query("SELECT * FROM tblcategory WHERE category='$category'");
    if($abc->num_rows()>0){
        foreach ($hsl->result() as $data) {
            $desc[]=array(
                'product_name'           => $data->product_name,
                'price'                  => $data->price,
            );
        }
    }
    return $desc;
}

Thank you

Answer 1

100% [ SOLVED ]

Here's view page

<script type="text/javascript">
  $('a[href="#myModal"]').on('click',function(){
  var category= $(this).attr('data-value');

  $('input[name="category"]').val(category);

//Save Data
$('#add_btn').on('click',function(){
    var product_name=$('#product_name').val();
    var price=$('#price').val();
    var category=$('#category').val();

    $.ajax({
        type : "POST",
        url  : "<?php echo admin_url(). 'product/add_product'; ?>",
        data : {product_name:product_name, price:price, category:category},
        success : function(data){
            var data = JSON.parse(data);
            var html = '';
            var i;

            for(i=0; i<data.length; i++){

                html += '<tr>'+
                            '<td>'+data[i].product_name+'</td>'+
                            '<td>'+data[i].price+'</td>'+
                        '</tr>';
            }
            $('#show_product').html(html);

        }
    })
});
});
</script>

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Category Product</h4>
        </div>

        <div class="modal-body">
            <form method="post" id="task-form">
                <table class="table">
                    <tbody>
                        <tr>
                            <td><label for="product_name">Product Name</label></td>
                            <td></td>
                            <td><input type="text" class="form-control" name="product_name" id="product_name"></td>
                        </tr>
                        <tr>
                            <td><label for="price">Price</label></td>
                            <td></td>
                            <td><input type="text" class="form-control" name="price" id="price"></td>
                        </tr>
                        <tr>
                            <input type="hidden" id="category" name="category" value="">
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><button type="button" class="btn-primary" value="Submit" id="add_btn">Add Product</button></td>
                        </tr>
                    </tbody>
                </table>
            </form>
             </div>
            <table class="table">
                <thead>
                    <tr>
                        <th>Product Name</th>
                        <th>Price</th>
                    </tr>
                </thead>

                <tbody id="show_product">
                </tbody>

            </table>
        </div>

</div>

Here's controller

public function add_product()
   {
       $product_name= $this->input->post('layanan');
       $price = $this->input->post('kapasitas');
       $category = $this->input->post('jenis');

       $data2 = array(
        'product_name' => $product_name,
        'price' => $price,
        'category' => $category
        );

        $this->product_model->input_product($data, db_prefix() . 'product');
        $data=$this->product_model->list_product($category);
        echo json_encode($data);
    }

Here's my model

public function input_product($data2,$table)
{
   $this->db->insert($table,$data2);
}

public function list_product($category){
    $abc=$this->db->query("SELECT * FROM tblcategory WHERE category='$category'");
    if($abc->num_rows()>0){
        foreach ($hsl->result() as $data) {
            $desc[]=array(
                'product_name'           => $data->product_name,
                'price'                  => $data->price,
            );
        }
    }
    return $desc;
}

I hope it's working well.

Thankyou