I am trying to fetch the product details from the database and display in a bootstrap modal. Please can someone help me.
welcome_message.php view
<div class="mix category-1 col-md-3" data-myorder="2">
<div class="product-item">
<div class="product-block">
<div class="product-block-inner">
<div class="h3">
W210 Cashew
</div>
<div class="product-image">
<img src="assets/images/Products/Whole Cashew/
W210.jpe" class="img-responsive"/>
</div>
<div class="info-inquiry">
<span class="info-button">
<INPUT TYPE="SUBMIT" NAME="INFO"
CLASS="INFO-BUTTON" VALUE="INFO / INQUIRY"
TITLE="INFO/INQUIRY"
data-toggle="modal"
data-target="#exampleModal"
data-whatever="W180" />
</span>
</div>
</div>
</div>
</div>
</div>
Modal in welcome_message.php
<div id="exampleModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body" id="modal-content">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">
Save changes</button>
</div>
</div>
</div>
</div>
Javascript:
<script>
$(document).on('show.bs.modal', '#exampleModal' ,function(event){
var button = $(event.relatedTarget) // Button that triggered the modal
var id = button.data('whatever')
var modal = $(this)
$.ajax({
url:'<?php echo base_url();?>/Welcome/ProductbyId',
data: {id:'id'},
dataType:'json',
type: "POST",
success: function(data){
var result = jQuery.parse(data);
alert(result);
$('.modal-body','#exampleModal')[0].html(result);*/
}
});
});
</script>
Welcome.php Controller
public function __construct()
{
parent::__construct();
$this->load->model('productdetail');
}
public function index()
{
$this->load->helper('url');
$this->load->view('layout/header');
$this->load->view('viewmenu.php');
$this->load->view('welcome_message');
$this->load->view('layout/footer');
}
public function ProductbyId() {
log_message('debug','Function called');
/*$productId = $_POST['id'];*/
$productId = "$_POST[id]";
$productId = 'W180';
log_message('info',$productId);
$data["results"] = $this->productdetail->ProductdetailbyId($productId);
echo json_encode($data["results"]);
}
model Productdetail.php
<?php
class productdetail extends CI_Model {
function ProductdetailbyId($id){
$condition = "Id =" . "'" . $id . "'";
$this->db->select('*');
$this->db->from('productlist');
$this->db->where($condition);
$this->db->limit(1);
$query = $this->db->get();
if ($query->num_rows() == 1){
return $query->result();
}
else {
return false;
}
}
}
?>
Please can anyone explain, how to display data from ajax call on success in bootstrap modal?