i have paginator that display top "n" tasks with bottuns to change or delete a task:
<?php
foreach($tasks as $task) {
?>
<li>
<div class="task-title">
<span class="task-title-sp"><?php echo $task['Task']['task']; ?></span>
<span class="badge badge-active"><?php echo $task['Task']['nicedate'] ?></span>
<div class="pull-right hidden-phone">
<button class="btn add-btn btn-xs" data-toggle="modal" data-target="#write">
<i class="fa fa-pencil"></i>
</button>
<button class="btn dismiss-btn btn-xs">
<i class="fa fa-trash-o "></i>
</button>
</div>
</div>
</li>
<?php } ?>
and on the button click it opens the modal that have text change and update bottun:
<div class="modal" id="write" tabindex="-1" role="dialog" aria-labellbyid="writeLabel">
<div class="modal-dialog" role="document">
<form id="update-form" action="/tasks/edit?id=xx" method="post">
<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" aria-labellbyid="writeLabel">Unesi promjene</h4>
</div>
<div class="modal-body">
<textarea class="form-control" rows="5"></textarea>
</div>
<div class="modal-footer" id="edit-footer">
<input type="submit" class="btn see-btn" value="Ažuriraj">
</div>
</div>
</form>
</div>
</div>
so i need to get php variable $task['Task']['id'] from the paginator (inside foreach loop) and send it to modal and echo it in place of "xx" in form action.
Related
I'm having difficulties with the modal using Bootstrap 5, my Delete button should show a message confirming the action by the user, but the Modal confirmation button doesn't work.
The action I want of which is to delete a record doesn't work.
Delete button
<!-- Form -->
<form action="{{ url("delete/$hxh->id") }}" method="POST">
{{ method_field('DELETE') }} {{ csrf_field() }}
<button type="button" id="myButton" class="btn btn-danger" data-toggle="modal" data-target="#myModal"><i class="fa fa-trash"></i> Delete</button>
</form>
Modal and Script
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Delete Hunter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you really want delete <b>{{$hxh->name_hunter}}</b>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-xmark"></i> Cancel</button>
<button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>
<!-- Script Modal -->
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myButton').trigger('focus')
})
</script>
It is because there is no action performing on delete button so you should make it form the delete button
<!-- Form -->
<button type="button" id="myButton" class="btn btn-danger" data-toggle="modal" data-target="#myModal"><i class="fa fa-trash"></i> Delete</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Delete Hunter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you really want delete <b>{{$hxh->name_hunter}}</b>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-xmark"></i> Cancel</button>
<form action="{{ url("delete/$hxh->id") }}" method="POST">
{{ method_field('DELETE') }} {{ csrf_field() }}
<button type="submit" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-trash"></i> Delete</button>
</form>
<button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>
I want to edit/ update data that show in my page. The edit/ update data should done in modal. Below is code that I tried and it didn't work.
I tried lots of methods to done this. But not succeeded. IF anyone can help on this it would be very grateful. Thank you.
<?php
$query1=mysqli_query($dbconn, "SELECT * FROM food_menu WHERE status='1' AND category='Breakfast'" );
?>
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="card-deck">
<div class="card border-dark">
<div class="card-body">
<h3 class="card-title"><b>Breakfast Menu</b></h3>
<?php
while ($row1=mysqli_fetch_array($query1)){
$id=$row1['id'];
$name=$row1['name'];
$details=$row1['details'];
$category=$row1['category'];
$price=$row1['price'];
$image=$row1['image'];
?>
<div class="row">
<div class="col">
<div class="zoom">
<img src="<?php echo $image; ?>" class="rounded float-left img-thumbnail" alt="Food Image">
</div>
</div>
<div class="col">
<div hidden><?php echo $id; ?></div>
<h5><?php echo $name; ?></h5>
<h7><?php echo $details; ?></h7><br>
<h7><b>Rs. <?php echo $price; ?></b></h7><br>
<div class="text-right"><button type="button" class="btn btn-primary btn-sm editbtn" name="edit" id="edit" data-id="<?php echo $id; ?>" data-toggle="modal"><span class="icon text-white-100">
<i class="fas fa-pencil-alt"></i>
</span>UPDATE</button>
</div>
</div>
</div>
<br>
<?php } ?>
<button type="button" class="btn btn-success" name="add" id="add">Add New</button>
</div>
</div>
</div>
</div>
<!-- End of Page Content -->
My Modal is below
<div class="modal fade" id="editmodal" name="editmodal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">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">
<form method="post">
<input type="text" name="fid" name="fid" >
<input type="text" name="food_name" id="food_name">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
JavaScript Used.
<script>
$(document).ready(function(){
$('.editbtn').on('click', function(){
$('#editmodal').modal('show');
var ids = $(this).attr('data-id');
$(".modal-body #fid").val( ids );
$(".modal-body #food_name").val( ids );
});
});
</script>
When I click update button the modal is shown but data is not showing the modal.
I am trying to load dataTables using ajax. I am currently using laravel framework. My code is like:
if($posts){
foreach($posts as $r){
$nestedData['name'] = $r->name;
$nestedData['email'] = $r->email;
$nestedData['created_at'] = date('d-m-Y H:i:s',strtotime($r->created_at));
$nestedData['action'] = '
<i class="fa fa-pencil" aria-hidden="true"></i>
<form method="POST" action="'.url('/admin/user').'/'.$r->id.'" accept-charset="UTF-8" id="frm_'.$r->id.'" class="form form-delete-btn">
<input name="_method" type="hidden" value="DELETE">
<input name="_token" type="hidden" value="'.csrf_token().'">
<button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#confirm-delete'.$r->id.'"><i class="fa fa-trash" aria-hidden="true"></i></button>
</form>
<div class="modal fade confirm-delete" id="confirm-delete'.$r->id.'" 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"><strong>Confirm Delete</strong></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>You are about to delete one client <strong>"'.$r->name.'"</strong>, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<a onclick="submit_form("frm_'.$r->id.'")" class="btn btn-primary btn-ok">Delete</a>
</div>
</div>
</div>
</div>
';
$data[] = $nestedData;
}
}
But, I am getting error on line
<a onclick="submit_form("frm_'.$r->id.'")" class="btn btn-primary btn-ok">Delete</a>
It is saying that :
Uncaught SyntaxError: Unexpected end of input
It is pointing error just after submit_form(.
Any suggestion will be appreciated as I am quite new to both programming and stackoverflow.
<a onclick="submit_form("frm_'.$r->id.'")" class="btn btn-primary btn-ok">Delete</a>
when interpreted by the PHP server will produce:
<a onclick="submit_form("frm_<ID>")" class="btn btn-primary btn-ok">Delete</a>
which has nested quotes causing the Unexpected end of input.
A possible fix would be:
<a onclick="submit_form(\'frm_'.$r->id.'\')" class="btn btn-primary btn-ok">Delete</a>
which would become:
<a onclick="submit_form('frm_<ID>')" class="btn btn-primary btn-ok">Delete</a>
I have a Bootstrap Modal which contains a Submit Button.Apart from this Modal I have another one also which contains Form and other elements like Lables, Text boxes and a Submit button.Now I have a requirement where in a click Submit button of first Modal , it should submit the Form of the Second Modal..Below I am posting my First and Second Modal HTML Prototype ..
<div class="modal alert" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="DeleteModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title" id="DeleteModalLabel">Confirm Delete</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-sm-6 control-label">Are You Sure To Delete !!!</label>
</div>
</div>
<div class="modal-footer">
<div class="pull-right">
<button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-trash"></i> Delete</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Cancel</button>
</div>
</div>
</div>
</div>
and Here is the Second One..
<div class="modal fade" id="StudentModal" tabindex="-1" role="dialog" aria-labelledby="StudentModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<form action="~/GetStudent" class="form-horizontal" role="form" method="post" id="frmStudent">
<div class="modal-footer">
<div class="pull-right">
<button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
</div>
</div>
</form>
</div>
</div>
Please suggest me How can this is possible.Thanks..
Adding a class to delete button
<button type="submit" class="btn btn-success delete"><i class="glyphicon glyphicon-trash"></i> Delete</button>
Write a click event.
$('.delete').on('click',function(){
$('#DeleteModal').modal('hide');
$("#frmStudent").submit();
});
Note : This is just a basic example. Now if you want to use ajax to submit the form then there are way different steps to achieve it.
i have a table of articles for each item when i click delete button a popup of confirmation appear the problem is how to pass the Id of article so that when the user click on confirmation button the record will be deleted
here is the code of the table
<div class="tab-pane" id="article">
<table id="mytable" class="table table-bordred table-striped">
<c:forEach items="${articles}" var="o">
<tr>
<td>${o.id}</td>
<td>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-thumbnail" width="100" src="http://cfisinergia.epfl.ch/files/content/sites/cfi-sinergia/files/WORKSHOPS/Workshop1.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">${o.titre}</h4>
${o.description}
</div>
</div>
</td>
<td>
<div class="pull-right">
<i class="glyphicon glyphicon-time"></i>${o.date}
</div>
</td>
<td>
<p>
<button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" data-placement="top" rel="tooltip">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</p>
</td>
<td>
<button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" data-placement="top" rel="tooltip">
<span class="glyphicon glyphicon-trash"></span>
</td>
</tr>
</c:forEach>
</table>
and the code of the popup
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" 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 custom_align" id="Heading">Delete this
entry</h4>
</div>
<div>le numero de l'article</div>
<div class="modal-body">
<div class="alert alert-warning">
<span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
this is the solution for my question
table code:
<div class="tab-pane" id="article">
<table id="mytable" class="table table-bordred table-striped">
<c:forEach items="${articles}" var="o">
<tr>
<td>${o.id}</td>
<td><div class="media">
<a class="pull-left" href="#"> <img
class="media-object img-thumbnail" width="100"
src="http://cfi-sinergia.epfl.ch/files/content/sites/cfi-sinergia/files/WORKSHOPS/Workshop1.jpg"
alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">${o.titre}</h4>
${o.description}
</div>
</div></td>
<td><div class="pull-right">
<i class="glyphicon glyphicon-time"></i>${o.date}
</div></td>
<td><p>
<button class="btn btn-primary btn-xs" data-title="Edit"
data-toggle="modal" data-target="#edit" data-placement="top"
rel="tooltip">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</p></td>
<td>
<button class="open-deleteDialog btn btn-danger btn-xs"
data-title="Delete" data-toggle="modal"
data-target="#delete-article" data-placement="top"
data-id="ISBN564541" rel="tooltip">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</c:forEach>
</table>
<button class="btn btn-primary btn-xs" data-toggle="modal"
data-target="#ajoutart" data-placement="top" rel="tooltip">
<span>Ajouter Article</span>
</button>
</div>
</div>
</div>
</div>
code of modal class :
<div class="modal fade" id="delete-article" tabindex="-1" role="dialog"
aria-labelledby="edit" 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 custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="id" id="id" value="" />
</div>
<div class="modal-body">
<div class="alert alert-warning">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
and the javascript function:
<script type="text/javascript">
$(document).on("click", ".open-deleteDialog", function() {
var ida = $(this).data('id');
$(".modal-body #id").val(ida);
// As pointed out in comments,
// it is superfluous to have to manually call the modal.
$('#delete').modal('show');
});
this link http://jsfiddle.net/Au9tc/605/ was very useful