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");
Related
<div class="modal" tabindex="-1" role="dialog" id="myModal" data-backdrop="static" data-
keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"id="myModalTitle">Alias Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="myModalContent">
<p>Do you want your First Name as Alias Name</p>
</div>
<div class="modal-footer">
<button id="myModalButtonYes" type="button" class="btn btn-primary" data-
dismiss="modal">Yes</button>
<button id="myModalButtonNo" type="button" class="btn btn-secondary" data-
dismiss="modal" >No</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function ()
{
$('#myModalTitle').text('Duplicate Patient');
$('#myModalContent').text('A patient already exists with the same name and
birthdate. Do you want to continue?');
const btn = document.getElementById("myModalButtonNo")
btn.addEventListener("click", DuplicateName())
$('#myModal').modal('toggle');
});
I wanted to call different functions when modal Ok button is clciked in different scenarios.
btn.addEventListener("click", DuplicateName()) didnot work and also document.getElementById("myModalButtonNo").onclick = DuplicateName() didnot work.
Please give me your suggestions on this.
you change the modal text but the button is static try to call the function in the HTML button element.
<button id="myModalButtonYes" onclick="DuplicateName()" type="button"
class="btn btn-primary" data-
dismiss="modal">Yes</button>
I have a basic Bootstrap Modal on my page with a text input field, which I will want to trigger upon clicking the "Report A Bug" button shown above.
<div class="btn-group" id="exampleModal" role="group">
<button id="myBtnToReportABug" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal"> Report A Problem </button>
</div>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Please Provide A Short Description Of The Issue</h5>
<div class="input-group">
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
However I'm not sure of the best way to trigger it in Javascript. As you can see project already has a call to a modal, but its not a modal that is created in the HTML as I have with this 'Report A Bug' one.
$("#myBtnToReportABug").click(() => openModalPopup(cCenterUrl));
EDIT
Tried the Data Target method as mentioned below due to it's simplicity, but my Modal is not hidden nor does the click of the button trigger the modal to appear, any ideas?
<div class="btn-group" role="group">
<button id="myBtnToCcenter" type="button" target= '_blank' class="btn btn-primary"> Open CCenter </button>
<button id="myBtnToReportABug" type="button" target= '_blank' class="btn btn-secondary" data-toggle="modal" data-target=".modal-report"> Report A Problem </button>
</div>
<div class="modal-report" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Report A Bug</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You trigger the modal with: data-target="#exampleModal"
Then you also need the right modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Programmatically you have to do this
$('#exampleModalLabel').modal('show');
You previously need to initialize it with show: false so it won't show until you manually do it.
$('#exampleModalLabel').modal({ show: false})
Where exampleModalLabel is the id of the modal container.
when you click "MAGIC" then a bootstrap popover is shown and there you see the settings icon. If you click that icon a modal window should open, like if you click on the blue button "Launch demo modal". How can I fix that? What is the problem?
Here my code: https://jsfiddle.net/vhsqf65z/
<span data-html='true' data-toggle='popover'
title='<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"><i class="glyphicon glyphicon-cog"></i></button>'
data-content='<b>content</b>'> MAGIC </span>
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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">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">
...
</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>
Thanks
Edit:
Added an image showing the popover and settings button.
enter image description here
I modified your code, removed handling inserted.bs.popover event:
https://jsfiddle.net/05nzfcak/
I tested it works (if I understood correctly what you want)
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
My aim is to get the page to reload when a Bootstrap modal is closed. The user can close the modal by clicking on the close button or icon or by clicking away from the modal.
My code so far is pretty standard. Taken from:
http://getbootstrap.com/javascript/#modals
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch
</button>
<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">My title</h4>
</div>
<div class="modal-body">
My content
</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>
How can I get the page to reload after a modal is closed?
Update: Wow, fantastic fast response from everybody. Thank you
You can bind the event to reload page on click of close:
$('#myModal').on('hidden.bs.modal', function () {
location.reload();
})
Demo
try this with your button:
onclick="javascript:window.location.reload()"
full button:
<button type="button" onclick="javascript:window.location.reload()" class="close" data-dismiss="modal" aria-hidden="true">×</button>
example: http://jsfiddle.net/Valtos/52VtD/2288/embedded/result/
$('#myModal').on('hidden', function () {
document.location.reload();
})
Demo