bootstrap modal dynamic data from database

Question

I want open model and get model content dynamic but when i call ajax file and get response data then model not open and i cant access json response data in php code . When I put my model in ajx file and get html response then response success but model can't open.please help me to fix issue.

<script>
    function test(id) {
        $.ajax({
            type: "GET",
            url: "<?php echo base_url(); ?>index.php/Appointment/get_model",
            data: "id=" + id,
            cache: false,
            success: function(data) {

                $("#model_test").html(data);
                $("#myModal2").modal('show');
                //displayRecords();
            }
        });

    }
</script>

This one is my ajax file get_model.php :

<?php
if (isset($_GET['id'])) {
    $id     = $_GET['id'];
    $query  = $this->db->query("select * from appointment where id='" . $id . "'");
    $result = $query->row();
    print_r($result);
    die;
    //echo(json_encode($result));
}
?>
   <div id="myModal2" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">

                <div class="modal-body">
                    <div class="col-lg-12">
                        <div class="form-group  col-lg-3 col-md-3">
                            <label for="usr">Doctor Name:</label>
                        </div>
                        <div class="form-group  col-lg-7 col-md-7 ">
                            <input type="name" class="form-control input-lg" name="email" id="email_id" value="<?php
$result->name;
?>" placeholder="Doctor Name" required>
                        </div>

                        <div class="form-group  col-lg-3 col-md-3">
                            <label for="usr">Contact No:</label>
                        </div>
                        <div class="form-group  col-lg-7 col-md-7 ">
                            <input type="name" value="<?php
$result->contact_no;
?>" class="form-control input-lg" name="email" id="email_id" placeholder="Patient Name" required>
                        </div>
                    </div>
                </div>

And this one is my html code i want to open model here with dynamic content:

<div id="model_test">
</div>


   <?php



                            foreach($result as $row)

                            {
<td onclick="test(<?php echo $row->id;?>)" data-toggle="modal" data-id="<?php echo $row->id;?>" data-target="#myModal2" ><?php echo ucfirst($row->name);?></td>
}

Answer 1

you have a problem in the div closing tags, kindly check that all div tags are closed properly, try the below code

<div id="myModal2" class="modal fade" role="dialog">

<!-- Modal content-->
<div class="modal-content">

  <div class="modal-body">
    <div class="col-lg-12">
    <div class="form-group  col-lg-3 col-md-3">
                            <label for="usr">Doctor Name:</label>
                            </div>
                            <div class="form-group  col-lg-7 col-md-7 ">
                            <input type="name" class="form-control input-lg" name="email" id="email_id" value="<?php $result->name; ?>"
                            placeholder="Doctor Name" required >
                            </div>

                            <div class="form-group  col-lg-3 col-md-3">
                            <label for="usr">Contact No:</label>
                            </div>
                            <div class="form-group  col-lg-7 col-md-7 ">
                            <input type="name" value="<?php $result->contact_no; ?>" class="form-control input-lg" name="email" id="email_id"  
                            placeholder="Patient Name" required >
                            </div>
      </div>
    </div>

  and this one is my html code  i want to open model here with dynamic content

  <div id="model_test">
   </div>
  </div>

<td onclick="test(<?php echo $row->id;?>)" data-toggle="modal" data-id="<?php echo $row->id;?>" data-target="#myModal2" ><?php echo ucfirst($row->name);?></td>

Answer 2

You did not use MVC programming pattern! You use database code into a view?! Please make a Controller with the function:

function get_model(){
 $this->load->model('get_model');
 $value = $this->get_model->your_db_data_retrieve_model_function(data);
 $data = json_encode($value);
    $this->output
        ->set_content_type('application/json')
        ->set_output($data); 
 }

also a model (retrieve data from database) is needed:

function retrieve_data($id) {
  . ....
  return $data;
}

remember to use a controller to get the data from $_GET using

$this->input->get('your_variable_name')

passing it to model (the ID).

Consider to read the principle of MVC (model-view-controller) pattern.