How to save info in database when user favorites? - javascript

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!

Related

Why is my AJAX JQUERY trying to pass multiple variable values to php server side always returning an error?

I am trying to send multiple values from the client side to the server side through JavaScript. Here is my JavaScript JQUERY function below:
// This function addToRentalCart(car) adds the requested
// car to a user's rental cart. It does this through the use
// of an AJAX call to the server with the required data.
// Since the required car data is already on the associated
// html webpage (index.html) all this function does is read it
// from there and send it to the server side process.
// Server side processing will then take care of the rest
// of the operation.
function addToRentalCart (car)
{
var carPosition = 'carRow' + car;
var carAvailabilityCol = 'Col10';
var carAvailableElement = carPosition + carAvailabilityCol;
var carAvailable = document.getElementById(carAvailableElement);
if (carAvailable.innerHTML === 'N')
{ //If the car is not available
alert("Sorry, the car is not available now. Please try other cars.");
}
else
{ //If the car is available
//var carPictureFileCol = 'Col0'; //Set the column numbers of each desired variable
var carMakeCol = 'Col1';
var carModelCol = 'Col2';
var carYearCol = 'Col3';
var carPricePerDayCol = 'Col8';
var carMakeElement = carPosition + carMakeCol;
var carMake = document.getElementById(carMakeElement).innerHTML; //Get the car make or brand
var carModelElement = carPosition + carModelCol;
var carModel = document.getElementById(carModelElement).innerHTML; //Get the car model
var carPictureFile = carModel + '.jpg'; //Get the car picture file
var carYearElement = carPosition + carYearCol;
var carYear = document.getElementById(carYearElement).innerHTML; //Get the car year
var carPricePerDayElement = carPosition + carPricePerDayCol;
var carPricePerDay = document.getElementById(carPricePerDayElement).innerHTML;
carPricePerDay = carPricePerDay.substring(1); //Get the price per day without the dollar sign
$.ajax({
type: "GET",
url: "rentalCarsCart.php",
data: {"carPicFile": carPictureFile, "carBrand": carMake, "carMod": carModel,
"carYearMan": carYear, "carPPD": carPricePerDay},
dataType: "json",
success: function()
{
alert("You have successfully added this car to your rental cart");
},
error: function()
{
alert("error in Ajax call to cart url");
},
});
}
}
All values seem fine even according to the Apache Netbeans IDE output but it bombs out and displays the error alert always. I have even debugged it inside Chrome developer tools using a breakpoint and step through method and all values are fine. It is bombing out inside JQUERY.JS itself and not sending the GET request to the PHP backend. Does anyone have any ideas why? I can't seem to find anything wrong with my code. If you can help me I would be grateful.
My server side code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rental Car Shopping Cart</title>
<style>
h1 {text-align: center;}
button:hover{cursor: pointer;}
</style>
<h1>Car Reservation</h1>
</head>
<body>
<?php
header("Access-Control-Allow-Origin: *");
$carPicture = $_GET['carPicFile']; // get car picture filename
$carMake = $_GET['carBrand']; // get the make of the car
$carModel = $_GET['carMod']; // get the car model
$carYear = $_GET['carYearMan']; // Get the car year of manufacture
$carPricePerDay = $_GET['carPPD']; // Get the car price per day
echo ('<div>');
echo ($carPricePerDay);
echo ('</div>');
?>
</body>
</html>
Phil was right in the comment above that you don't need a dataType response from the PHP server side coding, so I removed it. I also found out the other problem on the PHP backend although not shown in the above PHP code which was very basic originally but got more complicated later:
Instead of if (($carPicture!=0) && ($carMake!=0) && ($carModel!=0) && ($carYear!=0) &&
($carPricePerDay!=0))
{
session_start(); //etc
Try:
if (isset($carPicture) && isset($carMake) && isset($carModel) && isset($carYear) && isset($carPricePerDay))
{
session_start(); //etc
The reason being that when the variables are undefined they are also equal to zero or I am not sure why it decided to work with the bottom version. Positive logic seems to be better than negative logic for PHP. Thanks guys.

AMP set and get cookies values

I am new in this AMP. In web I have scenario like below.
Example I have a page with 100 paragraphs content ... For the user first time visit the page displaying only 10 paragraphs of content. then will ask to user email address in input form. after user provide the email address then will display remaining 90 paragraphs content... The same user visit 2nd time that page we displayed the content without asking email.
Implementation Logic in WEB
After user enter the email address we stored the values in cookies.
If the user visit 2nd time based on cookie values we display the content..
So same logic needs to implements the AMP pages.
I design the form in amp and other stuff but struggling to set the cookie values..
The following code I am used in WEB:
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;
}
Once user enter the email and submit the form
setCookie('article-page','email','XXXXX');
You can't directly access cookies from within an AMP page. However, you can use the amp-access component to implement this behavior server-side.
You can ignore the login/logout features provided by amp-access. The only thing you need to do is to change the response for the authorization endpoint to either return true or false depending on whether the user has provided an email address. Based on this information you can then adjust the content that is displayed on the page.
You can set cookie from server-side using amp-state with credentials="include" attribute. Add this amp state in your body html:
<amp-state credentials="include" id="myState" src="https://example.com/data-state"></amp-state>
And set cookie from server side from the source url https://example.com/data-state:
$cookie_name = "user";
$cookie_value = "John Doe";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1day
Or get cookie from server-side:
if(!isset($_COOKIE['user'])) {
echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
echo "Cookie '" . $cookie_name . "' is set!<br>";
echo "Value is: " . $_COOKIE[$cookie_name];
}

Local Storage is not shared between pages

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

Is it possible to automatically log in to link using Javascript

I want to link to a page and when the user clicks on the link his username and password are already there for him. However where i am linking too i don't control that pages code.
Is it possible to have my javascript execute there after the user clicks the link?
$("#link").click(function() {
alert( "Handler for .click() called." );
var username = getCookie("username");
var password = getCookie("password");
var usernameTextBox = document.getElementById("j_username");
var passwordTextBox = document.getElementById("j_password");
usernameTextBox.value = username;
passwordTextBox.value = password;
});
See my JSfiddle
You can't actually execute it from another page, you can however use the following.
The best way to do this is with a cookie, storing the username, and pointing to an encrypted file with an encrypted password. But you can store the encrypted password in a cookie too, as long as it's encrypted before putting it in the cookie.
I originally developed this for a function that will keep a user logged in to a page that redirected to a login whenever it is accessed, it will click the button and bring them to the page after the login page.
working example: Will need to be edited to fit exact elements on any page, and run on the page, probally through a property or permission gained through a download or web app etc.
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
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 "";
}
function stayLoggedIn() {
setCookie("logged_in","true",30);
setCookie("username", username,30);
setCookie("password",encryptedPassword,30);
return null;
}
window.onload {
var loggedIn = getCookie("logged_in");
if(loggedIn == true) {
var username = getCookie("username");
var password = getCookie("password");
var usernameTextBox = document.getElementById("username");
var passwordTextBox = document.getElementById("password");
//decrypt password here.
usernameTextBox.value = username;
passwordTextBox.value = password;
}
else {}
}
Explained:
first, we set a function to set a cookie and get one, I took these from here
then, I set the function stayLoggedIn() this sets the cookie with the value of "logged_in" to true, so when the user comes to the page, and window.onload runs it's block, the if statement is triggered, and the username and password fields are filled in.
Then, click(element) is called on the logginButton, this can click on php, or html buttons or submit forms etc. This simulates the button being clicked, and the user logging in.
Also: You need to call the function stayLoggedIn() after the link is clicked (like through a google or firefox extension)

Setting a cookie that triggers a redirect

<!DOCTYPE html>
<html>
<head>
<title>login test</title>
<script>
window.onload = iniAll;
function iniAll(){
document.getElementById("CLIENT").onclick = setCookie;
var setCookie = function(exdays){
var d = new Date();
d.seTime(d.getTime() + (exdays *20*60*60*1000));
var expires = "expires="+d.toUTCString();
documenet.cookie = Test = "=" + Test + "; "
loadPageC();
}
var loadPageC = function(){
window.location = "http://www.cnn.com";
return false;
}
if (document.cookie === "Test = test"){
return loadPageC;
}
else {
}
}
</script>
</head>
<body>
<span style="text-align: center;"><h1>Make your choice.</h1></span>
CLIENT
</body>
</html>
here is the updated code however still neither the cookie is setting nor the redirect called by function loadPageC. Komodo is telling me that iniAll will not always return a value. What i want it to do is to check for a cookie either called reader/client or a value of reader/client, and depending of if it is a reader it will redirect it to the reader page and a client cookie to the client page. The scirpt needed to have a an else function of just loading the login page in the absence of the cookie, I have striped that out in an effor to just get the cookie redirect to work.

Categories