I am trying to create a modal pop up and include an AJAX call inside the modal body.
The script, included AJAX. works fine.
Here is the button which calls the modal (I am working with TWIG templates)
<button class="btn btn-danger" data-id="{{ product.id }}">Delete</button>
This is the jQuery script:
$(document).ready(function() {
$('[data-id]').each(function() {
var $this = $(this),
id = $this.data('id');
$this.on('click', function(event) {
event.preventDefault();
$.post('{{ path('dashboard_ajax ') }}', {
'id': id
},
function(details) {
var $modal = $(details);
$('#confirm-delete').remove();
$('body').append($modal);
$modal.modal();
}
);
})
});
});
And this is the page with the modal
<div class="modal fade" id="confirm-delete" 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" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger" role="alert">
<p>Do you really want to delete <b>{{ product.name }}?</b></p>
</div>
<img src="{{ asset('uploads/product_images/') }}{{ product.image }}" style="width: 240px;" class="img-responsive thumbnail" />
</div>
<div class="modal-footer">
<button type="button" id="misha" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-ok">Delete</a>
</div>
</div>
</div>
Now, If click on the delete button I would like remove the selected item using the related page (example: delete.php)
One way you can do is by attaching a click hander and setting the location like this
window.location.href = 'delete.php';
Or something like this
<a class="btn btn-danger btn-ok" href="delete.php">Delete</a>
If you have the product ID, that be sent to delete.php like this
<a class="btn btn-danger btn-ok" href="delete.php?ID={{ product.id }}">Delete</a>
Related
View:
<head>
<script>
var ABSOLUTE_PATH = '<?php echo base_url()?>';
</script>
</head>
//inside a table data
<button type="button" class="btn btn-danger btn-sm open-deleteModal" data-id="<?php echo $news['id']; ?>" data-toggle='modal' data-target="#deleteModal"><i class="fa fa-fw fa-trash-o"></i> Delete
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Record</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete this record?</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" id="delRowId">Delete</a>
</div>
</div>
</div>
</div>
javascript placed in a footer
$(document).on("click", ".open-deleteModal",function(){
var rowId = $(this).data('id');
$(".modal-body #delRowId").attr("href",ABSOLUTE_PATH+"admins/deletenews/"+rowId);
});
</script>
controller:admins.php
public function deletenews($rowid){
$this->load->view('templates/admin_header');
$this->load->view('admin_pages/view');
$this->load->view('templates/admin_footer');
}
the <a class="btn btn-primary" id="delRowId">Delete</a> should be the one calling the javascript but it does not call the controller. please help me someone....
This just changes the href to proper link
$(".modal-body #delRowId").attr("href",ABSOLUTE_PATH+"admins/deletenews/"+rowId);
Need to trigger click event after changing the href for propoer link. try something like this
$(".modal-body #delRowId").attr("href",ABSOLUTE_PATH+"admins/deletenews/"+rowId).click();
I have a trigger button for modal, passing the id and value.
In script section I need "inject" the form into modal-body.
My problem is pass the variables in the html function of the script. How do it?
html
<button value="{{ $etapaano->trabalho_id }}" id="{{ $etapaano->id }}" class="btn btn-primary btn-sm" title="Enviar Arquivo" data-toggle="modal" data-target="#myModalUploadArquivos"><i class="fa fa-upload"></i> Enviar</button>
<div id="myModalUploadArquivos" class="modal fade" 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" id="myModalLabel">Submeter Arquivo</h4>
</div>
<div id="modalBodyArquivo" class="modal-body">
</div>
</div>
</div>
</div>
script
$('#myModalUploadArquivos').on('show.bs.modal', function(e) {
var $modal = $(this);
var etapaanoid = e.relatedTarget.id;
var trabalhoid = e.relatedTarget.value;
$('#modalBodyArquivo').html('<form method="POST" enctype=multipart/form-data action="{{ url("arquivo/store/etapaanoid/trabalhoanoid") }}" file="true">{{ csrf_field() }}<label for="descricao">Arquivo *</label><input type="file" name="descricao" /></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button><button id="enviaArquivo" type="submit" class="btn btn-primary pull-right" title="Enviar Arquivo">Enviar</button></div></form>');
});
Try replacing this:
"{{ url("arquivo/store/etapaanoid/trabalhoanoid") }}"
With this:
"{{ url("arquivo/store") }}/'+etapaanoid+'/'+trabalhoanoid+'"
I have the following DELETE button that I am passing $userid through the data-id
<a href='#myModal' class='trash' data-id='".$userid."' role='button'data-toggle='modal'>
Delete</a>
I have the following modal
<div class="modal fade" id="myModal" 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" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete <b><i class="title"></i></b> record, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Delete
</div>
</div>
</div>
</div>
And the following JS which gets the value of the DELETE button
$('.trash').click(function(){
var id=$(this).data('id');
$('#modalDelete').attr('href','delete_user.php?id=' + id);
});
I am trying to set the value of the "href" in the modal so that it can be passed to a php page called delete_user.php which deletes the user from the database. Anyone see where I am going wrong? I cannot get the href to go to the delete_user.php
you have mistake here data-id='".$userid."' should be data-id='<?php echo $userid;>'
<a href='#myModal' class='trash' data-id='<?php echo $userid;>' role='button'data-toggle='modal'>
Delete</a>
and for better approach, get rid of click function, use modal event and let bootstrap handle the rest
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
alert(id);
$('#modalDelete').attr('href', 'delete_user.php?id=' + id);
});
});
Fiddle
I want to delete my data with modal confirmation.on remove click my modal show but when click confirm then data not delete.
I am trying but cant understand whats wrong with my code
my code
<script>
$(document).on("click", "#deleteBtn", function (e) {
e.preventDefault();
e.stopPropagation();
var link = $(this).attr('data-adid');
console.log($("#myModal btn-warning a"));
$("#myModal .btn-warning a").attr('href',link);
$(".modal").modal("show");
});
</script>
<div class="modal fade" id="myModal" 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">Remove Client Account</h4>
</div>
<div class="modal-body">
Body goes here...
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-warning" type="button"> <a href="" >Confirm</a></button>
</div>
</div>
</div>
</div>
<a class="btn btn-warning" id="deleteBtn" data-adid=?a=client&cdid='.$cd[$i][0].' data-toggle="modal" href="#myModal">Remove</a>
I too can't understand what's wrong with your code, but since you want to delete the data attribute, you can do the below.
$(this).removeAttr("data-adid");
when click in delete button the modal delete button link have a value from delete button.
my code
<script>
$(document).on("click", "#myModal", function (e) {
e.preventDefault();
var _self = $(this);
var myBookId = _self.data('adid');
$("adid").val(myBookId);
$(_self.attr('href')).modal('show');
});
</script>
delete button code
print'<td><button class="btn btn-danger" data-toggle="modal" id="myModal" data-target="#myModal" data-adid='.$cd[$i][0].'>Delete Item</a></button>
modal code
<div class="modal fade" id="myModal" 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" id="myModalLabel">Heads Up!
<p>What you are doing will delete a data!</p></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success"><a href="a=yes&adid=" >Delete</a></button>
</div>
</div>
</div>
</div>
when click in delete item button then show a modal and this modal delete link have a url like ?a=yes&adid=
after &adid have a value that come fro delete item data-adid.
but my code not work
First of all you have the same id(myModal) for delete-button as well as for modal.
Try below code
<button class="btn btn-danger" data-toggle="modal" id="deleteBtn" data-target="#myModal" data-adid='.$cd[$i][0].'>Delete Item</button>
<div class="modal hide" id="myModal" 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" id="myModalLabel">Heads Up!
<p>What you are doing will delete a data!</p></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success"><a href="" >adid=''</a></button>
</div>
</div>
</div>
</div>
script
$(document).on("click", "#deleteBtn", function (e) {
e.preventDefault();
e.stopPropagation();
var link = $(this).attr('data-adid');
$("#myModal .btn-success a").attr('href',link);
$(".modal").modal("show");
});
JSFIDDLE