Develop Reference

Passing angularjs data to bootstrap modal

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>

JavaScript onclick() event won't execute

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>

Change href on modal event with jQuery

I'm trying to change the href of the link in the modal using the id of the clicked link. Though using prop works fine in the console it doesn't seem to work in my snippet. I don't know what i'm doing wrong...
My link:
<a data-toggle="modal" data-target="#myModal" id="1" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
My script :
$('#myModal').on('show.bs.modal', function(e) {
var $modal = $(this),
myId ='home.php?menu=15&status=delete&id=' + e.relatedTarget.id;
$modal.prop('href',myId);
})
My Modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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" id="myModalLabel">........</h4>
</div>
<div class="modal-body edit-content">
<p><strong>..........</strong></p>
</div>
<div class="modal-footer">
<a href="home.php?menu=15&status=delete&id=5" id="modalLink" class="btn btn-default" >yes</a>
<button type="button" class="btn btn-primary "data-dismiss="modal">no</button>
</div>
</div>
</div>
</div>

How to load modal using HTML links

I can load the modal using this piece of code with no issues.
<button type="button" class="btn btn-danger btn-sm" id="sweet_prompt">
Deploy Code <i class="icon-play3 position-right"></i>
</button>
However, I need it as an HTML link and not a button (don't want to mess with the themes' CSS styling). Nothing happens when I click on the link.
<a href="#" data-target="#sweet_prompt" data-toggle="modal">
<i class="icon-history position-left"></i>Deploy Code
</a>
Fixed: I modified it so that the link is constructed this way.
<a id="sweet_prompt">Deploy Code</a>

Look this example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="/mmfansler/aQ3Ge/show/">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>

Given that we (currently) don't know how the modal is being triggered, I'll assume the listener is attached to either button#sweet_prompt or perhaps just #sweet_prompt.
Rewrite either the HTML of your link to use the selector the listener is attached to, or rewrite the listener to attach to the <a/> element.

Click on Dynamically created DOM

I have this HTML Bootstrap 3 code for modal window:
<!-- Modal DELETE-->
<div class="modal fade" id="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">Brisanje</h4>
</div>
<div class="modal-body">
Da li ste sigurni da zelite da obrisete ovu parcelu iz baze?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="brisi" class="btn btn-danger">Save changes</button>
</div>
</div>
</div>
</div>
I try to open this modal with code that is dinamicly created:
"targets": 8,
"data": "akcija",
"render": function(data, type, full, meta) {
// return data;
return '<div style="float:right;"><button class="btn btn-warning">Izmeni</button> <button data-toggle="modal" data-target="#delete" class="btn btn-info">Izvestaj o parceli</button> <i data-toggle="modal" data-target="#delete" class="fa fa-times"></i></div>';
}
so as you can see I add this: <i data-toggle="modal" data-target="#delete" class="fa fa-times"></i> to DOM , but when I click I canT open modal...
What is the probem here?

It looks like you are trying to write the html to the DOM, but your question is unclear.
Using JQuery you would write the contents on the div to another container taht is already in the DOM like so:
<div id="container"></div>
You can the write the contents to the container with jquery:
$("#container").html('<div style="float:right;"><button class="btn btn-warning">Izmeni</button> <button data-toggle="modal" data-target="#delete" class="btn btn-info">Izvestaj o parceli</button> <i data-toggle="modal" data-target="#delete" class="fa fa-times"></i></div>');