Using browsers local storage instead of cookie - javascript

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

Related

Closing Bootstrap Modal When Condition Met

I have a bootstrap modal v3.2.0, which shows on page load. It is being used as an age verification pop up.
I am looking for a way to close this modal if a condition has been met. Basically, when the user clicks a button, I want it to close but I also want to ensure that the modal does not appear again on page load after clicking that button.
Here is the code
$(window).load(function(){
$('#myModal').modal('show')
});
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button id="footer-close" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This code works to successfully load the bootstrap modal on page load and closes the modal when you click on the close button however the modal will still appear again on page load. As I am not very strong with Javascript, I am not certain how to go about a conditional or if statement. So far I have the bare bones:
if (condition) {
$("#myModal").modal('hide');
} else {
// block of code to be executed if the condition is false
}
Inside the original if statement should be if the close button has been clicked. It should also prevent the modal from auto loading again. Maybe I don't even need the else statement.
Their might even be a better option I haven't considered. Any help much appreciated.
$('#myModal').modal('show')
$('#over18').on('click', function (e) {
$('#myModal').modal('hide')
});
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
<img class="img-responsive" style="margin:0 auto;" src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/Flavour_Vapour_Icon_300x300.png?v=1550053751" alt="">
</div>
<div class="modal-body">
<p class="modal-p">You must be at least 18 years old to enter this site.</p>
</div>
<div class="modal-footer">
<button type="button" id="over18" class="btn btn-default">I am 18 or older</button>
I am under 18
</div>
</div>
</div>
</div>
For additional clarity, if I use the following code, when you click the button it does show the alert, so the javascript and code is working for that, it simply won't work when using the bootstrap: $('#myModal').modal('hide');
$('#over18').on('click', function () {
alert('Hello!');
});
So after some more playing around, the following code will auto open the modal, when the over 18 button is clicked it will be closed, and an alert will appear to say the modal is about to be hidden. I done this to make sure the javascript was working.
The line that is calling the alert is where I should be putting the localstorage line to ensure the modal does not show again. However this does not work.
$("#myModal").modal("show");
$("#over18").click(function(){
$("#myModal").modal("hide");
});
$("#myModal").on('hide.bs.modal', function(){
alert('The modal is about to be hidden.');
});
You could try something like this, to decide whether to show the modal:
// On initial page load
if (localStorage.getItem('age-verified') !== true) {
$("#myModal").modal('show');
}
Then, if the modal shows - do something like this:
// Upon the age being confirmed
$('#footer-close').on('click', function() { // This is for illustration - handle the close event on the modal however you choose
$("#myModal").modal('hide');
localStorage.setItem('age-verified', true);
});
Updated - based on new code you posted
I've managed to create a working example for you. The script tags in your HTML document need to be in the same order as below. Bootstrap relies on jQuery - so that needs to be declared first.
Also to note - if you try running this example in StackOverflow's code snipped editor, it won't work - as code snippets are sandboxed, and don't have access to localStorage. You should be able to run it locally on your own computer though.
if (localStorage.getItem('age-verified') !== true) {
$('#myModal').modal('show');
$('#over18').on('click', function (e) {
$('#myModal').modal('hide');
localStorage.setItem('age-verified', true);
});
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Your page content here</h1>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
<img class="img-responsive" style="margin:0 auto;" src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/Flavour_Vapour_Icon_300x300.png?v=1550053751" alt="">
</div>
<div class="modal-body">
<p class="modal-p">You must be at least 18 years old to enter this site.</p>
</div>
<div class="modal-footer">
<button type="button" id="over18" class="btn btn-default">I am 18 or older</button>
I am under 18
</div>
</div>
</div>
</div>
You can refer to the official bootstrap reference guide to do this depending on what version of bootstrap you are using. See Reference

laravel, cleaner way to assign variable to a modal

I'm on a "blade" page that have:
<a
type="button"
data-passage="{{$passage}}"
class="btn btn-warning btn-xs editPassageButton"
data-toggle="modal"
data-target="#editPassage">Edit</a>
Then a modal like:
<div class="modal fade" id="editPassage"
tabindex="-1" role="dialog"
aria-labelledby="favoritesModalLabel">
<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="addPassageLabel">Modifica Brano</h4>
</div>
<div class="modal-body">
#php
$passage = "?????????";
#endphp
{{ Form::model($passage, array('route' => array('passage.update', 'null'), 'method' => 'POST')) }}
etc. etc.
Then a script part like this:
$(function() {
$('.editPassageButton').on("click", function (e) {
passage = $(this).data('passage');
});
});
And it works properly, so I cannot well understand how to send it to the php variable on the modal (the part with ???????). I found several post that suggest to send it trough a form, but it seem tricky to me, and for Laravel how it works?
do i need to add a route in that case? no cleaner way to do it? I know how to pass single variable to a modal form, but i prefer to using the variable that is the model that i need to update...

Can't call another file within a function

So I'm trying to run a script which is running every couple of seconds.
Let me show you first my code:
<div id="deadlinetask"></div>
<script>
$(document).ready(function(){
setInterval(swapImages,5000);
function swapImages(){
$("#deadlinetask").load("pages/jquery/task-expiration.php");
}
});
</script>
And task-expiration file looks like this:
<?php
//let´s display the alarm 15 minutes prior deadline
if($timeleft <= 21) {
?>
<!-- Display this modal window if less the x minutes -->
<div class="modal fade" id="myModal" 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">Task expiration</h4>
</div>
<div class="modal-body">
<div>
<h3 class="text-center">Your task "<?=$row['title'];?> is about to expire</h3>
</div>
</div>
</div>
</div>
</div>
<audio id="foobar" src="https://easynote.io/what-friends-are-for.ogg" preload="auto">
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
var sample = document.getElementById("foobar");
sample.play();
});
</script>
<?php } ?>
Now I have just tried to insert text like hello and it its being refreshed every 5 seconds.
Another thing is if I try to replace the first code above with:
<div id="deadlinetask"></div>
<script>
$(document).ready(function(){
$("#deadlinetask").load("pages/jquery/task-expiration.php");
});
</script>
Then the modal popup shows on page load.
So finally to my question.
Why isn't this working when I call it from a function? Could someone give maybe an example how to solve this?
Just want to post that I found the problem and thank you #ochi and everyone else for helping.
So The solution to the problem was to change
$(window).load(function(){
to
$(document).ready(function(){
in the file task-expiration.php
Thank you sooo much for all help!

jquery accessing data-attrs

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

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.

Categories