I've this html code
<button class="btn btn-warning slider__button--primary" type="button" data-toggle="modal" data-target="#myModal" data-name="product name">more...</button>
When I click on this button, I want to open a bootstrap 4 modal, and pass this Name to 'h3' tag in the modal.
<div class="modal-body">
<div class="row">
<h3></h3>
</div>
<button type="button" id="subscribe" class="btn btn-warning mx-3 my-sm-2 ml-sm-0 ml-md-0 px-md-3" value="products/details">subscribe now</button>
</div>
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var name = button.data('name')
var modal = $(this)
modal.find('.modal-body h3').val(name)
})
How can I pass data to h3 element??
Related
here is my link and the sample data value i want to pass "data-id"
<i class="fas fa-edit fa-lg fa-fw"></i>
javascript code to load the modal and assign the data value to the modal
<script>
$("#openModal").click(function(){
$(".modal-body").text($(this).data("id"));
$("#edit_task").modal("open");
});
</script>
my modal
<div class="modal fade" id="edit_task">
<div class="modal-dialog">
<div class="modal-content">
<form action="" method="post" enctype="multipart/form-data">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">add new user</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
modal body i would like to display the modal variable here
<!-- Modal body -->
<div class="modal-body">
</div>
modal footer
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<?php
echo "<button type='submit' class='btn btn-primary' name='edit' onclick='return mess()'; >";echo "save"; echo "</button>";
?>
</div>
function to confirm when a value is saved
<script type="text/javascript">
function mess(){
alert ("the new user is successfully saved");
return true;
}
</script>
end of the modal
</form>
</div>
</div>
</div>
I have created a working fiddle of what you are looking for.
I changed your Wah button, replacing the href attribute with a data-target attribute:
<a class="btn btn-primary" data-toggle="modal" data-target="#edit_task" data-id="Wah">Wah</a>
Note: If you want the button to look like a link then replace the btn-primary class I used in the example with btn-link
Instead of using a click event on a button, use bootstraps show.bs.modal event. The $(event.relatedTarget) syntax is how you can get the button object for the button that was clicked to open the modal.
$(document).ready(function(){
$('#edit_task').on('show.bs.modal', function (event) {
$('#edit_task').find('.modal-body').text($(event.relatedTarget).data('id'));
})
});
I have a modal that has a 'Yes' and 'No' button. When the 'Yes' button is clicked, the modal closes and an onclick event occurs. After all this happens, i would like to display a confirmation alert. However non of the methods i have tried so far have worked for me.
Below is my code which includes the modal and alert:
#Model.CategoryList.result
#if (Model.CategoryList.result == "")
{
int count = 0;
foreach (String dataLine in Model.CategoryList.userData)
{
string countString = count.ToString();
string target = "dataLine" + countString;
string trigger = "#" + target;
string deleteHolder = dataLine.Split(Model.CategoryList.delimiterChar)[0];
<p>
<a data-toggle="collapse" href="#trigger" role="button" aria-expanded="false" aria-controls="collapseExample">
#dataLine.Split(Model.CategoryList.delimiterChar)[0]
</a>
<button class="btn" onclick="location.href = '#Url.Action("Items", "Items")'; test(this.id)" id="#dataLine.Split(Model.CategoryList.delimiterChar)[1]"><i class="fas fa-plus secondaryPlusIcon" id="#dataLine.Split(Model.CategoryList.delimiterChar)[1]"></i></button>
<button class="btn" onclick="location.href = '#Url.Action("EditCategory", "EditCategory", new { id = dataLine.Split(Model.CategoryList.delimiterChar)[1], name = dataLine.Split(Model.CategoryList.delimiterChar)[0] })'; passCategoryPlaceHolder(this.id)" id="#dataLine.Split(Model.CategoryList.delimiterChar)[1]"><i class="far fa-edit secondaryEditIcon" id="#dataLine.Split(Model.CategoryList.delimiterChar)[1]"></i></button>
<button class="btn" data-toggle="modal" data-target="#deleteHolder_#dataLine.Split(Model.CategoryList.delimiterChar)[1]" id="#dataLine.Split(Model.CategoryList.delimiterChar)[1]"><i class="far fa-trash-alt secondaryDeleteIcon" id="#dataLine.Split(Model.CategoryList.delimiterChar)[1]"></i></button>
</p>
<div class="modal" id="deleteHolder_#dataLine.Split(Model.CategoryList.delimiterChar)[1]" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Are you sure you want to remove <b>#dataLine.Split(Model.CategoryList.delimiterChar)[0]</b> and all of its items?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="displayAlertDelete" data-toggle="alert" data-target="#deleteAlert" onclick="location.href = '#Url.Action("DeleteCategoryLine", "Index", new { id = dataLine.Split(Model.CategoryList.delimiterChar)[1] })'">Yes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<div class="alert alert-success" id="deleteAlert" role="alert">
This is a success alert with an example link. Give it a click if you like.
</div>
count++
}
}
I have tried using jQuery as follows:
$("#deleteAlert").hide();
$("#displayAlertDelete").on("click", function () {
$("#deleteAlert").show();
})
However this produces an undesirable result, the modal will flash and disappear after the onclick event. So i was hoping there would be a different way of doing this.
You need to:
use the proper Bootstrap method for hiding a modal,
wait for the modal to be hidden before showing alert.
// hide modal upon button click
$("#displayAlertDelete").on("click", function () {
$("#your_modal_id").modal('hide');
})
// show alert after modal is hidden
$('#your_modal_id').on('hidden.bs.modal', function (e) {
// show your alert
}
References:
Bootstrap .modal('hide')
Bootstrap Modal Events
echo "<button type='button' class='btn btn-danger btn-xs glyphicon glyphicon-remove-circle'></button>";
The button above loads delete.php
When the user clicks on the button i want to display a yes/no window. If the user clicks yes, it needs to load the delete.php(with id info). When click no it needs to load an other php file.
what is a good way to do this? i have tried using JavaScript but can't get it to work.
1st no need to add a button inside a link, just style the link:
echo "<a href=\"delete.php?id=$result[exportid]\" class='btn btn-danger btn-xs glyphicon glyphicon-remove-circle delete-button'></a>";
Then attach to the buttons click event in javascript (jquery) and show a confirmation:
$(function(){
$('a.delete-button').click(ev){
ev.preventDefault();
var deleteUrl = $(this).attr('href');
var otherUrl = 'some other url';
if(confirm('Are you sure you want to delete this item')){
window.location = deleteUrl;
}else{
window.location = otherUrl;
}
}
});
You could easily make your confirm dialog like following:
<!-- Modal dialog -->
<div class="modal fade" id="myForm" tabindex="-1">
<!-- CUTTED -->
<div id="step1" class="modal-footer">
<button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
</div>
</div>
<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="confirmMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="confirmOk">Ok</button>
<button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
</div>
</div>
</div>
</div>
File .js:
$('#btnDelete').on('click', function(e){
confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
//My code to delete
});
});
function confirmDialog(message, onConfirm){
var fClose = function(){
modal.modal("hide");
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").one('click', onConfirm);
$("#confirmOk").one('click', fClose);
$("#confirmCancel").one("click", fClose);
}
Using one instead of on prevents that the removal function is invoked at the next opening of the dialog.
I hope this could be helpful.
Follow a complete text example:
var YOUR_MESSAGE_STRING_CONST = "Your confirm message?";
$('#btnDelete').on('click', function(e){
confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
//My code on OK click
});
});
function confirmDialog(message, onConfirm){
var fClose = function(){
modal.modal("hide");
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").one('click', onConfirm);
$("#confirmOk").one('click', fClose);
$("#confirmCancel").one("click", fClose);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Modal dialog -->
<div id="frmTest" tabindex="-1">
<!-- CUTTED -->
<div id="step1" class="modal-footer">
<button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
</div>
</div>
<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="confirmMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="confirmOk">Ok</button>
<button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
</div>
</div>
</div>
</div>
Take a look at the Bootstrap Modal component. It does exactly what you need it to do.
I have a listing page containing a link button to show modal repeating in a PHP loop. I have searched and found these:
Passing data to a bootstrap modal, Passing data to Bootstrap 3 Modal and Pass id to Bootstrap modal and some others but failed.
What I want
I have fetched the data id from database and pass it to bootstrap modal and there I will use this id to display more info through MySQL queries.
I have written all the code but the ID is not passing to the modal.
Modal Link Button code
<a class="btn btn-warning btn-minier" href="#modal-form-show" role="button" data-toggle="modal" data-target="#myModal" data-id="<?php echo $cottage_id ?>"><i class="icon-edit bigger-120"></i> Reservation </a>
Modal code
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
JS code
$('#modal-form-show').on('show.bs.modal', function(e) {
var c_id= $('a[href="#modal-form-show"]').data('id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});
I have taken a text input in modal named cottage and I want show that id in this input.
Try this snippet:
$('.btn-minier').click(function(){
var c_id = $(this).attr('data-id');
$('#cottage').val(c_id);
});
I have change little , when button click show the popup & i've set the value of data-id=2
Button
<a class="btn btn-warning btn-minier" id="btnModalPopup" href="" role="button" data-toggle="modal" data-target="" data-id="2"><i class="icon-edit bigger-120"></i> Reservation </a>
I add button in you modal
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>
ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" readonly />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="btnSubmit">Submit</button>
</div>
</div>
</div>
</div>
Javascript code
<script>
$(document).ready(function () {
$('#btnModalPopup').click(function () {
var c_id = $(this).data('id');
console.log(c_id)
$('#myModal #cottage').val(c_id)
$('#myModal').modal('show')
});
$('#btnSubmit').click(function () {
alert('submit button click')
// get the id , from input field.
var id = document.getElementById('cottage').value;
console.log(id)
alert(id)
//You can set the id - to php variable - then hit to sever by ajax
})
});
</script>
Try using attr method of JQuery
$('#modal-form-show').on('show.bs.modal', function(e) {
// instead of this
//var c_id= $('a[href="#modal-form-show"]').data('id');
// try this one
var c_id= $('a[href="#modal-form-show"]').attr('data-id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});
I need to get the value of the value attribute of the button element and write this value into another modal.
I have a loop in my PHP which writes the following HTML:
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="1">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="2">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="3">Confirm</button>
When I click on a button it shows a modal with two buttons, one to continue and one to cancel. I want store the value of the value attribute of the first button in the href attribute of the "continue" button in the second modal.
My modal:
<div class="modal-body">
<div class="text-center">
<div class="i-circle danger"><i class="fa fa-times"></i></div>
<h4>Are you sure?!</h4>
<p>If yes click on Continue!</p>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a href="IWANTGETIDHERE">
<button type="button" class="btn btn-danger" data-dismiss="modal">Continue</button>
</a>
</div>
</div>
</div>
Here is a demo of my modal.
Using jQuery:
$(document).ready(function() {
$('.btn').click(function() {
alert($(this).attr("value"));
});
});
Instead of alert, use:
$('.modal-footer a').attr("href", $(this).attr("value"));
See the JSFiddle
Using Pure Javascript
document.getElementById('btn').onclick = function() {
document.getElementById('link').setAttribute('href', this.value);
}
See the JSFiddle
button = document.getElementById("buttonID");
button.onclick = function(){
document.getElementsByClassName("class")[0].href = document.getElementById("buttonID").value
}
If you are looking for no dependancies.
You may try this, add a data-customId attribute and remove the value from all of your buttons:
<button data-customId="1" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="2" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="3" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" >Confirm</button>
Also, add an id to your modal div like:
<div id='confirmAction' class="modal-body">
<!-- Markup -->
</div>
Then register a handler for bootstrap show event:
$('#confirmAction').on('show.bs.modal', function (e) {
$id = $(e.relatedTarget).attr('data-customId'); // Get the customId
$(this).find('a:first').attr('href', $id);
});