i have created a button that will view the vehicles details when clicked. how ever, my data modal dialog does not show up. here is my codes..
<table class="table table-striped">
<tr>
<th width="40%">Plate Number</th>
<th width="30%">Type</th>
<th width="30%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["plateNo_vehicle"]; ?></td>
<td><?php echo $row["vehicle_Type"];?></td>
<td><input type="button" name="view" value="view" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
this is the modal class and the script. the script supposed to contain ajax that supposed to view all the vehicle detail but i changed it just to pop up a data modal dialog only because the data modal wont show up at all.
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Vehicles Details</h4>
</div>
<div class="modal-body" id="vehicle_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
script
<script>
$(document).ready(function(){
$('.view_data').click(function(){
$('#dataModal').modal("show");
});
});
It seems like you're loading jQuery twice.
First instance: <script src="../vendor/jquery/jquery.min.js"></script>
Second instance: <script src="ajax.googleapis.com/ajax/libs/jquery/2.2.0/…
this may be causing conflicts. Stick with the latest version only.
If you are using Bootstrap you can just add:
data-toggle="modal" data-target="#dataModal"
attributes in your button
Related
Good day! I have a jquery and bootstrap 4 datatable with pagination and a delete button at each row but after the page 1 is full of data it will go to page 2. The problem is the data in page 2 with a delete button row is not working but in page 1 the delete button works perfectly..
Here's my table code:
<table class="table table-hover table-bordered" id="questionTable">
<thead>
<tr>
<th>No.</th>
<th>Student</th>
<th>Subject Code</th>
<th>Semester</th>
<th>SchoolYear</th>
<th>Professor</th>
<th></th>
</tr>
</thead>
<tbody>
<?php while ($row = $result -> fetch_object()): ?>
<tr>
<td><?php echo $row->Subject_Student_Taken;?></td>
<td><?php echo $row-> Student_ID;?></td>
<td><?php echo $row-> Subject_Code;?></td>
<td><?php echo $row-> Term_Name;?></td>
<td><?php echo $row-> SY_Name;?></td>
<td><?php echo $row-> Faculty_ID;?></td>
<td class="text-center">
<a class="btn btn-sm btn-outline-primary text-muted" href="SubjectTaken_edit.php?Subject_Student_Taken=<?php echo $row->Subject_Student_Taken;?>">Edit</a>
<a data-fid="<?php echo $row->Subject_Student_Taken;?>" title="Delete Faculty" data-toggle="modal" data-target="#delete_modal" class="btn btn-sm btn-outline-danger delete-faculty-btn text-muted" >Delete</a>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
Here's my delete code:
if(!empty($_POST['delete'])) {
$id = $_POST['delete'];
$data->delete_StudentTakenHandle($id, $conn);
}
Function code:
function delete_StudentTakenHandle($id, $conn){
$sql = "DELETE FROM subject_taken_handle WHERE Subject_Student_Taken=? ";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $id);
$stmt->execute();
}
Modal code:
<div class="modal fade" id="delete_modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Delete Confirmaiton</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="alert alert-danger" role="alert">
Are you sure you want to delete selected record?
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<input type="hidden" name="delete" id="row-id-to-delete">
<button type="submit" class="btn btn-danger" >Yes</button>
</div>
</div>
</div>
</div>
And here's my jquery code:
<script>
$('.delete-faculty-btn').on('click',function(){
$("#row-id-to-delete").val($(this).data('fid'));
});
</script>
The error is, most likely, caused by this:
only the elements from the first page are displayed (existing) when you set your jQuery event.
Since the jQuery.on function attaches events only to existing elements, the event is not attached to elements from other pages.
Solution:
You should use the table's click event as a wrapper for attaching events to delete buttons.
This way, each time you click and change the page, delete buttons will exist, and the jQuery.on function will be able to attach event for delete to them.
You should wrap your event attach code like this:
$("#questionTable").on("click", ".delete-faculty-button", function(){
// attach your delete event here
});
Read more in the documentation of jQuery.on.
Use the delegated format of on instead of click..on() | jQuery API Documentation
$('.delete-faculty-btn').on('click',function(){
$("#row-id-to-delete").val($(this).data('fid'));
});
becomes:
$(document).on("click", ".delete-faculty-btn", function () {
$("#row-id-to-delete").val($(this).data('fid'));
});
I have a PHP file manage-users.php which contains bootstrap Data-table. Which shows data from MySQL users Table .
code of Data-table is :
<table id="myTable" class="table table-striped table-hover">
<thead>
<tr>
<th>
<span class="custom-checkbox">
<input type="checkbox" id="selectAll">
<label for="selectAll"></label>
</span>
</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
$result = mysqli_query($conn,"SELECT * FROM users") or die("Unable to qet all users data " . mysqli_error($conn));
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo '<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox1" name="options[]" value="1">
<label for="checkbox1"></label>
</span>
</td>';
echo "<td>".$row['FIRST_NAME']."</td>";
echo "<td>".$row['LAST_NAME']."</td>";
echo "<td>".$row['EMAIL']."</td>";
echo "<td>".$row['PHONE']."</td>";
echo '
<td>
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</td>
';
echo "</tr>";
}
?>
</tbody>
</table>
In the same page, I have two bootstrap modals to delete and edit data .
I'm working on Delete now.
Delete Modal Code is :
<div id="deleteEmployeeModal<?php echo $row['USER_ID']; ?>" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-header">
<h4 class="modal-title">Delete User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete these Records?</p>
<p class="text-warning"><small>This action cannot be undone.</small></p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button class="btn btn-danger">Delete</button>
</div>
</form>
</div>
</div>
</div>
Now the problem is that, that i can not delete data because in Delete Modal the $row['USER_ID] is empty. there is no problem in retrieving data from the server because the $row['USER_ID] is showing showing on every user specific delete button. what should i do now ?
If question needs more explanation, i'll explain.
Upon opening the modal, you basically set a hidden field so that when you submit the form, it will send delete_user_data.php?id=YOUR-VALUE.
1) Store the ID in the HTML. A good place might be the link that opens the modal. Also, remove data-toggle attribute because we will be opening the modal dynamically.
echo '<i class="material-icons" data-toggle="tooltip" title="Delete"></i>';
2) Only use one modal for deleting.
<div id="deleteEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- give your form an action and method -->
<form action="delete_user_data.php" method="GET">
<div class="modal-header">
<h4 class="modal-title">Delete User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete these Records?</p>
<p class="text-warning"><small>This action cannot be undone.</small></p>
</div>
<div class="modal-footer">
<!-- add a hidden input field to store ID for next step -->
<input type="hidden" name="id" value="" />
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<!-- change your delete link to a submit button -->
<button class="btn btn-danger" type="submit">Delete</button>
</div>
</form>
</div>
</div>
</div>
3) Open the modal dynamically.
$(function () {
$('a.delete').click(function (e) {
e.preventDefault();
var link = this;
var deleteModal = $("#deleteEmployeeModal");
// store the ID inside the modal's form
deleteModal.find('input[name=id]').val(link.dataset.id);
// open modal
deleteModal.modal();
});
});
Use similar approach for doing the Edit modal.
I know this has been asked a lot but I haven't found any of the answers to the issue to be very fruitful. I essentially have a table inside a view that is displayed using a foreach loop in PHP, this spits out the records one by one and appends some 'Action' buttons in the last column (download, delete and edit). The download and delete functions work perfectly, I just pass the ID in from each record in the foreach loop, job done.
I'm having a lot of issues with my modal though, it only ever displays the data from the first record when I echo the data in the 'value' field of each input. I'm really stumped on how to make this functionality work (JQuery is not my strongest language). I've seen some responses talking about Ajax, but I'd rather not use Ajax in this project. I'm using the codeigniter framework also for some more info.
I think the issue is that the modal is only created once when the foreach loop starts running, hence why it only ever has the first record data inside the modal, any help to get around this so I can edit each individual record inside the table would be great! Thanks for the help.
HTML/PHP:
<div class="container" id="widecontainer">
<h1 id="title">VMS Failure Records</h1>
<br>
<!-- print table with results onto view.php -->
<table class="table table-bordered" id="record">
<?php if($results) : ?>
<thead>
<tr style="background-color: #d3d3d3;">
<th>ID</th>
<th>VSM S/N</th>
<th>VM S/N</th>
<th>Project</th>
<th>Site</th>
<th>Install Loc</th>
<th>Observed During</th>
<th>Comments</th>
<th>Reported By</th>
<th>Replaced With</th>
<th>Date</th>
<th>Failure Classification</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- foreach result place it in row in table -->
<?php foreach($results as $res) : ?>
<tr>
<td><?php echo $res['id'] ?></td>
<td><?php echo $res['vsm_sn'] ?></td>
<td><?php echo $res['vm_sn'] ?></td>
<td><?php echo $res['project'] ?></td>
<td><?php echo $res['site'] ?></td>
<td><?php echo $res['install_location'] ?></td>
<td><?php echo $res['observed_during'] ?></td>
<td><?php echo $res['comments'] ?></td>
<td><?php echo $res['reported_by'] ?></td>
<td><?php echo $res['replaced_with'] ?></td>
<td><?php echo $res['date'] ?></td>
<td><?php echo $res['classification'] ?></td>
<td>
<?php echo form_open('/pages/delete/'. $res['id']); ?>
<button type="submit" class="btn btn-danger delete_btn" id="delete_btn" target="#confirmation">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
<!-- Modal displays when user clicks delete, asking them to confirm the deletion -->
<div id="confirm" name="confirm" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete Record <i class="fa fa-trash" aria-hidden="true"></i></h4>
</div>
<div class="modal-body">
<p style="color: red;"><strong>Deleting this record will delete .PDF and QRCode Data.</strong></p>
<p>Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-danger" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
</div>
</div>
</form>
<!--Modal displays to allow user to download the selected record. -->
<?php echo form_open('/pages/downloadFile/'. $res['id']); ?>
<button type="submit" class="btn btn-primary" alt="Download .pdf">
<i class="fa fa-download" aria-hidden="true"></i>
</button>
</form>
<form>
<button type="button" class="btn btn-success update_btn" id="update_btn" data-toggle="modal" data-target="#myModal"
vsm-sn="<?php echo $res['vsm_sn'];?>" record-id="<?php echo $res['id']; ?>">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Update Record</h4>
</div>
<div class="modal-body">
<form id="profileForm">
<input type="hidden" class="form-control" name="id" value="">
VSM SN : <input class="form-control" name="vsm_sn" value="" placeholder="VSM SN">
</form>
</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>
</td>
</tr>
<?php endforeach; ?>
<!-- If there are no results, display table headings and message -->
<?php elseif(!$results) : ?>
<thead>
<tr>
<th>ID</th>
<th>VSM S/N</th>
<th>VM S/N</th>
<th>Project</th>
<th>Site</th>
<th>Install Loc</th>
<th>Observed During</th>
<th>Comments</th>
<th>Reported By</th>
<th>Replaced With</th>
<th>Date</th>
<th>Failure Classification</th>
</tr>
</thead>
<tbody>
<h3 style="color: red;">No Results to Display</h3>
</tbody>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
JQUERY:
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal
//we get details from attributes
var vsm_sn=$(opener).attr('vsm-sn');
//set what we got to our form
$('#profileForm').find('[name="vsm_sn"]').val(vsm_sn);
});
The best way to go about it , is to use events hooks which is tied to the modal to help manage dynamism on modals.
Take for example, you want to pass information from the for loop to the modal you can do this using just a modal and then update the modal as it opens.
check bootstrap docs you will see this hook for modal
show.bs.modal
we then use attributes from the button to pick out our information we are going to display on the modal, e.g
<button user-id="<?php echo $data[$i]->userID; ?>" first-name="<?php echo $data[$i]->firstname;?>">Edit</button>
then we can use Jquery to pick it up and hook it when the modal is opening
See for example code here, replace the static repeat with your dynamic coding
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal
//we get details from attributes
var firstname=$(opener).attr('first-name');
//set what we got to our form
$('#profileForm').find('[name="firstname"]').val(firstname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class="table">
<thead>
<tr>
<th>SN</th>
<th>Firstname</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Theophilus</td>
<td>
<button class="btn btn-primary" first-name="Theophilus" data-toggle="modal" data-target="#myModal">
Edit
</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Omoregbee</td>
<td>
<button class="btn btn-primary" first-name="Omoregbee" data-toggle="modal" data-target="#myModal">
Edit
</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Endurance</td>
<td>
<button class="btn btn-primary" first-name="Endurance" data-toggle="modal" data-target="#myModal">
Edit
</button>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Modal title</h4>
</div>
<div class="modal-body">
<form id="profileForm">
Firstname : <input class="form-control" name="firstname" value="" placeholder="firstname">
</form>
</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>
Run it and see the result, so you can change the table style to use loop in php and then echo your data as attribute.
Hope it helps.
assign an id to modal body, e.g. : modal-body
declare a variable to store the HTML for the modal body, e.g. var modalHTML = ''
then append the contents in the for loop to that variable.
after that append the variable to the modal body, using $('#modal-body).append($(modalHTML)).
I have a table containing a list generated from mySQL database. Each record have a view button corresponding to it. I want to display the row information in bootstrap modal popup when someone clicks on the view button.
Issue
Not showing popup modal on first click. The modal shows up on second click. Also after closing the modal and clicking on another view button, the modal displays previously selected content.
Is there any alternative solution to overcome the problem?
My home page like
<div class="modal-container"></div>
<table width="100%" border="1">
<?php
for($i=1;$i<=10;$i++){
?>
<tr>
<td>Name</td>
<td>Location</td>
<td><a data-toggle="modal" href="#myModal" onclick="showmodal("<?=$i;?>","row_<?=$i;?>")">View</a></td>
</tr>
<?php
}
?>
</table>
jquery -->
function showmodal(id,category){
var url = "remote.php";
$('.modal-container').load(url,{var1:id,var2:category},function(result){
$('#myModal').modal({show:true});
});
}
remote.php
<div id="myModal" class="modal fade">
<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">Sample Model Box - Header Area</h4>
</div>
<div class="modal-body">
<?php
echo $_REQUEST['var1'];
echo $_REQUEST['var2'];
?>
</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</button>
</div>
</div>
</div>
</div>
Show modal then load ajax content
<div id="myModal" class="modal fade">
<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">Sample Model Box - Header Area</h4>
</div>
<div class="modal-body">
</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</button>
</div>
</div>
</div>
</div>
<table width="100%" border="1">
<?php
for($i=1;$i<=10;$i++){
?>
<tr>
<td>Name</td>
<td>Location</td>
<td><a data-toggle="modal" data-target="#myModal" href="#myModal" data-id="<?=$i;?>" data-category="<?=$i;?>">View</a></td>
</tr>
<?php
}
?>
</table>
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function (event) {
var clickedLink = $(event.relatedTarget); // clickedLink that triggered the modal
var id = clickedLink.data('id'); // Extract info from data-id attributes
var category = clickedLink.data('category'); // Extract info from data-category attributes
var modal = $(this);
modal.find('.modal-body').load('remote.php',{var1:id,var2:category});
});
</script>
i want to edit table row using bootstrap model....when i click on edit button it open up a model box with a name of designttion which i want to edit
..but when when i click on button only modalbox show but no record is shown in it...
please solve my problem
Controller
public function edit_desig(){
$this->load->model('designation_model');
$this->designation_model->edit_designation($id);
}
model
public function edit_designation($id){
$query=$this->db->get_where('designation',array('desig_id'=>$id));
return $query->result();
}
My view
<div id="myModal" class="modal fade" id="editdesigymodal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Designation</h4>
</div>
<div class="modal-body">
<input id="editdesignnation" type="text" class="form-control" placeholder="Enter here" />
</div>
<div class="modal-footer">
<button type="button" onclick="edit_designation()" class="btn btn-success" data-dismiss="modal">Edit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-12">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>Designations</th>
</tr>
</thead>
<tbody>
<?php print_r($designation); $i=1;foreach($designation as $desig): ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $desig['name']; ?></td>
<td><input type="button" value="Delete" class="btn btn-danger"/>
<td class="numeric"><a id= "<?php echo $desig['dkey']; ?>" onclick="edit_designation('<?php echo $desig['dkey']; ?>')" data-target="#myModal" data-toggle="modal" href="<?php echo base_url().'index.php/designation/edit_desig'; ?>"><button class="btn blue" type="button">Edit</button>
</tr>
<?php $i++;endforeach;?>
You need to pass your query result to your view
Controller
public function edit_desig(){
$this->load->model('designation_model');
$designation=$this->designation_model->edit_designation($id);// assing your query result to your variable
$data['designation'] = designation;// pas your variavle to data arrray
$this->load->view('view_name', $data);// load your view with array
}
As per your view code you need to fetch data in array form in your model
Models
public function edit_designation($id){
$query=$this->db->get_where('designation',array('desig_id'=>$id));
return $query->result_array();// change this to array
}