AngularJS - ng-click not working in Modal - javascript

I am having a Modal which opens up on a button click. In this Modal, a button uses ng-click to call a function from js file.The function doesn't get called, with no errors.
Outside the Modal the ng-click is working properly.
<div class="container-fluid" ng-app="app" ng-controller="GridCtrl">
....
<div id="partial"></div>
</div>
function openModal() {
jq.get('/Data/openModal?Id=' + Id, function (data) {
jq('#partial').html(data);
jq('#Modal').modal('show');
});
}
Partial Page :-
#model Models.Data
#{
Layout = null;
}
<div class="modal fade bs-example-modal-lg" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="compModalLabel">Master</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="col-sm-12">
<button type="button" ng-click="getData('live')">Live Data</button>
</div>
.....
</div>
var app = angular.module('app', ['ui.grid']);
app.controller('GridCtrl', ['$scope', function ($scope) {
$scope.getData= function (status){
.....
}
}
]);
What is the solution?

See here: Add DOM Elements (that are Angular directives) via jQuery .append()?
You need to have the newly added DOM elements compiled by Angular, with $compile(...)
(Although a more pure AngularJS codewould be better overall, you are mixing JQuery and NG.
http://angular-ui.github.io/bootstrap/#modal)

Related

Fit PartialView to Bootstrap Modal (MVC)

I'm displaying a MVC Partial View inside a Bootstrap Modal by clicking a button. My setup is like this:
Modal
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Title</h4>
</div>
<div class="modal-body" id="Preview">
#*PartialView*#
</div>
</div>
</div>
</div>
Javascript
<script type="text/javascript">
function Open() {
$.ajax({
type: "Get",
url: '#Url.Action("PartialViewTitle", "Controller")',
data: {},
success: function (data) {
$('#Preview').html(data);
$('#myModal').modal('show');
}
});
}
</script>
In my Controller I have defined a method PartialViewTitle() which returns the Partial View. I have a button, where onclick= links to the Open() function.
The problem is that the content of my partial View is displayed on the left side of the modal and on the right is blank space. I would like to have the size of my modal adapted to its content and the content to be centered. What is the best way to do this?
Thank you in advance!
To get the content centered you just have to add align-self-center as follow:
<div class="modal-body align-self-center" id="Preview">
To adapt size, you can use css display: inline-block; please take a look to the following article:
Bootstrap Modal Dynamic Width
In your .cshtml view use
<div id='myModal' class='modal hide fade in' data-url='#Url.Action("PartialViewTitle","Controller")'>
<div id='ModalContainer'>
</div>
</div>
Javascript
<script type="text/javascript">
function Open() {
var url = $('#myModal').data('url');
$.get(url, function(data) {
$('#ModalContainer').html(data);
$('#myModal').modal('show');
});
}
</script>
If it doesn't work then need to add styles.
Try using $('#Preview').append(data); instead of $('#Preview').html(data);

I want to load content into a bootstrap 4 modal using intercooler.js

I'm trying to load content into a modal using intercooler, example here:
http://jsfiddle.net/qvpy3coL/3/
I'm having no joy and wonder if this is possible, or whether the bootstrap js will conflict?
Html is:
<div id="confirm-me" class="btn btn-primary" data-toggle="modal"
data-target="#msgmodal" ic-get-from="/click" ic-target="dynamiccontent"
ic-trigger="click">
Click Me to show dynamic modal</div>
<div class="modal fade" id="msgmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Below will be dynamic content</h4>
</div>
<div id="dynamiccontent">
</div>
</div>
</div>
</div>
js is:
// mockjax stuff ...
$.mockjax({
url: "/click",
responseTime: 500,
response: function (settings) {
this.responseText = "Dynamic stuff here!";
}
});
I've never used intercooler but after a quick read it turns out there should be no problem.
The only requirement with dynamic content you want in the modal is that it should be valid HTML code.
I played with the example you put in some content:
$('#dynamiccontent').html('No, it wont have any problems as long as your placing HTML')
https://jsfiddle.net/5pe6yz0w/3/

bootstrap model passed text appear as raw text and not html (example </br> shows up instead of a new line)

I'm working on this bootstrap modal right now, but ran into a problem..
for the modal, I pass the modal data using jquery like this
<script>
$(function()
{
$('#exampleModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget);
offer = button.data('offer');
modal.find('.modal-body .placeoffer h5').text(offer);
});
});
</script>
It gets compensated in the div like this
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<style>.close {position:absolute;top:10;left:10;}</style>
<div class="modal-body">
<div class="placeoffer"><h5 align="right"></h5</div>
</div>
</div>
</div>
</div>
</div>
Now my question is, I send the offer text with html tags, but instead of rendering the html tags, they show up as raw data, how can I make them get parsed?
Try html(offer) instead of text(offer)
\o/

Cannot set cookie in Controller or Service

I am trying to implement a cookie compliance modal which lets the user accept or decline. When the user clicks accept, I set a cookie using a jQuery plugin by Carhartl (https://github.com/carhartl/jquery-cookie). When I use $.cookie('cookieCompliant', 'true); in the console, the cookie sets fine. However, the cookie will not set when used in my controller. I have tried vanilla JS and also Angular's $cookie, but none of them work. Is there a restriction to this? I also can't get alert() or console.log to work.
MainController
Main.controller("MainController", ['$scope', 'MainFactory', 'CookieFactory', function($scope, MainFactory, CookieFactory){
$scope.cookies = new CookieFactory();
$scope.siteSettings = new MainFactory();
$scope.agreeCookieCompliance = function(){
$.cookie("cookieCompliant", "true");
$('#cookieModal').modal("hide")
}
$scope.declineCookieCompliance = function(){
window.location.href = "https://encrypted.google.com/";
}
$scope.checkCookieCompliance = function(){
if($.cookie('cookieCompliant') === undefined){
$('#cookieModal').modal("show");
}
}
$scope.checkCookieCompliance();
}]);
index.php (modal)
<div class="modal fade" id="cookieModal"tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false" style="display: block; padding-left: 17px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">This site uses cookies</h4>
</div>
<div class="modal-body">
<p>This site uses cookies to give you the best possible experience. By clicking "Accept" you agree to the use of cookies.</p>
</div>
<div class="modal-footer">
<a class="pull-left" style="line-height: 2.5;" href="http://www.whatarecookies.com/" target="_blank">What are Cookies?</a>
<button type="button" ng-click="acceptCookieCompliance()" class="btn btn-success" data-dismiss="modal">Accept</button>
<button type="button" ng-click="declineCookieCompliance()" class="btn btn-danger">Decline</button>
</div>
</div>
</div>
</div>
Note: I am not using CookieFactory, it's only in there because I am frantically searching for a solution.

I need to display a modal window automatically when some condition is true in javascript

HTML:
<div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-vertical-centered">
<div class="modal-content col-lg-pull-3 col-lg-12 col-md-12 col-xs-12 col-sm-12">
<div class="modal-body" id="modaltext">
Hello!!!!!!!!!
</div>
</div>
</div>
</div>
JS:
if(a==81)
{
$("#myModal").css("display" , "block");
}
modal window should display automatically when the condtion is true. it should not display when the button/div is clikced
I mostly do it this way, i send ajax call and on success i do something like this:
Add an anchor tag and pass ahref the modal div id like #myModal in your case hide it like this:
<a id="modalTrigger" href="#myModal" style="display:none;">dummy</a>
put your condition and click anchor tag programmatically:
if(a==81)
{
$("#modalTrigger").click();
}
try something like this
if(some_condition){
$('#myModal').modal('show');
}

Categories