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.
Related
I have modal pop-up that asks users if they would like to subscribe to my newsletter. If the user closes the modal I don't want it to appear again. Using a cookie doesn't seem reliable, it often re-appears. I have read local storage is the way to do this but not found any examples. How would I switch my code to use local storage? In the code below the modal appears after 5 seconds.
//custom.js
if (!readCookie("close_subcribeModal")) {
function subcribeModal() {
$("#subcribeModal").modal("show");
}
setTimeout(function () {
subcribeModal();
}, 5000);
}
php page:
#if(!isset($_COOKIE['close_subcribeModal']) && #$_COOKIE['close_subcribeModal'] != "1")
<div id="subcribeModal" tabindex="-1" role="dialog" aria-labelledby="subcribeModalLabel" aria-hidden="true">
<div role="document">
<div class="modal-content">
<button type="button" id="subcribeModal__close" class="cancel" data-dismiss="modal" aria-label="Close"></button>
<div class="modal-body">
<h2 class="title">Welcome</h2>
<p>Would you like to receive our weekly newsletter?</p>
<x-mail.newsletter-subscription />
</div>
</div>
</div>
</div>
#endif
I have an app running on localhost:port1. On this app, there is a button which when clicked, opens up a modal dialog which has form with First name, Last name and a close and submit button. I have another app running on localhost:port2. I have a button which when clicked, opens up a modal dialog. withing this dialog in app2, I have an iframe which I will like to have the form from localhost:port1 and to also be able to perform the same action as if i was doing in it from the first app.
Currently I am getting the form in the iframe using jquery ajax but however, i am not able to perform any action because non of the buttons work. Below is the jquery code in my second app which gets the form from app1.
<script>
$(document).ready(function () {
$.get('https://localhost:port1/').then(function (html) {
// Success response
var $mainbar = $(html).find('#InsertDialog');
$("#iframe").append('<iframe id="iframe"></iframe>');
setTimeout(function () {
var iframeBody = $("#iframe").contents().find("body");
iframeBody.append($mainbar);
},
333
);
}, function () {
// Error response
document.write('Access denied');
});
});
</script>
In my second app, i have the following page,
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1" id="openModal">Open dialog</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog" style="background: bisque">
<div class="modal-dialog modal-lg" style="height: 100%; width: 100%;">
<!-- Modal content-->
<div class="modal-content" style="height: 90%; width: 100%">
<div class="modal-body">
<iframe name="iframe" id="iframe" style="overflow: hidden; height: 80%; width: 90%; border: none;" scrolling="yes"></iframe>
</div>
#*<button type="button" class="btn btn-default" id="closeMyIframe">close</button>*#
<div class="modal-footer" style="background: bisque">
<button type="button" class="btn btn-default" data-dismiss="modal" id="reload">Close</button>
</div>
</div>
</div>
</div>
I am beginner in this and I don't seem to find a solution for my scenario. Thanks
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/
I'm using bootstrap modal for destroying task objects. When I click on a given task on the index page the modal window pops up and the destroy link of that task gets loaded via data attr, so modal will know which task should be destroyed when user clicks on #delete-task-submit button.
The code works as it is, but I'd like to use data-behavior="delete-task-submit" instead of #delete-task-submit to be clear that this has nothing to do with styling and it's only there for the js call.
What's the right way to do it? I'm asking this because #delete-task-submit is used in the first js call for finding/setting data-task-destroy-link and don't know how else I can find that data attribute without adding id/extra class there.
<div class="modal fade" id="delete-task-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content" style="text-align:left">
<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">Delete Task</h4>
</div>
<div class="modal-body">
<h4>Are you sure?</h4>
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deletetaskclose">Close</button>
<a href="#" id="delete-task-submit" type="button" class="btn btn-danger" data-task-destroy-link >Delete Task</a>
<!-- DESTROY LINK GETS INSERTED HERE -->
</div>
</div>
</div>
</div>
$(document).on('click', '[data-behavior="open-delete-task-modal"]', function (event) {
var taskDeleteLink = $(this).data("task-delete-link");
$('#delete-task-submit').data("task-destroy-link", taskDeleteLink);
});
$(document).on('click', '#delete-task-submit', function (event) {
var href = $(this).data("task-destroy-link");
$.ajax({
type: "DELETE",
url: href,
dataType: "script"
});
});
I'm asking this because #delete-task-submit is used in the first js call for finding/setting data-task-destroy-link and don't know how else I can find that data attribute without adding id/extra class there.
Replace $('#delete-task-submit') with $('[data-behavior="delete-task-submit"]') selector in that part of your code and add data-behavior="delete-task-submit" attribute to your link.
Delete Task
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)