We Keep Coding

view full data in modal by particular id in codeigniter using ajax

my view page
<!-- BEGIN PAGE -->
<div id="main-content">
<!-- BEGIN PAGE CONTAINER-->
<div class="container-fluid">
<!-- BEGIN PAGE HEADER-->
<div class="row-fluid">
<div class="span12">
<!-- BEGIN THEME CUSTOMIZER-->
<div id="theme-change" class="hidden-phone">
<i class="icon-cogs"></i>
</div>
<!-- END THEME CUSTOMIZER-->
<!-- BEGIN PAGE TITLE & BREADCRUMB-->
<h3 class="page-title">
contactus
<small> List </small>
</h3>
<ul class="breadcrumb">
<li>
<i class="icon-home"></i><span class="divider"> </span>
</li>
<li>
Dashboard<span class="divider"> </span>
</li>
<li>
contactus <span class="divider-last"> </span>
</li>
</ul>
<br /><br />
<div id="msg">
<?php
if($this->session->tempdata('success'))
{
?>
<div class="alert alert-success hide_msg pull" style="width: 95%"> <i class="fa fa-check-circle"></i> <?php echo $this->session->tempdata('success');?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<?php
}
if($this->session->tempdata('error'))
{
?>
<div class="alert alert-danger hide_msg pull" style="width: 95%"> <i class="fa fa-check-circle"></i> <?php echo $this->session->tempdata('error');?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<?php
}
?>
</div>
<!-- END PAGE TITLE & BREADCRUMB-->
</div>
</div>
<!-- END PAGE HEADER-->
<!-- BEGIN PAGE CONTENT-->
<div id="page" class="dashboard">
<div class="row-fluid">
<div class="span12">
<!-- BEGIN RECENT ORDERS PORTLET-->
<div class="widget">
<div class="widget-title">
<h4><i class="icon-reorder"></i> Contactus-List </h4>
<button class="btn btn-success" style="float:right"><i class="icon-plus icon-white"></i> EXCEL </button>
</div>
<div class="widget-body">
<!-- BEGIN Table-->
<table class="table table-striped table-advance table-hover" id="sample_1">
<thead>
<tr>
<th><i class="icon_profile"></i> S.No. </th>
<th> <i class="fa fa-picture-o" aria-hidden="true"></i> Date & Time </th>
<th><i class="icon_profile"></i> Name </th>
<th> <i class="fa fa-picture-o" aria-hidden="true"></i> Email </th>
<th> <i class="fa fa-picture-o" aria-hidden="true"></i> Mobile Number </th>
<th><i class="icon_mobile"></i> Message</th>
<th><i class="icon_cogs"></i> Action</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
foreach($contactus as $e)
{
?>
<tr>
<td><?php echo $i++;?></td>
<td><?php echo $e->date_and_time;?></td>
<td><?php echo $e->name;?></td>
<td><?php echo $e->email;?></td>
<td><?php echo $e->mobile_no;?></td>
<td>
<?php
$string = strip_tags($e->message);
$stringCut = substr($string, 0, 15);
echo $stringCut."...";?> click to read more
</td>
<td><div class="btn-group">
<!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> -->
<!-- <button class="btn btn-primary"><i class="icon-eye-open"></i></button>
<button class="btn btn-primary view" onclick="view_contact(this.value)" id="user_id" user_id="<?php echo $e->id;?>"><i class="icon-eye-open"></i></button>-->
<button class="btn btn-primary view_data" id="<?php echo $e->id; ?>" ><i class="icon-eye-open">VIEW FULL INFO</i></button>
<a onclick="return confirm('Are you want to delete ')" href="<?php echo base_url('admin/contactus_cont/delete_contactus')."/".$e->id;?>"> <button class="btn btn-danger"><i class="icon-trash icon-white"></i></button></a>
</div></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<!-- END RECENT ORDERS PORTLET-->
</div>
</div>
</div>
<!-- END PAGE CONTENT-->
</div>
<!-- END PAGE CONTAINER-->
</div>
</div>
<!-- END CONTAINER -->
<div id="dataModal" class="modal fade">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">VIEW FULL INFO</h4>
</div>
<div class="modal-body" id="your_modal_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var id = $(this).attr("id");
//alert(id);
$.ajax({
url : "<?php echo base_url('admin/contactus_cont/get_Full_data') ?>",
method:"POST",
data:{id:id},
success:function(data){
alert(data);
//console.log(data);
$('#your_modal_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
i want to view detail about each contact by AJAX & JQUERY
in this i am getting all contact data in list from database. But the problem is to show data in pop-up in datail.
like when i click on
it should display pop-up window with all detail by using particular ID close option
my controller function :-
public function get_Full_data()
{
$id = $this->input->post("id");
//echo $id; exit;
$data['fullData'] = $this->contactus_model->view($id);
$this->load->view('admin/datainModal',$data);
}
my model function :-
public function view($id)
{
$res = $this->db->get_where("contactus",array('id'=>$id));
return $res->row();
}
view page datainModal.php :-
<div class="table-responsive">
<table class="table table-bordered">
<div class='row col-md-12'>
<div class='col-md-6'>
<tr>
<td width="30%"><label>Id</label></td>
<td width="70%"><?php echo $fullData->id;?></td>
</tr>
</div>
<div class='col-md-6'>
<tr>
<td width="30%"><label>Data & Time</label></td>
<td width="70%"><?php echo $fullData->date_and_time;?></td>
</tr>
</div>
</div>
</table>
</div>

$(document).ready(function(){
$('.view_data').click(function(){
var id = $(this).attr("id");
console.log(id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button class="btn btn-primary view_data" id="1" >VIEW FULL INFO</button>
View Code:
<tr>
<td>
<button class="btn btn-primary view_data" id="<?php echo $e->id; ?>" ><i class="icon-eye-open">VIEW FULL INFO</i></button>
</td>
</tr>
Bootstrap Modal Code:-
<div id="dataModal" class="modal fade">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">VIEW FULL INFO</h4>
</div>
<div class="modal-body" id="your_modal_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JQUERY AJAX Code:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var id = $(this).attr("id");
$.ajax({
url : "<?php echo base_url('ControllerName/get_Full_data') ?>",
type:"POST",
data:{id:id},
success:function(data){
//alert(data);
$('#your_modal_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
Controller Code:-
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class ControllerName extends CI_Controller {
public function get_Full_data(){
$id = $this->input->post("id");
$this->load->YourModelName();
$data['fullData'] = $this->YourModelName->getDatainModal($id);
$this->load->view('datainModal',$data);
}
}
?>
Modal Code:-
<?php
class YourModelName extends CI_Model {
function getDatainModal($id){
return $fullData = $this->db->get_where('table_name',array('id'=>$id))->row();
}
}
?>
Create in View datainModal.php :-
<div class="table-responsive">
<table class="table table-bordered">
<div class='row col-md-12'>
<div class='col-md-6'>
<tr>
<td width="30%"><label>Id</label></td>
<td width="70%"><?php echo $fullData->id;?></td>
</tr>
</div>
<div class='col-md-6'>
<tr>
<td width="30%"><label>Data & Time</label></td>
<td width="70%"><?php echo $fullData->date_and_time;?></td>
</tr>
</div>
</div>
</table>
</div>

After host change jQuery not working.old server code running perfectly

I changed my web hosting server recently. After that, I realized that some parts of my jQuery code are not working. Dropdown menu not change. I checked that the old server code still now working perfectly but not on my live server.
My old server link:http://pixcelcoder.in/care-foundation/auth-admin-panel/admin-dashboard/care-class-main-chapter-list.php
New sever link:https://careonlineschool.org/care-foundation/auth-admin-panel/admin-dashboard/care-class-main-chapter-list
<?php include('header.php')?>
<!-- Main Content -->
<div class="hk-pg-wrapper">
<!-- Container -->
<div class="container mt-xl-50 mt-sm-30 mt-15">
<!-- Title -->
<div class="hk-pg-header align-items-top">
<!-- /Title -->
</div>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Add Main Chapter
</button>
<!-- Table Contain -->
<div class="container">
<br><br>
<h2>Main Chapter List </h2>
<hr>
<table class="table table-striped table-responsive w-100 d-block d-md-table">
<thead>
<tr>
<th>Class</th>
<th>Subject Name</th>
<th>Main Chapter</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php
$notice_query="select * FROM care_class_main_chapter";
$notice_result = mysqli_query($con,$notice_query);
while($row = mysqli_fetch_assoc($notice_result))
{
?>
<tr>
<td>
<?php
$class_name_query="select * FROM care_class INNER JOIN care_class_main_chapter ON care_class.care_class_id=care_class_main_chapter.care_class_id WHERE care_class_main_chapter.care_class_id = $row[care_class_id]";
$class_name_result = mysqli_query($con,$class_name_query);
$class_name_row=mysqli_fetch_array($class_name_result);
echo $class_name_row['care_class_number'];
?>
</td>
<td>
<?php
$subject_name_query="select * FROM care_subject INNER JOIN care_class_main_chapter ON care_subject.care_subject_id=care_class_main_chapter.care_subject_id WHERE care_class_main_chapter.care_subject_id = $row[care_subject_id]";
$subject_name_result = mysqli_query($con,$subject_name_query);
$subject_name_row=mysqli_fetch_array($subject_name_result);
echo $subject_name_row['care_subject_name'];
?>
</td>
<td><?php echo $row['care_class_main_chapter_name']; ?></td>
<td>Edit</td>
<td>Delete</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<!-- End Table Contain -->
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add Main Chapter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form-group" action="" method="POST">
<div class="row">
<!-- Section for Include Class -->
<div class="col-6">
<label for="Text">Class</label>
<select name="care_class_id" id="care_class_id" required>
<option value="">Select Class</option>
</select>
</div>
<!-- End Section for Include class -->
<!-- Section for Include Subject -->
<div class="col-6">
<label for="Text">Subject</label>
<select name="care_subject_id" id="care_subject_id"required>
<option value="">Select Subject</option>
</select>
</div>
<!-- End Section for Include Subject -->
</div>
<br>
<label for="class">Main Chapter</label>
<input type="text" class="form-control" placeholder="Enter Subject" name="care_class_main_chapter_name" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="main-chapter-add-button">Submit</button>
</form>
<?php
if(isset($_POST['main-chapter-add-button']))
{
$care_class_id=$_POST['care_class_id'];
$care_subject_id=$_POST['care_subject_id'];
$care_class_main_chapter_name=$_POST['care_class_main_chapter_name'];
$query="INSERT INTO `care_class_main_chapter` (`care_class_id`,`care_subject_id`,`care_class_main_chapter_name`) VALUES ('$care_class_id','$care_subject_id','$care_class_main_chapter_name')";
if(mysqli_query($con,$query))
{
echo '<script>swal("Main Chapter Added Sucessfully", "Please proceed", "success").then((value) => {
window.location.href="care-class-main-chapter-list.php"; });
</script>';
}
else
{
echo '<script>swal("Something Wrong", "Please proceed", "error").then((value) => {
window.location.href="care-class-main-chapter-list.php"; });
</script>';
}
}
?>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function loadData(type,subject_id){
$.ajax({
url : "care-class-main-chapter-list-ajax.php",
type : "POST",
data:{type:type,subject:subject_id},
success : function(data){
if(type=="subject"){
$("#care_subject_id").html(data);
}
else{
$("#care_class_id").append(data);
}
}
});
}
loadData();
$("#care_class_id").on("change",function(){
var cls =$("#care_class_id").val();
loadData("subject",cls);
})
});
</script>
<!-- /Container -->
<?php include('footer.php')?>
<?php include('../../database_configuration/dbconfig.php')?>
<?php
if($_POST['type']=="")
{
$class_sql="SELECT * FROM care_class";
$class_query=mysqli_query($con,$class_sql);
$str="";
while ($row=mysqli_fetch_assoc($class_query))
{
$str.="<option value='{$row['care_class_id']}'>{$row['care_class_number']}</option>";
}
}
else if($_POST['type']=="subject")
{
$class_sql="SELECT * FROM care_subject WHERE care_class_id={$_POST['subject']} ";
$class_query=mysqli_query($con,$class_sql);
$str="";
while ($row=mysqli_fetch_assoc($class_query))
{
$str.="<option value='{$row['care_subject_id']}'>{$row['care_subject_name']}</option>";
}
}
echo $str;
?>

Get ID of each row in modal by pressing edit button

Here is my code of table. I want to get ID of each row in opened modal when press button "EDIT". How can I send ID of selected row to modal? In my case bellow i am getting only first row ID.
Thank you for attention.
JS for modal form
<script>
$(".btn[data-target='#myModal']").click(function() {
var columnHeadings = $("thead th").map(function() {
return $(this).text();
}).get();
columnHeadings.pop();
var columnValues = $(this).parent().siblings().map(function() {
return $(this).text();
}).get();
var modalBody = $('<div id="modalContent"></div>');
var modalForm = $('<form role="form" name="modalForm" action="putYourPHPActionHere.php" method="post"></form>');
$.each(columnHeadings, function(i, columnHeader) {
var formGroup = $('<div class="form-group"></div>');
formGroup.append('<label for="'+columnHeader+'">'+columnHeader+'</label>');
formGroup.append('<input class="form-control" name="'+columnHeader+i+'" id="'+columnHeader+i+'" value="'+columnValues[i]+'" />');
modalForm.append(formGroup);
});
modalBody.append(modalForm);
$('.modal-body').html(modalBody);
});
$('.modal-footer .btn-primary').click(function() {
$('form[name="modalForm"]').submit();
});
</script>
<table class="simple-little-table table" cellspacing='0'>
<tr>
<th><p>№</p></th>
<th><p>Name, Surname</p></th>
<th>Own number</th>
<th>Company Number</th>
</tr>
<?php
$result =mysql_query("SELECT * FROM `my_table` WHERE 1 and status=1");
while ($row = mysql_fetch_array($result, MYSQL_NUM))
{
$id=$row["0"];
echo '<tr>
<td><p>'.$row[1].' '.$row[2].'</p></td>
<td><p>'.$row[4].'</p></td>
<td><p>'.$row[5].'</p></td>';
?>
<td><?php echo '<button class="btn btn-success" data-toggle="modal" data-target="#myModal" contenteditable="false" value=".$id.">'.$id.'</button>';?></td>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true" class="">? </span><span class="sr-only">Close</span>
</button>
<!--Here I am trying to echo ID-->
<h4 class="modal-title" id="myModalLabel"><?php echo $row[0]; ?></h4>
</div>
<div class="modal-body"> sadasdas</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>
<?php
}
?>
Here is picture of table
I need to get ID of row in modal

This is what you can do . i am not using your data but assuming that you have enough understanding to use this according to your need.
Basically I am just using a trick.
<table>
<?php $sr=1;
while(your condition){?>
<tr>
<td id="td_<?=$sr++;?>">value you want in model</td>
<td><button id="<?=$sr;?>">Edit</button></td>
</tr>
<?php } ?>
</table>
you will get something like this
<table>
<tr>
<td id="td_1"></td> <!--see the id of this td and button--->
</td><button class="myclass" id="1"></button></td>
</tr>
<tr>
<td id="td_2"></td>
</td><button class="myclass" id="2"></button></td>
</tr>
now use this jquery
$('.myclass').click(function(){
var btn_id = $(this).attr('id'); //getting the btn's id
var row_id = "#td_"+btn_id; // by this you got the id of that td
$('#id_in_modal_where_you_need_this').text($(row_id).text());
});

function getValue(id){
$('#myModalLabel').text(id);
$('#myModal').modal('show');
}
and call this function on button click
instead of using this
<button class="btn btn-success" data-toggle="modal" data-target="#myModal" contenteditable="false" value=".$id.">
use
<button class="btn btn-success" onclick='getValue(".$id.");' contenteditable="false" value=".$id.">

You shouldn't create html for modal for each row, but instead just create one modal, which will be used when every row is clicked.
Then, using jquery in click method you can set different fields for modal, such as id or something else, like this for example:
$("btn").click(function(event) {
id = event.target.id;
$(#myModalIdField).text = id;
});

use this :
first, give a table id="name",
use your own table and data and if ur using a database or normal table;
use button modal as -
<table id="table">
<thead>
<tr>
<th>Your data </th>
</thead>
<tbody>
<tr>
<td>Your Data </td>
<td><button type="button" class="btn btn-primary" onclick='getValue(".$rindex.")' contenteditable="false" value=".$rindex.""> </td>
<div class=" modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header" id="myModalLabel">
<h4 class="modal-title">Enter Remarks:</h4>
<!-- <button type="button" class="close" data-dismiss="modal">×</button>-->
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" method="post">
<div class="form-group">
<label for="comment">Remarks:</label>
<textarea class="form-control" rows="3" name="comment" id="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" name="msub" id="" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</button>
</td>
</tr>
</tbody>
</table>
Use this jquery :
var table = document.getElementById('table'), rindex;
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].onclick = function getValue(rindex) {
rindex = this.rowIndex;
$('#myModalLabel').text(rindex);
$('#myModal').modal('show');
}
}

Bootstrap Modal not showing properly

Here is my screenshot of this modal, its showing but hiden

Could you please check the below line.where it append exactly(inside your modal content or outside).
actually it should be in outside of your modal content
<div class="modal-backdrop fade in"></div>

<div class="row-fluid sortable">
<div class="box span12">
<div class="box-header">
<h2><i class="halflings-icon align-justify"></i><span class="break"></span>Manage All Category</h2>
<div class="box-icon">
<i class="halflings-icon wrench"></i>
<i class="halflings-icon chevron-up"></i>
<i class="halflings-icon remove"></i>
</div>
</div>
<div class="box-content">
<div id="flash" style="display: none;">
<img style="margin: 15% 0 0 50%; position: absolute;" src="<?php echo base_url(); ?>admin/img/ajaxloader.gif"/>
</div>
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php if (isset($links)) {
foreach ($all_category as $category) { ?>
<tr>
<td><?php echo $category->category_id; ?></td>
<td class="center"><?php echo $category->category_name; ?></td>
<?php if ($category->status == 1) { ?>
<td class="center">
<a id="btnpublish" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);" class="label label-important">Unpublish</a>
</td>
<?php } else { ?>
<td class="center">
<a id="btnunpublish" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);" class="label label-success">Publish</a>
</td>
<?php } ?>
<td class="center">
<a class="btn btn-small btn-inverse" href="#" data-toggle="modal" data-target="#myModal<?php echo $category->category_id; ?>">View</a>
<a class="btn btn-small btn-info" href="#">Edit</a>
<a id="deleteCat" class="btn btn-small btn-danger" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);">Delete</a>
<!--Start View Modal-->
<div class="modal fade" id="myModal<?php echo $category->category_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $category->category_id; ?>">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel<?php echo $category->category_id; ?>">Category View</h4>
</div>
<div class="modal-body">
<p><b>Category ID:</b> <?php echo $category->category_id; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--End View Modal-->
</td>
</tr>
<?php }
} ?>
</tbody>
</table>
<div class="pagination pagination-centered">
<?php echo $links; ?>
</div>
</div>
</div><!--/span-->
</div>

Which version of Bootstrap are you using?
There was a ticket for that on GH in an earlier version of Bootstrap.
https://github.com/twbs/bootstrap/issues/16148

Every thing is good just one thing...put modal div outside to the td of the table, keep it inside body but out side to the table.
Modal is not displaying because you are repeating modal with same id of the modal in for each loop(like buttons are repeating).
I have answered this the way you can achieve it at link below.
dynamically created bootstrap3 modals do not work

Passing data using jquery or javascript in modal bootstrap

I have a table that represented from SQL Table that looping all data with PHP.
HTML
<tbody>
<?php
$no = 1;
foreach($data_request as $data) {
?>
<tr>
<td class="center"><?php echo $no++.". ";?> </td>
<td class="sorting1"><?php echo $data['id_request'];?> </td>
<td class="center"><?php echo "$nama"; ?></td>
<td class="right">
<a class="btn btn-danger" href="#">
<i class="halflings-icon white trash"></i> Close</a>
<a class="btn btn-success" href="#" id="print"?>">
<i class="halflings-icon pencil"></i> Preview </a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Print Preview</h3>
</div>
<div class="modal-body">
/*This would be a preview*/
</div>
<div class="modal-footer">
Make it to PDF
Close
</div>
</div>
My problem is, I wanna display a row data to modal bootstrap if users clicked the preview button.
So, if user click the button in row 1, modal would be displaying all field/data in first row of table.
Untill now, I have success passing data using jquery like this :
<script>
$('.btn-success').click(function(){
var address = [];
$(this).closest('tr').find('td').not(':last').each(function() {
var textval = $(this).text(); // this will be the text of each <td>
address.push(textval);
});
alert(address.join('\n'));
});
</script>
I am confusing to pass the data from script to modal, anyone can help ?

Better to give unique ids to the rows while rendering it from SQL DB.
<tbody>
<?php
$no = 1;
foreach($data_request as $data) {
?>
<tr id="row_<?php echo $data['id_request']; ?>">
<td class="center"><?php echo $no++.". ";?> </td>
<td class="sorting1"><?php echo $data['id_request'];?> </td>
<td class="center"><?php echo "$nama"; ?></td>
<td class="right">
<a class="btn btn-danger" href="#">
<i class="halflings-icon white trash"></i> Close</a>
<a class="btn btn-success" href="#" id="print_<?php echo $data['id_request']; ?>"">
<i class="halflings-icon pencil"></i> Preview </a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Print Preview</h3>
</div>
<div class="modal-body">
/*This would be a preview*/
</div>
<div class="modal-footer">
Make it to PDF
Close
</div>
</div>
Script:
<script>
$('.btn-success').click(function(){
var address = [];
var trId = $(this).attr('id').split('_')[1];
$('#row_'+trId).find('td').each (function() {
address.push($(this).text());
});
alert(address.join('\n'));
$('#myModal > .modal-body').html(address.join('\n'));
$('#myModal').modal('show');
});
</script>