I want to save the name of a button when button is pressed.
Than I show a modal and redirect to a page using the button name.
JavaScript:
function onClickBtnRemove()
{
deviceIdName = this.name;
}
function onClickBtnConfirmRemove() {
window.location.href = "/Home/Remove/" + deviceIdName;
}
html:
<script>
var deviceIdName;
</script>
<button class="btn btn-default" type="button" name="123" onclick="onClickBtnRemove()" data-toggle="modal" data-target="#remove" >
<span class="glyphicon glyphicon-trash"></span>
</button>
<div class="modal fade" id="remove" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<h4>Are you sure you want to remove this device?</h4>
<div class="modal-footer">
<button type="button" class="btn btn-primary active" data-dismiss="modal" onclick="onClickBtnConfirmRemove()">Remove</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Related
My code is working but the button is not going backward after clicking.
Here is my output
Launch Demo Modal
Here is the Html code:
<div 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>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</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 changes</button>
</div>
</div>
</div>
Here is the javascript:
<script type="text/javascript">
$('#c').click(function(){
$("#myModal").modal('show');
});
i have created a working fiddle.
JS fiddle
Just add a on click event and hide the modal.
HTML
Launch Demo Modal
<div 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>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id = "test" type="button" class="btn btn-primary" >Save changes</button>
</div>
</div>
</div>
JS
$('#c').click(function(){
$("#myModal").modal('show');
});
$("#test").on("click", () =>{
alert("save changes")
$("#myModal").modal('hide');
})
First of all, I'm pretty new to angularjs.. So when I'm trying to pass data from angularjs controller to a bootstrap modal they don't don't display.
Trigger
<a ng-click="editarEndereco(item)" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#exampleModalLong">Editar</a>
Modal
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document" >
<div class="modal-content" ng-controller="listaEnderecosController">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLongTitle">Alterar informações deste endereço</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{{enderecoAlterar.bairro}}
<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>
</div>
AngularJS Controller
$scope.enderecoAlterar = {};
$scope.editarEndereco = function (item) {
$scope.enderecoAlterar = item;
};
From this implementation you will not be able to pass parameters to the modal.
First you should seperate id="exampleModalLong" div with inside content to a new html file.
Then edit this <a> tag as below,
<a ng-click="editarEndereco(item)" class="btn btn-primary btn-xs">Editar</a>
And inside your controller, edit editarEndereco function as below,
$scope.editarEndereco = function (item) {
var modalInstance = $modal.open({
controller: 'CREATE A NEW CONTROLLER FOR THE MODAL AS WELL. IF YOU ALREADY HAVE IT. MENTION IT HERE',
templateUrl: 'YOUR NEWLY CREATED HTML FILE URL HERE',
resolve: {
enderecoAlterar : item
}
});
};
Then inside the modalinstance controller inject enderecoAlterar & use it
I am doing it using the angular.copy(item, $scope.item); function.
This is how I have done it in my code:
$scope.confirmDelete = function (item) {
$scope.item = {};
angular.copy(item, $scope.item);
$('#delete-item-modal').modal({
show: true
});
}
<a role="button" ng-click="confirmDelete(offer)">Delete</a>
<!-- Confirm delete modal -->
<div class="modal fade" id="delete-item-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<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">Delete element</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-16">
Are you sure you want to delete <strong>{{item.offerTitle}}</strong>?
</div>
</div>
</div>
<div class="modal-footer">
<form novalidate name="deleteOfferForm" ng-submit="deleteOffer(item)">
<input type="hidden" class="form-control" id="{{appData.securityTokenName}}" value="{{appData.securityToken}}">
<button type="button" class="btn btn-xs btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-xs btn-danger">Delete</button>
</form>
</div>
</div><!-- /.modal-content -->
</div>
</div>
I have two modal window in the same page but when I click at the button with the attrib: data-target='#change' the CHANGE MODAL WINDOW don't show it.
I have not experience about js I could be that problem with the code:
<div class="pull-left btn-group">
<button id="changestatus" type="submit" class="btn" data-toggle='modal' data-target='#change'>CANVIAR ESTAT</button>
<button class='btn btn-xs edit btn-addcom' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button>
<div class="modal fade" id="change" tabindex="-1" role="dialog" aria-labelledby="change" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">CANVIAR ESTAT</h3>
</div>
<div class="modal-body">
<div class=" text-center">
<div class="btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn" style="background-color:YellowGreen; color:white;">ACTIVAT</button>
</div>
<div class="btn-group">
<button type="button" class="btn" style="background-color:Tomato; color:white;">PENDENT MIQUEL ALIMENTACIÓ</button>
</div>
<div class="btn-group">
<button type="button" class="btn" style="background-color:SkyBlue; color:white;">PENDENT ADDCOM</button>
</div>
<div class="btn-group">
<button type="button" class="btn" style="background-color:Gray; color:white;">DESACTIVAT</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h3 class="modal-title text-center" id="Heading">EDITAR REGISTRE</h3>
</div>
</div>
</div>
</div>
/* EDIT MODAL WINDOW */
$('#edit').on('show.bs.modal', function (event) {
var $button = $(event.relatedTarget) // Button that triggered the modal
var row = $button.closest("tr"), // edit button is in the same row as data you want to change
$tds = row.find("td"); // get all table cells in that row
$.each($tds, function(index,value) {
var field = $(this).data("field");
console.log($(this).text());
$('[name="' + field +'"]').val($(this).text()); //input name in the modal window
});
var src_value = $tds.closest("td").find('img').attr('src');
$('[name="imagen"]').attr("src",src_value);
});
/* CHANGE MODAL WINDOW */
$('#change').on('show.bs.modal', function (event) {
alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
});
Help me please?
The button with attribute data-target='#change' will work fine because there's a div with the id change in your page, you've just to comment the alert inside show.bs.modal event because you have an undefined variable $table there.
NOTE : The second button will not work because the data-target attribute refer to #edit element that not exist in your code.
Hope this helps.
$('#edit').on('show.bs.modal', function (event) {
var $button = $(event.relatedTarget) // Button that triggered the modal
var row = $button.closest("tr"), // edit button is in the same row as data you want to change
$tds = row.find("td"); // get all table cells in that row
$.each($tds, function(index,value) {
var field = $(this).data("field");
console.log($(this).text());
$('[name="' + field +'"]').val($(this).text()); //input name in the modal window
});
var src_value = $tds.closest("td").find('img').attr('src');
$('[name="imagen"]').attr("src",src_value);
});
/* CHANGE MODAL WINDOW */
$('#change').on('show.bs.modal', function (event) {
//alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="pull-left btn-group">
<button id="changestatus" type="submit" class="btn" data-toggle='modal' data-target='#change'>CANVIAR ESTAT</button>
<button class='btn btn-xs edit btn-addcom' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button>
<div class="modal fade" id="change" tabindex="-1" role="dialog" aria-labelledby="change" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">CANVIAR ESTAT</h3>
</div>
<div class="modal-body">
<div class=" text-center">
<div class="btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn" style="background-color:YellowGreen; color:white;">ACTIVAT</button>
</div>
<div class="btn-group">
<button type="button" class="btn" style="background-color:Tomato; color:white;">PENDENT MIQUEL ALIMENTACIÓ</button>
</div>
<div class="btn-group">
<button type="button" class="btn" style="background-color:SkyBlue; color:white;">PENDENT ADDCOM</button>
</div>
<div class="btn-group">
<button type="button" class="btn" style="background-color:Gray; color:white;">DESACTIVAT</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h3 class="modal-title text-center" id="Heading">EDITAR REGISTRE</h3>
</div>
</div>
</div>
</div>
In this scenario I would like to preserve bandwidth by when a modal opens then it loads the import_audit_table into a Div in the Modal. Is this possible?
<script>
$(document).ready(function(){
$('#import_audit_div1').click(function(){
$('#import_audit_table').load("edit_audits.php?action=import");
});
});
</script>
<input type="button" class="btn btn-default" value="Modal Opener" id="import_audit_div1" data-toggle='modal' data-target='#import_audit_div'/>
<div class="modal" id="import_audit_div" role="dialog">
<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">Title</h4>
</div>
<div class="modal-body">
<h3>
<div id="import_audit_table">
</div></h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
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.