I have a popup box which needs listing of some data in table. outside there is another table. This popup do not display table . popup do not work if table is there.
`<form method="post" action="">
<?php echo $message; ?>
<table>
<tr>
</tr>``
View standard Packages
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<table>
<thead></thead>
<tbody class="table">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!--Model ends-->
</table>
</form>
It's working perfectly for me please check with this code.
Otherwise, you have a javascript error please check-in console first.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<table>
<thead>
</thead>
<tbody class="table">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Add th tags in your thead tag.
Use the following
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
And then in your tbody add tr tags like here
<tr>
Your td should be here
</tr>
Related
I just want to create a update form by using modal but when i click the button update nothing happen no popup appear or did with a wrong ways? I already change the position of the end curly braces but still not working. Any ideas?
when i use the modal for add item it working nicely, can someone explain to me what i'm doing wrong whih modal
here is what I working on:
<div class="card-block table-border-style">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
<th>QR Code</th>
<th>Update</th>
</tr>
</thead>
<?
include("../config_db/config_db_e.php");
$quer1="SELECT * FROM info_kedai";
$quer2=mysqli_query($db_conn_e,$quer1);
while ($row= mysqli_fetch_array($quer2)){
$id=$row["id_ke"];
$name=$row["name_ke"];
$status=$row["status_ke"];
echo "<tbody>
<tr>
<th>$id</th>
<td>$name</td>
<td>$status</td>
<td><a href='qr_gen.php?id=$id'>Ganerate</a></td>
<td> <button type='button' class='btn btn-primary btn-outline-primary' data-toggle='modal' data-target='#myModal2$id'>Edit</button></td>
</tr>";
}?>
</tbody>
</table>
</div>
</div>
</div>
<!-- Hover table card end -->
</div>
<!-- Page-body end -->
</div>
</div>
<!-- Main-body end -->
<div id="styleSelector">
</div>
</div>
</div>
</div>
<!-- Modal update -->
<div class="modal fade" id="myModal2<?php echo $id ?>" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form action="process/class_shop.php" method="GET">
<?
$get=$row["id_kedai"];
$que1="SELECT * FROM info_kedai where id_kedai='$get'";
$que2=mysqli_query($db_conn_e,$que1);
while ($row= mysqli_fetch_array($que2)){
$id=$row["id_k"];
$name=$row["nama_k"];
$status=$row["status_k"];
?>
<label>Nama :</label><br>
<input type="text" name="nama_k" id="nama_k" class="form-control" value="<? echo $name ?>"><br>
<label>Status :</label><br>
<select id="status_k" name="status_k" class="form-control" value="<? echo $status?>">
<option value="1">Aktif</option>
<option value="2">Not Aktif</option>
`enter code here`
</select>
<br><br>
<input type="submit" value="Submit" name="update_k" id="update_k" class="btn btn-primary btn-outline-primary">
<?}?>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Thanks.
I'm using entrust package for roles management , i have impleted that in my project based on the steps which mentioned in github , it's working fine but for assigning roles to user page we are getting values from two queries which i mentioned below , if the user list goes upto 100 how can i get user details easily , i want datatables for this view can anyone please help me to view as datatables format and i already configured yajra datatables for my project , it is working for other pages, we are using https://github.com/Zizaco/entrust
Controller.php
public function index()
{
$company_id=Auth::user()->company_id;
$users=User::where('company_id',$company_id)->get();
$allRoles=Role::where('company_id',$company_id)->get();
return view('usersroles.index',compact(['users','allRoles']));
}
view.blade.php
<table class="table table-bordered" >
<tr class="thead-cls">
<th class="center">Name</th>
<th class="center">Employee Id</th>
<th class="center">Roles</th>
<th class="center">Action</th>
</tr>
#forelse($users as $user)
<tr>
<td class="center">{{$user->name}}</td>
<td class="center">{{$user->emp_id}}</td>
<td class="center">
#foreach( $user->roles as $role)
{{$role->name}},
#endforeach
</td>
<td class="center">
#permission('users-roles-edit')
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-add" data-toggle="modal" data-target="#myModal-{{$user->id}}">
Edit
</button>
#endrole
<!-- Modal -->
<div class="modal fade" id="myModal-{{$user->id}}" 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"> Editing<b> {{$user->name}}'s</b> Role</h4>
</div>
<div class="modal-body">
<form action="{{route('usersroles.update',$user->id)}}" method="post" role="form" id="role-form-{{$user->id}}">
{{csrf_field()}}
{{method_field('PATCH')}}
<div class="form-group">
<select name="roles[]" multiple required="">
#foreach($allRoles as $role)
<option value="{{$role->id}}">{{$role->name}}</option>
#endforeach
</select>
</div>
{{--<button type="submit" class="btn btn-primary">Submit</button>--}}
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-add" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary btn-add" onclick="$('#role-form-{{$user->id}}').submit()">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
#empty
<td>No users</td>
#endforelse
</table>
[![Need Datatables for this view][1]][1]
Just add this piece of code in your view with jQuery:
$(document).ready(function(){
$('#myTable').DataTable();
});
#myTable is the id of your table. For more info, read the documentation.
So i have this index page which has the list of task and inside the table is the title of task and the actions, what i'm trying to do is when i click the task title the modal will pop whereas in the modal is its body and content of the said task.. here is the code
controller
public function index()
{
$posts = Post::orderBy('created_at', 'desc')->paginate(10);
return view('posts.index')->with('posts', $posts);
}
index page
#extends('layout.app')
#section('content')
<div class="container">
<div class="col-md-6" style="float:left;">
<h2>Todo List</h2>
<div class="table-hover">
<table class="table">
<thead class="thead-default">
<tr>
<th>Title</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#if(count($todos) > 0)
#foreach($todos as $todo)
<tr>
<th>{{$todo->title}}</th>
<td>{{$todo->status}}</td>
<td><a class="btn btn-sample btn-sm">Edit</a> <a class="btn btn-sample2 btn-sm">Delete<a></td>
</tr>
</tbody>
#endforeach
#else
<th><h2>Nothing to show</h2></th>
#endif
</table>
</div>
</div>
the modal below the same page
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModal3Label">View task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>{{$todo->title}}</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
There are two methods to achieve this, either you repeat your modal with unique id with tr or records, or you create one modal, and onClick bring data from ajax or javascript, and fill it within modal.
I'm explaining you the first and easiest one
#extends('layout.app')
#section('content')
<div class="container">
<div class="col-md-6" style="float:left;">
<h2>Todo List</h2>
<div class="table-hover">
<table class="table">
<thead class="thead-default">
<tr>
<th>Title</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#if(count($todos) > 0)
#foreach($todos as $todo)
<tr>
<th>{{$todo->title}}
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModal3Label{{ $loop->iteration }}">View task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>{{$todo->title}}</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</th>
<td>{{$todo->status}}</td>
<td><a class="btn btn-sample btn-sm">Edit</a> <a class="btn btn-sample2 btn-sm">Delete<a></td>
</tr>
</tbody>
#endforeach
#else
<th><h2>Nothing to show</h2></th>
#endif
</table>
</div>
</div>
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 need a help here.
I have an application - it queries some data from MySQL and present it in table (index.php file). Every row is a single customer record.
What I want to do is, when I click on the row, it opens customer record (customer.php file).
I tried the following code - when I click on the row, modal with remote page(customer.php only flashes, and then customer.php is loaded normally. I dont know why... does any body have an idea?
<table class="table table-hover container table-responsive">
<caption>Vyhledaní zákazníci</caption>
<thead>
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Email</th>
<th>Telefon</th>
<th>Adresa</th>
<th>Město</th>
<th>Akce</th>
</tr>
</thead>
<tbody>
<?php
while ($results = mysql_fetch_array($customers)) { ?>
<tr class="clickableRow active" href="customer.php?customerId=<?php echo $results['id'], '&search=', Input::get('search'); ?>" data-toggle="modal" data-target="#customerModal">
<td><?php echo $results['first_name']; ?> </td>
<td><?php echo $results['last_name']; ?> </td>
<td><?php echo $results['email']; ?> </td>
<td><?php echo $results['telephone']; ?> </td>
<td><?php echo $results['street']; ?> </td>
<td><?php echo $results['city']; ?> </td>
<td>Seznam zakázek
Nová zakázka
</tr>
<?php
} ?>
</tbody>
</table>
And modal:
<!-- Modal -->
<div class="modal fade" id="customerModal" 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" aria-hidden="true">×</button>
<h4 class="modal-title">Karta zákazníka</h4>
</div>
<div class="modal-body"><div class="te"></div></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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->