I have a view in my project(PHP codeigniter), where the user can confirm or remove a particular record from the table of data displayed. When the user chooses to confirm a record, a modal pop up box shows up reassuring the confirmation. Clicking on the Confirm button in this modal will call a controller method to update the DB table appropriately via a consequent model method call. The same applies to the remove functionality in the view. I have implemented and called all the respective methods but it doesn't seem to affect in any way.
Code in context
1.View
<body>
<div class="content" style="background-color: white">
<div class="container-fluid" style="overflow-y: auto">
<legend>Vacancies Applied</legend>
<div>
<form class="form-horizontal" id="viewVacancy">
<?php echo $this->session->flashdata('msgconfirmed');
echo $this->session->flashdata('msgremoved');?>
<table class="table" id="vacancyApplicationTable" >
<thead class="active">
<tr style="background-color: lightblue;color: white" >
<th class="hidden-lg hidden-lg">ID</th>
<th>Company</th>
<th>Job Title</th>
<th>Applied Date</th>
<th>Closing Date</th>
<th>Status</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody >
<?php
if(count($vacanciesApplied)>0) {
foreach ($vacanciesApplied as $row) { ?>
<tr>
<td class="hidden-lg hidden-lg"><a><?php echo $row->vid; ?></a></td>
<td><?php echo $row->onBehalfOf; ?></td>
<td><?php echo $row->jobTitle; ?></td>
<td><?php echo $row->appliedDate; ?></td>
<td><?php echo $row->closingDate; ?></td>
<?php
if ($row->status == "pending")
{
$status = "Pending";
?>
<td><?php echo $status ?></td>
<td></td>
<td><a data-toggle="modal" data-name="<?php echo $row->vid; ?>" data-id="<?php echo $row->studentId; ?>" title="Add this item" class="open-AddBookDialog btn btn-danger" href="#deleteVacancyApplication">Remove</a></td>
<?php
}
else
{
$status = "Accepted"; ?>
<td class="blink_text"><?php echo $status ?></td>
<td><a data-toggle="modal" data-name="<?php echo $row->vid; ?>" data-id="<?php echo $row->studentId; ?>" title="Add this item" class="open-AddBookDialog btn btn-info" href="#confirmVacancyStatus">Confirm</a></td>
<td><a data-toggle="modal" data-name="<?php echo $row->vid; ?>" data-id="<?php echo $row->studentId; ?>" title="Add this item" class="open-AddBookDialog btn btn-danger" href="#deleteVacancyApplication">Remove</a></td>
<?php
}
?>
</tr>
<?php }
}
?>
</tbody>
</table>
</form>
</div>
</div>
</div>
</body>
<script>
$(function () {
$('#vacancyApplicationTable').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth":true
});
});
</script>
<script>
$(document).on("click", ".open-AddBookDialog", function () {
var studentId = $(this).data('id');
var vid = $(this).data('name');
$(".modal-body #uid").val( studentId );
$(".modal-body #vid").val( vid );
});
</script>
<!-- Modal for confirmVacancyStatus -->
<div class="modal fade" id="confirmVacancyStatus" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-keyboard="false" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color:lawngreen">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="uid"><i class="glyphicon glyphicon-check"></i> Confirm</h4>
</div>
<div class="modal-body">
<form method="post" id="formConfirm" action="<?php echo base_url() . 'index.php/studentDashboardController/confirmVacancy'?>">
<input type="text" name="vid" id="vid" value="" hidden/>
<div class="form-group">
<p>You got Accepted to follow this vacancy</p>
<p>Do you confirm this?</p>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success pull-right">Confirm</button>
</div>
</div>
</div>
</div>
<!-- Modal for deleteVacancyApplication -->
<div class="modal fade" id="deleteVacancyApplication" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-keyboard="false" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color:red">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="uid"><i class="glyphicon glyphicon-remove"></i> Cancel</h4>
</div>
<div class="modal-body">
<form method="post" id="form" action="<?php echo base_url() . "index.php/studentDashboardController/deleteVacancyRequest"?>">
<input type="text" name="vid" id="vid" value="" hidden/>
<div class="form-group">
<p>Are you sure you want to cancel your application for this vacancy</p>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger pull-right">Cancel Application</button>
</div>
</div>
</div>
</div>
2.Controller- studentDashboardController/confirmVacancy
public function confirmVacancy()
{
if (isset($this->session->userdata['logged_in']))
{
$uid = ($this->session->userdata['logged_in']['userId']);
$data['notifyCount']= $this->notifications->getUnreadNotification($uid);
$data['title']= $this->notifications->getUnreadNotificationTitle($uid);
$data['notifyCount']= $this->notifications->getUnreadNotification($uid);
$data['users'] = $this->user->getUserNames();
$msg = $this->vacancyModel->confirmVacancyApplication($uid,$this->input->post());
$msgText = $msg['msg'];
$msgType = $msg['type'];
//Loading View
if($msgType == "danger")
{
$this->session->set_flashdata('msgconfirmed', '<div class="alert alert-danger text-center">'.$msgText.'</div>');
}
else
{
$this->session->set_flashdata('msgconfirmed', '<div class="alert alert-success text-center">'.$msgText.'</div>');
}
redirect(base_url('index.php/studentDashboardController/displayVacanciesApplied'));
}
else
{
$this->load->view('login/loginView');
}
}
3.Model- vacancyModel->confirmVacancyApplication
public function confirmVacancyApplication($uid, $post)
{
$vid = $post['vid'];
$data = array(
'availability' => $vid+""
);
$this->db->where("uid", $uid);
$status = $this->db->update("studentprofile", $data);
if($status)
{
$msg = "You have successfully confirmed";
$type = "success";
$msgData = array(
'msg' => $msg,
'type' => $type
);
return $msgData;
}
else
{
$msg = "Sorry. This vacancy could not be confirmed";
$type = "danger";
$msgData = array(
'msg' => $msg,
'type' => $type
);
return $msgData;
}
}
Interfaces
Any suggestions in this regard will be highly appreciated.
You are closing the before submit button.
Put form after input type="submit" tag. It will work
Related
After I successfully edited data using PHP ajax and MySQLi, the
“<input type="text" class="tagsinput"/>” is not properly initialized.
I try this code, and it works but not in its proper form
$(document).ajaxComplete(function () {
$(document).find('.tagsinput').tagsInput();
});
This is the picture of not yet submitted form
This is the picture of successfully edited data, but I want to edit
again
This is my ajax call code
$(document).on('click', '.edit_fp_follow_up', function () {
$fp_follow_up_id = $(this).val();
$method = $('#method' + $fp_follow_up_id).val();
if (confirm('Are you sure you want to edit this follow-up?')) {
$.ajax({
type: "POST",
url: "action/editfpfollowup.php",
cache: false,
async: false,
data: {
fp_follow_up_id: $fp_follow_up_id,
method: $method,
edit: 1,
},
success: function () {
$('#alert').slideDown();
$('#alerttext').text('Successfully updated Follow-up Schedule!');
setTimeout(function () {
$('#alert').fadeOut('slow');
}, 1500);
$(document).ajaxComplete(function () {
$(document).find('.tagsinput').tagsInput();
});
show_follow_up_familyplanning();
}
});
}
});
This is my modal code
<div class="modal fade" id="edit_fp_follow_up<?php echo $fetch1['fp_follow_up_id']; ?>" tabindex="-1" role="dialog" aria-labelledby="defModalHead" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<center>
<div id="modallabel2" class="alert alert-danger" style="display:none;">
<center><span id="checkfield2"></span></center>
</div>
</center>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="defModalHead"><strong>Update Follow-up Visit - Family Planning</strong></h4>
</div>
<div class="modal-body">
<form id="fpfollowup">
<fieldset>
<div class="col-md-12">
<div class="form-group">
<label>Method/Brand</label>
<input type="text" class="tagsinput" id="method<?php echo $fetch1['fp_follow_up_id']; ?>" value="<?php echo $fetch1['method_brand']; ?>" data-role="tagsinput" required />
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" value="<?php echo $fetch1['fp_follow_up_id']; ?>" class="btn btn-success edit_fp_follow_up">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is my code in my table
<div class="table-responsive">
<table id="fpfollowuptable" class="table datatable hover">
<thead>
<tr class="warning">
<th>
<center>Patient ID</center>
</th>
<th>
<center>Patient Name</center>
</th>
<th>
<center>Remarks</center>
</th>
<th>
<center>Next Service Date</center>
</th>
<th>
<center>Status</center>
</th>
<th>
<center>Actions</center>
</th>
</tr>
</thead>
<tbody>
<?php
require '../require/config.php';
$query1 = $conn->query("SELECT * FROM `fp_follow_up` NATURAL JOIN `patient` WHERE `fp_follow_up`.`patient_id` = `patient`.`patient_id` ORDER BY `fp_follow_up_id` DESC") or die(mysqli_error());
while($fetch1 = $query1->fetch_array()){
?>
<tr>
<td>
<center><strong><?php echo $fetch1['year']?><?php echo "0".$fetch1['patient_id']?></strong></center>
</td>
<td>
<center><strong><?php echo $fetch1['patient_name']?></strong></center>
</td>
<td>
<center><?php echo $fetch1['remarks']?></center>
</td>
<td>
<center><?php echo $fetch1['next_service_date']?></center>
</td>
<td>
<center>
<?php
if ($fetch1['follow_up_status'] == 'Pending')echo "<span class='badge badge-danger animated infinite pulse' style='animation-duration:.8s;'>Pending</span>";
if ($fetch1['follow_up_status'] == 'Done')echo "<span class='badge badge-info'>Done</span>";
if ($fetch1['follow_up_status'] == 'Cancelled')echo "<span class='badge badge-warning'>Cancelled</span>";
?></center>
</td>
<td>
<center><button class="btn btn-sm btn-info" data-toggle="modal" data-target="#edit_fp_follow_up<?php echo $fetch1['fp_follow_up_id']; ?>">UPDATE</button></center>
</td>
<?php require('../modals/edit_fp_follow_up.php'); ?>
</tr>
<?php
}
$conn->close();
?>
</tbody>
</table>
</div>
Have you tried using
<input type="text" class="tagsinput" data-role="tagsinput"/>
Demo Here: https://codepen.io/dannibla/pen/QGLyBW
Just add data-role="tagsinput" to your input field to automatically
change it to a tags input field.
You have created modals in loops..
<input type="text" class="tagsinput<?php echo $fetch1['fp_follow_up_id']; ?>" id="method<?php echo $fetch1['fp_follow_up_id']; ?>" value="<?php echo $fetch1['method_brand']; ?>" data-role="tagsinput" required />
and then in jquery, try
$(document).find('.tagsinput'+fp_follow_up_id).tagsInput();
I have a table of data populated using a foreach loop like below:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Keyboard Language</th>
<th scope="col">PC Spec</th>
<th scope="col">Desk Position</th>
<th scope="col">Price Per Hour</th>
<th scope="col">Hours</th>
<th scope="col">Total Price</th>
<th scope="col">Confirm</th>
</tr>
</thead>
<tbody>
<?php $increment =1; ?>
<!--print each item in a new row on the table -->
<?php foreach($bookingData as $booking_item) { ?>
<tr>
<td><?php echo $increment ?></td>
<td><?php echo $booking_item['item']; ?></td>
<td><?php echo $booking_item['item1']; ?></td>
<td><?php echo $booking_item['item2']; ?></td>
<td><?php echo '£ '. $booking_item['item3']; ?></td>
<td><?php echo $userEntered['item4']; ?></td>
<td><?php echo '£ '.$userEntered['item5'] * $booking_item['item6']; ?></td>
<?php $totalPrice = $userEntered['item7'] * $booking_item['item7'];?>
<td><button class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter<?php echo $increment; ?>"><i class="fa fa-calendar-check" style="color: white;"></i>Book now!</button></td>
</tr>
<?php $increment++; } ?>
</tbody>
</table>
I have button in each table row, I want to create a modal that pops up to ask the user to confirm the action using the modal code below:
<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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php echo $booking_item['item1']?>
<?php echo $booking_item['item2']?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Confirm Booking!</button>
</div>
</div>
</div>
</div>
However, I'm stumped as to how to load each row of data into the modal for each table row, I have done this before in another project but I can't for the life remember how to replicate it
For the modal to be loaded there needs to be seperate model content for each triggers. So you need model contents in foreach also.
<?php foreach
<td><button class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter<?php echo $increment; ?>"><i class="fa fa-calendar-check" style="color: white;"></i>Book now!</button></td>
foreach end
?>
<?php foreach
$increment =0;
<div class="modal fade" id="exampleModalCenter#exampleModalCenter<?php echo $increment; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
model content
</div>
</div>
$increment++;
foreach end
?>
I hope you understand what I am trying to tell you. You need to loop modal also and make the id dynamic.
I managed to accomplish this by using some simple JQuery and data attributes. I pass the data attributes into the button during the foreach loop so my button now looks like this:
<button class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter"
data-specs="PC Specs: <?php echo $booking_item['specs'];?>"
data-date="Date: <?php echo $userEntered['date'];?>"
data-start="Start: <?php echo $userEntered['start_time'];?>"
data-end="End : <?php echo $userEntered['end_time'];?>"
data-totalprice="Total Price : <?php echo $totalPrice;?>"
data-hours="Hours : <?php echo $userEntered['hours_booked'];?>">
<i class="fa fa-calendar-check" style="color: white;"></i>Book now!
</button>
Now In my Jquery, I fetch these values and set the text of the classes I have established within the modal
$('#exampleModalCenter').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) //button that triggers modal
var spec = button.data('specs') // Extract info from data-* attributes
var date = button.data('date')
var start = button.data('start')
var end = button.data('end')
var hours = button.data('hours')
var totalPrice = button.data('totalprice')
var modal = $(this)
modal.find('.specs').text(spec)
modal.find('.date').text(date)
modal.find('.start').text(start)
modal.find('.end').text(end)
modal.find('.hours').text(hours)
modal.find('.totalprice').text(totalPrice)
})
I found this at: https://getbootstrap.com/docs/4.0/components/modal/
Firstly add id attribute to the confirm button and store all your data in data attribute as I did in the below code.
In your modal add form to submit your data stored in the hidden input fields.
Edit
As per your answer, I've updated my code
Your button
<button class="btn btn-success" id="confirmBtn"
data-specs="<?php echo $booking_item['specs'];?>"
data-date="<?php echo $userEntered['date'];?>"
data-start="<?php echo $userEntered['start_time'];?>"
data-end="<?php echo $userEntered['end_time'];?>"
data-totalprice="<?php echo $totalPrice;?>"
data-hours="<?php echo $userEntered['hours_booked'];?>">
<i class="fa fa-calendar-check" style="color: white;"></i>Book now!
</button>
Your Modal code
<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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="<?php echo base_url(); ?>your_controller_name/confirm_book" method="post">
<div class="modal-body">
<input type="hidden" name="id" id="bookId" />
<input type="hidden" name="specs" id="specs" />
<input type="hidden" name="date" id="date" />
<input type="hidden" name="start_time" id="start_time" />
<input type="hidden" name="end_time" id="end_time" />
<input type="hidden" name="totalPrice" id="totalPrice" />
<input type="hidden" name="hours_booked" id="hours_booked" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Confirm Booking!</button>
</div>
</form>
</div>
</div>
</div>
This is your jquery code which does all your work.
Jquery Code
$('#confirmBtn').on('click', function (e) {
e.preventDefault();
var id = $(this).data('id'); //takes the `id` from your button
var specs = $(this).data('specs');
var date = $(this).data('date');
var start_time = $(this).data('start_time');
var end_time = $(this).data('end_time');
var totalPrice = $(this).data('totalPrice');
var hours_booked = $(this).data('hours_booked');
$("#exampleModalCenter #bookId").val(id); //stores to modal hidden field
$("#exampleModalCenter #specs").val(specs);
$("#exampleModalCenter #date").val(date);
$("#exampleModalCenter #start_time").val(start_time);
$("#exampleModalCenter #end_time").val(end_time);
$("#exampleModalCenter #totalPrice").val(totalPrice);
$("#exampleModalCenter #hours_booked").val(hours_booked);
$('#exampleModalCenter').modal();
});
Here is your controller code
public function confirm_book(){
$id = $this->input->post('id');
$specs= $this->input->post('specs');
$date= $this->input->post('date');
$start_date= $this->input->post('start_date');
$end_date= $this->input->post('end_date');
$totalPrice= $this->input->post('totalPrice');
$hours_booked= $this->input->post('hours_booked');
//do whatever you want to do with these data
}
Hope this will help you.
I have a table which shows multiple rows data taken from database.
There is one button in every row. So what i want, when i click on the button it should be show a popup and data would be shown of that particular row.
for example, when i click on button on the first row, popup with the data of first row will be shown.if i click the button on second row, the data of second row will be shown.
The problem is, when i click on the button of the first row or second row i am getting the same data in the popup of two different row.
so, how can i get the different data in every popup related to different rows?
This my code of view in which i have taken value from controller and shown
CONTROLLER
public function get_job()
{
$data['result'] = $this->user_model->view_job();
if (!empty($data['result']))
{
$this->load->view('admin_view',$data);
}
else
{
$email = $_SESSION['email'];
$data['result'] = $this->user_model->get_username($email);
$this->load->view('no_job',$data);
}
}
MODEL
//To get recently added jobs by inner join
public function view_job()
{
$this->db->select('add_job.*, crm_accounts.company');
$this->db->from('add_job');
$this->db->join('crm_accounts', 'add_job.cid = crm_accounts.id', 'inner');
$this->db->where('add_job.status', 'NEW');
$query = $this->db->get();
return $query->result_array();
}
VIEW
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>Job Id</th>
<th>Job Name</th>
<th>Company Name</th>
<th>Company Id</th>
<th>More</th>
</tr>
</thead>
<tbody>
<tr>
<?php
foreach ($result as $object)
{
?>
<td><?php echo $object['id']?></td>
<td><?php echo $object['job_id']?></td>
<td><?php echo $object['job_name']?></td>
<td><?php echo $object['company']?></td>
<td><?php echo $object['cid']?></td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal">
Details
</button>
</td>
</tr>
<div id="MyModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-title"><h3>Company Name :<?php echo $object['company']?></h3></div>
</div>
<div class="modal-body">
<h3>Id: <?php echo $object['id']?></h3>
<h3>Job Name: <?php echo $object['job_name']?></h3>
<h3>Job Id: <?php echo $object['job_id']?></h3>
<h3>Paper Size: <?php echo $object['paper_size']?></h3>
<h3>Paper Type: <?php echo $object['paper_type']?></h3>
<h3>Cutting Size: <?php echo $object['cutting_size']?></h3>
<h3>Sheet: <?php echo $object['sheet']?></h3>
<h3>Lamination: <?php echo $object['lamination']?></h3>
<h3>Print Type: <?php echo $object['print_type']?></h3>
<h3>Ctp By: <?php echo $object['ctp_by']?></h3>
</div>
<div class="modal-footer">
<form method="post" action="admin_view">
<button type="button" name="accepted" value="accept" class="btn btn-success">Accept Job</button>
</form>
<button type="button" class="btn btn-danger" data-dismiss="modal">Reject Job</button>
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
</div>
<?php } ?>
</div>
</div>
</div>
</td>
</tbody>
</table>
Reason for same modal is opening each time you click on different row's button is the same ID of each modal. What you need to do is change the data-target of modal to be different for each row. To do this append counter or the ID or the row after the DIV ID of the modal.
Like this,
Your button code will look something like this,
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal<?php echo $object['id']?>">
Details
</button>
And code of Modal will look something like this,
<div id="MyModal<?php echo $object['id']?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-title">
<h3>Company Name :<?php echo $object['company']?></h3>
</div>
</div>
<div class="modal-body">
<h3>Id: <?php echo $object['id']?></h3>
<h3>Job Name: <?php echo $object['job_name']?></h3>
<h3>Job Id: <?php echo $object['job_id']?></h3>
<h3>Paper Size: <?php echo $object['paper_size']?></h3>
<h3>Paper Type: <?php echo $object['paper_type']?></h3>
<h3>Cutting Size: <?php echo $object['cutting_size']?></h3>
<h3>Sheet: <?php echo $object['sheet']?></h3>
<h3>Lamination: <?php echo $object['lamination']?></h3>
<h3>Print Type: <?php echo $object['print_type']?></h3>
<h3>Ctp By: <?php echo $object['ctp_by']?></h3>
</div>
<div class="modal-footer">
<form method="post" action="admin_view">
<button type="button" name="accepted" value="accept" class="btn btn-success">Accept Job</button>
</form>
<button type="button" class="btn btn-danger" data-dismiss="modal">Reject Job</button>
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
</div>
<?php } ?>
</div>
</div>
</div>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>Job Id</th>
<th>Job Name</th>
<th>Company Name</th>
<th>Company Id</th>
<th>More</th>
</tr>
</thead>
<tbody>
<tr>
<?php
foreach ($result as $object)
{
?>
<td><?php echo $object['id']?></td>
<td><?php echo $object['job_id']?></td>
<td><?php echo $object['job_name']?></td>
<td><?php echo $object['company']?></td>
<td><?php echo $object['cid']?></td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal_<?php echo $object['id']?>">
Details
</button>
</td>
</tr>
<div id="MyModal_<?php echo $object['id']?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-title"><h3>Company Name :<?php echo $object['company']?></h3></div>
</div>
<div class="modal-body">
<h3>Id: <?php echo $object['id']?></h3>
<h3>Job Name: <?php echo $object['job_name']?></h3>
<h3>Job Id: <?php echo $object['job_id']?></h3>
<h3>Paper Size: <?php echo $object['paper_size']?></h3>
<h3>Paper Type: <?php echo $object['paper_type']?></h3>
<h3>Cutting Size: <?php echo $object['cutting_size']?></h3>
<h3>Sheet: <?php echo $object['sheet']?></h3>
<h3>Lamination: <?php echo $object['lamination']?></h3>
<h3>Print Type: <?php echo $object['print_type']?></h3>
<h3>Ctp By: <?php echo $object['ctp_by']?></h3>
</div>
<div class="modal-footer">
<form method="post" action="admin_view">
<button type="button" name="accepted" value="accept" class="btn btn-success">Accept Job</button>
</form>
<button type="button" class="btn btn-danger" data-dismiss="modal">Reject Job</button>
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
</div>
<?php } ?>
</div>
</div>
</div>
</td>
</tbody>
</table>
Try this code. i thing. you problem will resolved.
I have my data displayed in table, and the way to edit and delete the data is in bootstrap modal. I'll just showing my delete modal. I used CodeIgniter 2.2.6:
My table:
<table class="table table-striped table-bordered table-hover">
<thead class="text-center">
<th class="text-center">No.</th>
<th class="text-center">Major Code</th>
<th class="text-center">Major Name</th>
<th class="text-center">Option</th>
</thead>
<tbody>
<?php $no = 1; ?>
<?php foreach ($select_major as $row): ?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $row->cd_major; ?></td>
<td><?php echo $row->name_major; ?></td>
<td align=center>
<!-- DELETE BUTTON -->
<a
class="btn btn-danger btn-xs"
role="button"
data-toggle="modal"
data-target="#modal-delete"
href="<?php
$cd_major = $row->cd_major;
$name_major = $row->name_major;
?>">
<i class="fa fa-fw fa-trash"></i> Delete
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
My Modal:
<!-- MODAL DELETE DATA -->
<div class="modal fade" id="modal-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="<?php echo base_url('major'); ?>">
<input type="hidden" name="id_major" value="<?php echo (isset($id_major) ? $id_major : ''); ?>" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<!-- MODAL TITLE -->
<h4 class="modal-title"><i class="fa fa-fw fa-trash"></i> Delete Data</h4>
</div>
<!-- FORM -->
<div class="modal-body">
<p>Are you sure to delete this major? <b><?php echo $name_major; ?></b> ini?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-danger" name="delete" value="Yes, delete" />
</div>
</form>
</div><!--/ .modal-content -->
</div><!--/ .modal-dialog -->
</div><!--/ .modal -->
But when I try to delete the selected data, it always ordering to delete the last data. What should I do to fix it?
In your case you would add code something like below:
Your new table:
<table class="table table-striped table-bordered table-hover">
<thead class="text-center">
<th class="text-center">No.</th>
<th class="text-center">Major Code</th>
<th class="text-center">Major Name</th>
<th class="text-center">Option</th>
</thead>
<tbody>
<?php $no = 1; ?>
<?php foreach ($select_major as $row): ?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $row->cd_major; ?></td>
<td><?php echo $row->name_major; ?></td>
<td align=center>
<!-- DELETE BUTTON -->
<a
class="btn btn-danger btn-xs"
role="button"
data-toggle="modal"
data-target="#modal-delete"
href="<?php
$cd_major = $row->cd_major;
$name_major = $row->name_major;
?>" onclick=deleteRecord(<?php $row->cd_major?>)>
<i class="fa fa-fw fa-trash"></i> Delete
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script>
function deleteRecord(id){
document.getElementById("id_major").value = id;
}
</script>
Your new modal:
<!-- MODAL DELETE DATA -->
<div class="modal fade" id="modal-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="<?php echo base_url('major'); ?>">
<input type="hidden" name="id_major" id="id_major" value="<?php echo (isset($id_major) ? $id_major : ''); ?>" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<!-- MODAL TITLE -->
<h4 class="modal-title"><i class="fa fa-fw fa-trash"></i> Delete Data</h4>
</div>
<!-- FORM -->
<div class="modal-body">
<p>Are you sure to delete this major? <b><?php echo $name_major; ?></b> ini?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-danger" name="delete" value="Yes, delete" />
</div>
</form>
</div><!--/ .modal-content -->
</div><!--/ .modal-dialog -->
</div><!--/ .modal -->
Please use the code which i have given you, it should work now.
I assume cd_major is the id of the row which you want to delete, if not, you can replace the field name in the function which we have added to <a> tag in onclick event.
Thanks
Here is my code
$sql = "select * from billbook where stcode =? and sem =?";
$query = $mysqli->prepare($sql);
$query->bind_param('si',$stcode, $sem);
$query->execute();
$query->store_result();
$query->bind_result($billno,$billdate,$stcode,$sem,$amount);
$x = 1;
while($query->fetch())
{
?>
<tr>
<td align='center'><?php echo $x ?></td>
<td align='center' id="bno"><?php echo $billno ?></td>
<td align='center'><?php echo $billdate?></td>
<td align='right'><?php echo $amount?>.00</td>
</tr>
<?php
}
?>
My aim is to show the details of the Bill Number in a Modal Dialog Popup in Bootstrap, when the user click the "bno" ID (Second Column), after processing the details in an external PHP file.
Please Help.
<td align="center" id="bno"><?= $billno ?></td>
<?php
// generate a modal per bill
$modals[] = array(
'billno' => $billno,
'modal_id' => 'billno-'.$billno,
'title' => 'Bill No. '.$billno,
'message' => 'Modal body here',
'dismiss_button_text' => 'Close'
);
?>
...
<?php foreach ($modals as $modal) : ?>
<!-- Modal -->
<div class="modal fade" id="billno-<?= $modal['billno'] ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title"><?= $modal['title'] ?></h4>
</div>
<div class="modal-body">
<p><?= $modal['message'] ?></p>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-success form-control" data-dismiss="modal"><?= $modal['dismiss_button_text'] ?></button>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>