modal and while loop - php

I have been scratching my head about this for days and i cant seem to understand why this isnt working,
i have a modal which pops up when selecting the accept button, this modal should populate the users name and telephone number.
the problem is that when you select the accept it only populate the first persons details and no the rest of the people in the table, i dont understand why if anyone can point out why i would be much obliged
here is my code (sorry its abit messy at the moment):
<?php
require_once ("includes/session_check.php");
require_once ("includes/db_connect.php");
//MySqli Select Query
$results = $mysqli->query("SELECT id, username, phone, requester,goodorbad,confirmed,denied FROM request WHERE goodorbad=1 AND confirmed=0 AND denied=0 Order by ID ASC");
echo '
<!-- **********************************************************************************************************************************************************
MAIN CONTENT
*********************************************************************************************************************************************************** -->
<!--main content start-->
<section id="main-content">
<section class="wrapper site-min-height">
<h3><i class="fa fa-angle-right"></i> Non Authenticated Requests</h3>
<div class="row mt">
<div class="col-lg-12">
<p>Non Authenticated Requests here.</p>';
echo '<div class="row mt">
<div class="col-md-12">
<div class="content-panel">
<table class="table table-striped table-advance table-hover">
<h4><i class="fa fa-angle-right"></i>Non Authenticated Requests</h4>
<hr> <thead>
<tr>
<th><i class="fa fa-bullhorn"></i>Username</th>
<th><i class="fa fa-phone"></i>Phone number update request</th>
<th><i class="fa fa-bookmark"></i>Requester</th>
<th><i class=" fa fa-edit"></i> Status</th>
<th><i class=" fa fa-edit"></i> Accept/Decline</th>
<th></th>
</tr>
</thead>';
while($row = $results->fetch_object()) {
//$row->id
//$row->confirmed
//$row->denied
$status = $row->confirmed;
echo '
<!-- Modal for Confirm -->
<form action="#" method="POST">
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" 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>
<input type="hidden" name="username_request" value="'.$row->username.'"/>
<input type="hidden" name="telephone_request" value="'.$row->phone.'"/>
<h4 class="modal-title">Are you sure ?</h4>
</div>
<div class="modal-body">
<br>
<p>You are about to update </p>
'.$row->username.'
<br>
<p> with the following telephone number </p>
'.$row->phone.'
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default"
type="button">Cancel</button>
<button data-dismiss="modal" class="btn btn-default"
type="button">Submit</button>
</div>
</div>
</div>
</div>
</form>
<!-- modal -->
<tbody>
<tr>
<td>'.$row->username.'</td>
<td>'.$row->phone.'</td>
<td>'.$row->requester.' </td>';
if($status == 1){
echo ' <td><span class="label label-success">Completed</span></td>
<td></td>
<td></td>
';
}else{
}
echo '<td><span class="label label-info label-mini">Pending</span></td>
<td>
Accept?
<a data-toggle="modal" href="#myModal"> <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
</a>
<td>
Decline?
<button class="btn btn-danger btn-xs"><i class="fa fa-minus-circle"></i></button>
</td>
</td>
</tr>
</tbody>
';
}
echo '
</table>
</div><!-- /content-panel -->
</div><!-- /col-md-12 -->
</div><!-- /row -->';
// close connection
$mysqli->close();
?>
<html>
</html>

You need to add unique id to every model.
Try
<?php
require_once ("includes/session_check.php");
require_once ("includes/db_connect.php");
//MySqli Select Query
$results = $mysqli->query("SELECT id, username, phone, requester,goodorbad,confirmed,denied FROM request WHERE goodorbad=1 AND confirmed=0 AND denied=0 Order by ID ASC");
echo '
<!-- **********************************************************************************************************************************************************
MAIN CONTENT
*********************************************************************************************************************************************************** -->
<!--main content start-->
<section id="main-content">
<section class="wrapper site-min-height">
<h3><i class="fa fa-angle-right"></i> Non Authenticated Requests</h3>
<div class="row mt">
<div class="col-lg-12">
<p>Non Authenticated Requests here.</p>';
echo '<div class="row mt">
<div class="col-md-12">
<div class="content-panel">
<table class="table table-striped table-advance table-hover">
<h4><i class="fa fa-angle-right"></i>Non Authenticated Requests</h4>
<hr> <thead>
<tr>
<th><i class="fa fa-bullhorn"></i>Username</th>
<th><i class="fa fa-phone"></i>Phone number update request</th>
<th><i class="fa fa-bookmark"></i>Requester</th>
<th><i class=" fa fa-edit"></i> Status</th>
<th><i class=" fa fa-edit"></i> Accept/Decline</th>
<th></th>
</tr>
</thead>';
$i = 1;
while($row = $results->fetch_object())
{
//$row->id
//$row->confirmed
//$row->denied
$status = $row->confirmed;
echo '
<!-- Modal for Confirm -->
<form action="#" method="POST">
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal'.$i.'" 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>
<input type="hidden" name="username_request" value="'.$row->username.'"/>
<input type="hidden" name="telephone_request" value="'.$row->phone.'"/>
<h4 class="modal-title">Are you sure ?</h4>
</div>
<div class="modal-body">
<br>
<p>You are about to update </p>
'.$row->username.'
<br>
<p> with the following telephone number </p>
'.$row->phone.'
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default"
type="button">Cancel</button>
<button data-dismiss="modal" class="btn btn-default"
type="button">Submit</button>
</div>
</div>
</div>
</div>
</form>
<!-- modal -->
<tbody>
<tr>
<td>'.$row->username.'</td>
<td>'.$row->phone.'</td>
<td>'.$row->requester.' </td>';
if($status == 1)
{
echo ' <td><span class="label label-success">Completed</span></td>
<td></td>
<td></td>
';
}
echo '<td><span class="label label-info label-mini">Pending</span></td>
<td>
Accept?
<a data-toggle="modal" href="#myModal'.$i.'"> <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
</a>
<td>
Decline?
<button class="btn btn-danger btn-xs"><i class="fa fa-minus-circle"></i></button>
</td>
</td>
</tr>
</tbody>
';
$i++;
}
echo '
</table>
</div><!-- /content-panel -->
</div><!-- /col-md-12 -->
</div><!-- /row -->';
// close connection
$mysqli->close();
?>
<html>
</html>

You will have to change 2 lines. The reason of error is you are calling the same id again and again. So you will have to change id dynamically with loop. You will have to change your 2 lines like these:
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal'.$i.'" class="modal fade">
and
<a data-toggle="modal" href="#myModal'.$i.'"> <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button></a>
Final code is:
<?php
require_once ("includes/session_check.php");
require_once ("includes/db_connect.php");
//MySqli Select Query
$results = $mysqli->query("SELECT id, username, phone, requester,goodorbad,confirmed,denied FROM request WHERE goodorbad=1 AND confirmed=0 AND denied=0 Order by ID ASC");
echo '
<!-- **********************************************************************************************************************************************************
MAIN CONTENT
*********************************************************************************************************************************************************** -->
<!--main content start-->
<section id="main-content">
<section class="wrapper site-min-height">
<h3><i class="fa fa-angle-right"></i> Non Authenticated Requests</h3>
<div class="row mt">
<div class="col-lg-12">
<p>Non Authenticated Requests here.</p>';
echo '<div class="row mt">
<div class="col-md-12">
<div class="content-panel">
<table class="table table-striped table-advance table-hover">
<h4><i class="fa fa-angle-right"></i>Non Authenticated Requests</h4>
<hr> <thead>
<tr>
<th><i class="fa fa-bullhorn"></i>Username</th>
<th><i class="fa fa-phone"></i>Phone number update request</th>
<th><i class="fa fa-bookmark"></i>Requester</th>
<th><i class=" fa fa-edit"></i> Status</th>
<th><i class=" fa fa-edit"></i> Accept/Decline</th>
<th></th>
</tr>
</thead>';
$i=0;
while($row = $results->fetch_object()) {
$i++;
//$row->id
//$row->confirmed
//$row->denied
$status = $row->confirmed;
echo '
<!-- Modal for Confirm -->
<form action="#" method="POST">
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal'.$i.'" 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>
<input type="hidden" name="username_request" value="'.$row->username.'"/>
<input type="hidden" name="telephone_request" value="'.$row->phone.'"/>
<h4 class="modal-title">Are you sure ?</h4>
</div>
<div class="modal-body">
<br>
<p>You are about to update </p>
'.$row->username.'
<br>
<p> with the following telephone number </p>
'.$row->phone.'
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default"
type="button">Cancel</button>
<button data-dismiss="modal" class="btn btn-default"
type="button">Submit</button>
</div>
</div>
</div>
</div>
</form>
<!-- modal -->
<tbody>
<tr>
<td>'.$row->username.'</td>
<td>'.$row->phone.'</td>
<td>'.$row->requester.' </td>';
if($status == 1){
echo ' <td><span class="label label-success">Completed</span></td>
<td></td>
<td></td>
';
}else{
}
echo '<td><span class="label label-info label-mini">Pending</span></td>
<td>
Accept?
<a data-toggle="modal" href="#myModal'.$i.'"> <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
</a>
<td>
Decline?
<button class="btn btn-danger btn-xs"><i class="fa fa-minus-circle"></i></button>
</td>
</td>
</tr>
</tbody>
';
}
echo '
</table>
</div><!-- /content-panel -->
</div><!-- /col-md-12 -->
</div><!-- /row -->';
// close connection
$mysqli->close();
?>
<html>
</html>

Related

Displaying data from database to modal CodeIgniter

I'm making an Computer Laboratory Monitoring System using CI framework.
I want to display the detail of the selected item in my list but i got an error says :
Message: Trying to get property 'invent_id' of non-object
Here's my code view code
<?php if(!empty($value)): ?>
<?php foreach($value as $post ): ?>
<tr>
<td data-field="id"><?php echo $post->invent_id;?></td>
<td data-field="id"><?php echo $post->name;?></td>
<td data-field="id"><?php echo $post->type;?></td>
<td data-field="id"><?php echo $post->stock;?></td>
<td>
<button name="view" data-toggle="modal" data-target="#exampleModal<?php echo $post->invent_id; ?>" class="btn btn-info view_data"> <span class="glyphicon glyphicon-eye-open">
</span></button>
<span class="glyphicon glyphicon-edit"></span>
<span class="glyphicon glyphicon-ban-circle"></span></td>
<?php $this->load->view('Modal/view_inventory_detail', $post); ?>
<?php endforeach; ?>
<?php else: ?>
<tr>
<td>No Records Found</td>
</tr>
<?php endif; ?>
</tr>
</tbody>
</table>
My controller
function inventory_list(){
$value['value'] = $this->Admin_Model->get_inventory();
$this->load->view('HeadtoFoot/header');
$this->load->view('Admin/inventory/list',$value);
$this->load->View('HeadtoFoot/footer');
}
And My Modal
<div class="modal fade" id="exampleModal<?php echo $post->invent_id; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Item Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Details Goes Here -->
</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>
</div>
</div>
The Trying to get property of non-object error in CI generally happens when running a query. I would guess the error is happening in the call to the model:
$this->Admin_Model->get_inventory()

Pass data to modal in the same page, Laravel

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>

Store text from modal input field in session

I'm storing data from mysql in SESSION and passing it to another page where I make zip with all data's and download it. So far everything work just perfect.
Now I'm trying to make when user click on download button before to make actual download to enter name for the zip archive in modal window and then download the archive. So far I've made the modal but now I can't figured it out how to pass the input field text into the session. All other data is passed correctly. Here is the source so far
if(! isset($_POST['showcart'])) exit;
echo '<a class="btn btn-danger btn-lg pull-right" style="margin: 10px;" data-toggle="modal" data-target="#myModalNorm">Download All Files</a>
<table class="table table-striped table-bordered table-condensed responsive" id="sort">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>';
foreach ($_SESSION['itemid'] as $i):
$sql = "SELECT * FROM uploads WHERE upload_id = :id";
$result = $pdo->prepare($sql);
$result->bindParam(":id", $i);
$result->execute();
$resArray = $result->fetchAll();
foreach ( $resArray as $row ):?>
<div class="row">
<div class="box-content">
<tbody>
<tr>
<td class="center"><?=$row["upload_id"]?></td>
<td class="center"><?=$row["upload_title"]?></td>
<td class="center"><?=$row["upload_description"]?></td>
</tr>
</tbody>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<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="myModalLabel">
Please enter the name for the archive
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1"></label>
<input type="text" class="form-control"
id="archiveName" placeholder="Please enter the name for the archive"/>
</div>
</form>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<a href="create_zip.php" class="btn btn-primary">
Download
</a>
</div>
</div>
</div>
</div>
<?php endforeach;?>
<?php endforeach; ?>
</table> </div>
On the create_zip.php I take all from $_SESSION['itemid'] but this <input type="text" class="form-control" id="archiveName" placeholder="Please enter the name for the archive"/>
How to take also this input?
You can achieve this quite easy actually. Firstly wrap your table around <form></form>
So it will happen something like this
if(! isset($_POST['showcart'])) exit;
echo '<form action="create_zip.php" method="post">
<a class="btn btn-danger btn-lg pull-right" style="margin: 10px;" data-toggle="modal" data-target="#myModalNorm">Download All Files</a>
<table class="table table-striped table-bordered table-condensed responsive" id="sort">
<thead>
....
<!-- Modal Body -->
<div class="modal-body">
<div class="form-group">
<label for="archiveName"></label>
<input type="text" class="form-control"
id="archiveName" name="archiveName" placeholder="Please enter the name for the archive"/>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
<input type="submit" name="submit" value="Download" class="btn btn-primary">
</div>
</div>
</div>
</div>
<?php endforeach;?>
<?php endforeach; ?>
</table> </div></form>
Then in create_zip.php just check if isset submit button and assign variable.
if(isset($_POST['submit']))
{
//your code
$archiveName = $_POST['archiveName'];
// other source
} else { echo 'no archive'; }

Return as same value from database into bootstrap modal

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

Charging information within the modal (bootstrap 3.3.6)?

I have a modal and after clicking on the Visualizar option I want it to load information from a table.
However, it only loads the first table ID, regardless of which item of the table I want to view. It always shows the same information.
Below is the code I'm using.
<div class="container-fluid">
<table class="table table-striped" data-toggle="table"
data-search="true"
data-show-refresh="true"
data-show-columns="true">
<thead>
<tr>
<th class="th-small" data-align="left" data-sortable="true">ID</th>
<th data-align="left" data-sortable="true">Nome</th>
<th class="th-small">Ações</th>
</tr>
</thead>
<tbody>
<?php
foreach ($idade as $key => $v) {
?>
<tr>
<td><?= $v->id ?></td>
<td><?= $v->titulo ?></td>
<td>
<form data-toggle="validator" method="POST" enctype="multipart/form-data">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="submit" data-toggle="dropdown">... <span class="caret"></span></button>
<ul class="table-modal dropdown-menu">
<li class=""><a data-toggle="modal" data-target="#modal-select">Visualizar</a></li>
<li><a data-toggle="modal" data-target="#editarIdade">Editar</a></li>
</ul>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<!-- Modal VISUALIZAR -->
<div class="modal fade" id="modal-select" 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="cadastroIdadelLabel">Visualizar - Idade</h4>
</div>
<div class="modal-body">
<form class="form-inline" role="form" data-toggle="validator" action="Idade/page/visualizar">
<fieldset>
<div class="form-group">
<div>
<label>Idade:</label>
<?= $v->titulo ?>
</div>
<div>
<label>Código:</label>
<?= $v->id ?>
</div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Voltar</button>
</div>
</form>
</div>
</div>
</div>
Could anyone help me find the issue?
First, you have open <form> tag inside foreach code (Sidenote: He doesn't need a form here)
<?php foreach ($idade as $key => $v) {?>
<tr>
<td><?= $v->id ?></td>
<td><?= $v->titulo ?></td>
<td>
<form data-toggle="validator" method="POST" enctype="multipart/form-data">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="submit" data-toggle="dropdown">... <span class="caret"></span></button>
<ul class="table-modal dropdown-menu">
<li class=""><a data-toggle="modal" data-target="#modal-select">Visualizar</a></li>
<li><a data-toggle="modal" data-target="#editarIdade">Editar</a></li>
</ul>
</div>
</form>
</td>
</tr>
<?php } ?>
Second you have to put <form> tag before modal-body inside Modal (sidenote: <?= $v->titulo ?> and <?= $v->id ?> will not show any value outside foreach
<div class="modal fade" id="modal-select" 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="cadastroIdadelLabel">Visualizar - Idade</h4>
</div>
<form class="form-inline" role="form" data-toggle="validator" action="Idade/page/visualizar">
<div class="modal-body">
<fieldset>
<div class="form-group">
<div>
<label>Idade:</label>
<?= $v->titulo ?>
</div>
<div>
<label>Código:</label>
<?= $v->id ?>
</div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Voltar</button>
</div>
</form>
</div>
</div>
</div>
Third you have to add the id <?= $v->id ?> as data attribute data-id="<?= $v->id ?>" to modal trigger button and with BS Modal event, pass it to modal when modal shown
<li class=""><a data-id="<?= $v->id ?>" data-toggle="modal" data-target="#modal-select">Visualizar</a></li>
Modal show event.
$(document).ready(function(){
$('#modal-select').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
alert(id);
//pass `id` to input, HTML selector do what ever you like with it
});
});
Fourth, To fetch data against id from database and show in modal, have a look at this answer.
You can ask if needs more explanation or help with any step.

Categories