I'm attempting to create a redirect based on a cookie existence. So when a user connects to my website jonathanstevens.org for the first time, they are redirected to jonathanstevens.org/landing
Code parts:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
Global.js
function create_cookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime( date.getTime() + (days*24*60*60*1000) );
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function get_cookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1, c.length);
}
if (c.indexOf(nameEQ) === 0) {
return c.substring(nameEQ.length, c.length);
}
}
return null;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Index.html
<!-- redirect to landing page -->
<script>
// Redirect to landing page if 'form_submitted' cookie does not exist
if (get_cookie('secondvisit') === 'undefined') {
window.location.href = "landing.html";
}
</script>
landing.html
<!-- Adds second Visit cookie -->
<script>
jQuery(document).ready(function($) {
// Create cookie so that the user is no longer redirected
create_cookie('secondvisit', 'true', 30);
});
</script>
The expected result was it to check for a cookie, then forward me to my landing page if it wasn't defined. Any ideas on what I've done wrong?
You should compare with null instead of undefined as you are returning null from the function get_cookie
Index.html
<!-- redirect to landing page -->
<script>
// Redirect to landing page if 'form_submitted' cookie does not exist
if (get_cookie('secondvisit') === null) {
window.location.href = "landing.html";
}
</script>
Apart from this you should use this library really good one an easy to work with see below
Create a cookie, valid across the entire site:
Cookies.set('name', 'value');
Create a cookie that expires 7 days from now, valid across the entire site:
Cookies.set('name', 'value', { expires: 7 });
Create an expiring cookie, valid to the path of the current page:
Cookies.set('name', 'value', { expires: 7, path: '' });
Read cookie:
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
Read all visible cookies:
Cookies.get(); // => { name: 'value' }
Delete cookie:
Cookies.remove('name');
Delete a cookie valid to the path of the current page:
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!
EDIT
A converted version of your code using js.cookie library will look like following.
(Note: i have tested this code and it works correctly, make sure you are including the library correctly and there are no errors on the console.)
Index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
<!-- redirect to landing page -->
<script>
$(document).ready(function () {
if (typeof Cookies.get('secondvisit') === 'undefined') {
window.location.href = "landing.html";
}
})
// Redirect to landing page if 'form_submitted' cookie does not exist
</script>
landing.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
<!-- Adds second Visit cookie -->
<script>
jQuery(document).ready(function () {
// Create cookie so that the user is no longer redirected
var a = Cookies.set('secondvisit', 'true', {
expires: 7
});
});
</script>
Related
I am trying to set up cookies that expire in 7 days after clicking the 'x' on the modal. I can't figure out why it doesn't want to save the cookie. Below is the code I am using. The site is goodbooks.io.
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"> </script>
<script>
var cookieName = 'popupClosed';
if(typeof Cookies.get(cookieName) !== 'undefined') {
$('.popup-wrapper, .preview-page, .popup-content-wrapper, .popup').remove();
}
$('.close-popup').on('click'), function(){
Cookies.set(cookieName, 'value', { expires: 7});
}
</script>
in PHP
<?php
header('Test 123 I Love Bacon'); // just to test header_ list
setcookie('cookieName','cookieValue123',time()+604800, "example.com");
if(isset($_COOKIE['cookieName']) && $_COOKIE['cookieName'] == 'cookieValue123')
{
var_dump(headers_list()); // show headers to be sent to the browser
}
?>
Change
$('.close-popup').on('click'), function(){ ... }
to
$('.close-popup').on('click', function(){ ... })
I'm failing to save the info to when a logged in user clicks on the favorite button.
This is my first week in javascript class(including ajax). We're allowed to copy paste as long as we understand the process. So the first thing I did was looking up tutorials as to how to make favorite / unfavorite buttons and took over a template. Then I searched up how save the info in the database once the user clicks the favorite button. I'm not sure linking to external websites is allowed but I specifically took over this code:
<!DOCTYPE html>
<html>
<head>
<title>New page name</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
/*
* Create cookie with name and value.
* In your case the value will be a json array.
*/
function createCookie(name, value, days) {
var expires = '',
date = new Date();
if (days) {
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = '; expires=' + date.toGMTString();
}
document.cookie = name + '=' + value + expires + '; path=/';
}
/*
* Read cookie by name.
* In your case the return value will be a json array with list of pages saved.
*/
function readCookie(name) {
var nameEQ = name + '=',
allCookies = document.cookie.split(';'),
i,
cookie;
for (i = 0; i < allCookies.length; i += 1) {
cookie = allCookies[i];
while (cookie.charAt(0) === ' ') {
cookie = cookie.substring(1, cookie.length);
}
if (cookie.indexOf(nameEQ) === 0) {
return cookie.substring(nameEQ.length, cookie.length);
}
}
return null;
}
/*
* Erase cookie with name.
* You can also erase/delete the cookie with name.
*/
function eraseCookie(name) {
createCookie(name, '', -1);
}
var faves = new Array();
$(function(){
var url = window.location.href; // current page url
$(document.body).on('click','#addTofav',function(e){
e.preventDefault();
var pageTitle = $(document).find("title").text();
var fav = {'title':pageTitle,'url':url};
faves.push(fav);
var stringified = JSON.stringify(faves);
createCookie('favespages', stringified);
location.reload();
});
$(document.body).on('click','.remove',function(){
var id = $(this).data('id');
faves.splice(id,1);
var stringified = JSON.stringify(faves);
createCookie('favespages', stringified);
location.reload();
});
var myfaves = JSON.parse(readCookie('favespages'));
faves = myfaves;
$.each(myfaves,function(index,value){
var element = '<li class="'+index+'"><h4>'+value.title+'</h4> Open page '+
'Remove me';
$('#appendfavs').append(element);
});
});
</script>
</head>
<body>
Add me to fav
<ul id="appendfavs">
</ul>
</body>
</html>
It displays "add me to fav" like it's supposed to but then when I click on it, it returns:
(index):54 Uncaught TypeError: Cannot read property 'push' of null
at HTMLAnchorElement.<anonymous> ((index):54)
at HTMLBodyElement.dispatch (jquery.min.js:3)
at HTMLBodyElement.r.handle (jquery.min.js:3)
The assignment is as follows:
""- Show a 'favorite' icon / heart. Make this clickable via jQuery / JavaScript. If you click on it, an AJAX request must be sent with the blog post id. A WP plugin must 'process' the AJAX request, and store in the session (or database) that user X has liked a certain blog post. The server must return a JSON response."
Now had a small side question, for after I resolve the error of this thread, is my way of thinking correct:
Through CSS I'll create a heart button
This script itself does the ajax request with post ID
WP plugin I've done before
This script provides the JSON response
Thank you stack overflow in advance, I look forward to learning!
I have an epub3 book with 2 pages as well as a Table of Contents Page. I am viewing this book in Apple's Books, their inbuilt epub3 reader, on Mac OSX. The two pages appear side by side. The first page is as follows:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=500, height=600"/>
</head>
<body>
<p id="result"></p>
<script>
//<![CDATA[
var current_page = "1";
var other_page = "2";
var t = 0;
setInterval(function() {
var d = new Date();
var storage = localStorage;
storage.setItem("t"+ current_page, d.toLocaleString());
document.getElementById("result").innerHTML = storage.getItem("t"+ current_page) +" "+storage.getItem("t"+ other_page);
}, 1000);
//]]>
</script>
</body>
</html>
and the only thing different in my second page is:
var current_page = "2";
var other_page = "1";
So every second, Page 1 saves the current time to Local Storage as t1, and Page 2 does the same for the value t2. At the same time, both pages are reading both t1 and t2 from Local Storage, before their values are displayed to screen. However in ibooks, Page 1 only manages to display the current value for t2 when the page is reloaded - like when I flip to the Table of Contents and then back to Page 1 and 2 again. With something similar happening for Page 2 with regard to t1.
So at time 21:10:00, Page 1 might display:
08/09/19, 21:09:18 08/09/19, 21:08:58
and Page 2:
08/09/19, 21:09:22 08/09/19, 21:08:01
I also tried using Session Data but Page 1 can't ever read t2 and Page 2 can't read t1. So, this would be displayed instead:
08/09/19, 21:09:18 null
I can think of several applications where it would be very useful for Pages to communicate with each other.
For example, if a video is playing on one page, it would be useful to stop it if a video on another page is started. This would normally be done using Session Storage. This is related to my own use case and the reason I started exploring this problem.
Likewise, if the user is asked on Page 1 to enters the name of the main character of the story, then that entry should appear immediately on Page 2 once it is entered.
Is there any other way for Pages to communicate with each other in epub3 other than Local or Session Storage?
I dont know epub3 and dont have a MAC to test, but here are four possible solutions that come to my mind:
Cookies
It is not as performant as localStorage for that use-case, but if you dont have many options, better that than nothing.
Functions to create, read and delete cookies (Credits to https://stackoverflow.com/a/28230846/9150652):
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
document.cookie = name+'=; Max-Age=-99999999;';
}
Usage for your example:
<script>
//<![CDATA[
var current_page = "1";
var other_page = "2";
var t = 0;
setInterval(function() {
var d = new Date();
setCookie("t"+ current_page, d.toLocaleString(), 100); // 100 days
document.getElementById("result").innerHTML = getCookie("t"+ current_page) +" "+getCookie("t"+ other_page);
}, 1000);
//]]>
</script>
BroadcastChannel
BroadcastChannel is a very new functionality, so it might not be supported by the "Books" app. But here is a concept:
<script>
//<![CDATA[
var broadcaster = new BroadcastChannel('test');
var current_page = "1";
var other_page = "2";
var t = 0;
setInterval(function() {
var d = new Date();
// Send message to all other tabs with BroadcastChannel('test')
bc.postMessage({
senderPage: "t"+ current_page,
date: d.toLocaleString()
});
}, 1000);
broadcaster.onmessage = (result) => {
if(result.senderPage == "t"+ other_page) { // If the message is from the other page
// Set HTML to current date + sent Date from other page
var d = new Date();
document.getElementById("result").innerHTML = d.toLocaleString() +" "+result.date;
}
};
//]]>
</script>
Some sort of Backend
If none of the above works, you probably have no other option, than to use some sort of backend, to provide and save the data
If it is just for you, I suggest you to use a free tier of Firebase or MongoDB Atlas, as they both provide quite some value on their free tier.
If you do it with a Backend, it could be done with something like this:
<script>
//<![CDATA[
var current_page = "1";
var other_page = "2";
var lastLocalDate = new Date();
const serverUrl = "http://someUrl.com/endpoint/"
// Gets the latest date of the other page via ajax
function getUpdate() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
// If successful, update HTML
if (xmlhttp.status == 200) {
document.getElementById("result").innerHTML = lastLocalDate.toLocaleString() +" "+xhr.responseText;
}
// Update the date of this page anyways
sendUpdate();
}
};
// GET request with parameter requestingPage, which is the other page
xmlhttp.open("GET", serverUrl, true);
xmlhttp.send(`requestingPage=${other_page}`);
}
// Sends the current date of this page to the webserver
function sendUpdate() {
var xmlhttp = new XMLHttpRequest();
// No need to check if successful, just update the page again
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
getUpdate();
}
};
lastLocalDate = new Date();
// POST request with parameters page and date
xmlhttp.open("POST", serverUrl, true);
xmlhttp.send(`sendingPage=${current_page}&data=${lastLocalDate.toLocaleString()}`);
}
// Start with sending an update (so that lastLocalDate is at least sent once to the server)
sendUpdate();
//]]>
</script>
And some methods in your backend that need to look something like this (note that this is not valid code in any language):
#GET
function getDate(requestingPageId)
find latest entry with page.id == requestingPageId
return page.date
#POST
function saveDate(savingPage, savingDate)
store new page element with
page.id = savingPage
page.date = savingDate
And a collection in your database looking like this:
[
{
id: 1,
date: "date"
},{
id: 2,
date: "date"
},{
id: 2,
date: "date"
},{
id: 1,
date: "date"
},
// ...
]
Window References
If the Books app opens the second tab from the first tab, it might be worth to look into:
Window.postMessage()
With its functions:
Window.open()
to open the second tab and get a reference to it
And Window.opener to get a reference to the opener
I have an application that needs to pop a URL based on a Query String sent to it. Unfortunately, we can't insert any javascript into the application itself, but we can insert an iFrame that loads a page running javascript. There is a bug in the application where it loads the content in the iFrame twice within a couple seconds, which results in the URL popping twice.
To resolve this, I decided to set a cookie with an expiration. Before popping, I would check to see if the cookie exists, and if it does, prevent the pop from happening.
Unfortunately, my cookie is not being set. I've read a few threads about Javascript cookies trying to figure this out. The first thing I found is Chrome does not accept cookies from local files, so I set up an IIS server to host the page.
However, the cookie still is not being set. I read this page to make sure my code was correct, and as far as I can tell, it should be correct.
The code for my page is below. Any help would be greatly appreciated.
<html>
<head>
<script type="text/javascript">
var isPopped;
function myFunction() {
alert("Hello! I am an alert box!");
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
function pop() {
var queryString = location.search.substring(1); //Get Query String from URL of iFrame source. The substring(1) strips off the ? and only takes the first substring. This can be modified to take more and the resulting string can be edited with Regular Expressions if more flexibility is required.
var urlToPop = "https://www.google.com/#" + queryString //Set URL to pop.
var recentVisitTrue=getCookie("visitRecent");
if (recentVisitTrue != "") {
isPopped = 1;
} else {
window.open(urlToPop,"_blank");
setCookie("visitRecent", "true");
}
}
function setCookie(cName,cValue) {
var date = new Date();
date.setTime(d.getTime() + 8000000);
var expires = "; expires=" + date.toGMTString();
document.cookie = cName + "=" + cValue + expires + ";path=/";
}
function getCookie(cName) {
var name = cName + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
</script>
</head>
<body onload="pop();">
v0.32
</body>
</html>
Thanks!
How can I turn this into a session cookie?
I know I would start by getting rid of the exipredays, but when I set the expiredays to 0 the message cbox displays everytime your refresh the page and I could see that getting annoying..
<p align="center">DISCLAIMER GOES HERE</p>
<script type="text/javascript" language="javascript">
var agreement = GetCookie();
// checks for cookie and displays disclaimer alert if new user
if(agreement=="")
{
var decision = confirm("DISCLAIMER: GOES HERE \n\nClick Ok if you agree to the disclaimer or click Cancel to close this window. \n");
if(decision == true)
{
// writes a cookie
var expiredays = 7;
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie="PartnerAgreement"+ "=" +escape("Agree To Disclaimer")+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
else
{
// redirect
window.location = "/_layouts/signout.aspx";
// or close the browser window
//window.opener='x';
//window.close();
}
}
// gets the Cookie if it exists
function GetCookie()
{
if (document.cookie.length>0)
{
c_name = "PartnerAgreement";
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return agreement = unescape(document.cookie.substring(c_start,c_end))
}
}
return "";
}
Your code says:
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
0 is not null (0 is "immediately"). Set expiredays to null.