How to create a new User object? - javascript

i have this code:
//Start of User Constuctor
function User(firstName,lastName){
this.first = firstName;
this.last = lastName;
this.quizScores = [];
this.currentScore = 0;
}
User.prototype = {
constructor:User,
saveScore: function(theScoreToAdd){
this.quizScores.push(theScoreToAdd)
},
showNameAndScores : function(){
var scores = this.quizScores.length > 0 ? this.quizScores.join(",") : "No Scores Yet";
return this.first + " " + this.last + scores;
}
}
//End of User constructor
//Start of Question Constuctor
function inheritPrototype(childObject, parentObject) {
// As discussed above, we use the Crockford’s method to copy the properties and methods from the parentObject onto the childObject
// So the copyOfParent object now has everything the parentObject has
var copyOfParent = Object.create(parentObject.prototype);
//Then we set the constructor of this new object to point to the childObject.
//This step is necessary because the preceding step overwrote the childObject constructor when it overwrote the childObject prototype (during the Object.create() process)
copyOfParent.constructor = childObject;
// Then we set the childObject prototype to copyOfParent, so that the childObject can in turn inherit everything from copyOfParent (from parentObject)
childObject.prototype = copyOfParent;
}
function Question ( question , choices , correctAnswer ){
//those will be uniqe for every question made
this.question = question;
this.choices = choices;
this.correctAnswer = correctAnswer;
this.userAnswer = "";
console.log("created");
}
Question.prototype.getCorrectAnswer = function(){
return this.correctAnswer;
};
Question.prototype.getUserAnswer = function(){
return this.userAnswer;
};
Question.prototype.displayQuestion = function(){
this.question;
choiceCounter = 0;
this.choices.forEach(function(eachQuestion){
choiceCounter;
eachQuestion;
choiceCounter ++;
});
console.log(this.question);
};
function QuestionCreate( question , choices , correctAnswer ){
Question.call(this,question,choices,correctAnswer);
};
function UserCreate ( first,last){
User.call(this,first,last)
}
inheritPrototype(QuestionCreate,Question);
var allQuestions = [
new QuestionCreate("fist",["1","2","3","4"],1),
new QuestionCreate("seconed",["1","2","3","4"],2),
new QuestionCreate("third",["1","2","3","4"],3),
new QuestionCreate("fourh",["1","2","3","4"],4)
];
allQuestions.forEach(function(eachQuestion){
eachQuestion.displayQuestion();
});
// End of Question Constuctor
var allUsers;
if(localStorage["fn"] && localStorage["ln"]){
$("form").remove();
}
$("#login").bind("click",function(){
var firstname = $("#fn").val();
var lastname = $("#ln").val();
var validfn = /[a-zA-Z]/.test(firstname);// check to match the if the input is a-z char
var validln = /[a-zA-Z]/.test(lastname);// check to match the if the input is a-z char
if (validfn && validln) {
var first = firstname;
var last = lastname;
alert(first + " " + last);
localStorage["fn"] = first;
localStorage["ln"] = last;
allUsers = [
new UserCreate(first, last)
]
}
});
As you can see i have a User constuctor.
HTML code:
<!DOCTYPE html>
<html lang="en"> <!--manifest="site.manifest" -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<title>Quiz Version 3</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- contaning all display -->
<div class="container">
<!-- contaning header -- navgiation -->
<header class="row">
<div class="span12">
<nav class="navbar">
<div class="navbar-inner">
Boaz Hoch
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>My Proggres</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Follow Me
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>FaceBook</li>
<li>Google +</li>
<li>Linked-In</li>
</ul>
</li>
<li></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!-- End of Header -->
<!-- contaning main part -->
<section class="row" id="main-container">
<div class="well span6 offset3">
<form>
<fieldset>
<legend>Login</legend>
<input id="fn" type="text" class="input-block-level" placeholder="First Name">
<input id="ln" type="text" class="input-block-level" placeholder="Last Name">
<input id="login" type="submit" class="btn btn-primary" value="login">
</fieldset>
</form>
<!-- crappy script tag at the middle of the html file -->
<script id="try" type="text/x-handlebars-template">
<div> My Name is {{this}}</div>
</script>
</div>
</section>
<!-- contaning all display -->
<footer class="row">
<!-- svg
sqaure
<svg width="200" height="200">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" x="0" y="0" width="10" height="10" fill="none" stroke-width="3" stroke="red"/>
<ellipse cx="10" cy="10" rx="10" ry="5"/>
<line x1="0" y1="0" x2="5" y2="5" />
</svg>
-->
</footer>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src="js/webapp.js"></script>
<script type="text/javascript" src="js/template.js"></script>
</body>
</html>
As you can see i have a form,
now im trying to create a new User (using the consturctur), with the parameters of his first name and last name,
but i cant seem to create it as i want, i just want everytime that a user submit a form to create a new user object.
check my jsfiddle:
http://jsfiddle.net/qMuwe/

Related

Covid-19 error message when country isn't entered isn't matched with API

I'm developing a COVID-19 tracker app so far it works but I'm having issue for when the user search for a country that isn't in the API a error message is suppose to pop up as the else statement, which indeed it does happen. The issue is the message would pop up when a country that's been entered and the API has the info the error message would still pop up. Any advice would help, thank you.
let btn = document.getElementById("submit-btn");
//set variable btn to the html button id
btn.addEventListener("click",()=>{
let text = document.getElementById("input-text").value;
console.log("button was pressed");
//added a event once btn is pressed taking the value of what was typed in the form
fetch('https://api.covid19api.com/summary')
.then((covidData)=>{
return covidData.json();
})
//
.then((getData)=>{
console.log(getData);
console.log("api was contacted");
var content = document.querySelector(".api-data");
var box = content.lastElementChild;
while (box) {
content.removeChild(box);
box = content.lastElementChild;
}
var countriesIndex = 0;
for(var i = 0; i < 185; i++){
if(getData.Countries[i].Country.toLowerCase() == text.toLowerCase()){
countriesIndex = i;
break;
}
else {
var hideData = document.querySelector(".api-data");
hideData.style.display = "none";
alert("No information for that country")
break;
}
}
let data = document.querySelector(".api-data");
data.innerHTML = `<div class="data-boxes">
<div class="country-index">
<span>Covid-19 Cases in ${getData.Countries[countriesIndex].Country}</span>
</div>
<div class="total-data">
<div><p>Total Confirmed</p> ${getData.Countries[countriesIndex].TotalConfirmed}</div>
<div><p>Total Deaths</p> ${getData.Countries[countriesIndex].TotalDeaths}</div>
<div><p>Total Recovered</p> ${getData.Countries[countriesIndex].TotalRecovered}</div>
</div>
<div class="new-data">
<div><p>New Confirmed</p> ${getData.Countries[countriesIndex].NewConfirmed}</div>
<div><p>New Deaths</p> ${getData.Countries[countriesIndex].NewDeaths}</div>
<div><p>New Recovered</p> ${getData.Countries[countriesIndex].NewRecovered}</div>
</div>
</div>`;
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=News+Cycle:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container tracker-container">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="covid-header">Covid-19 Daily Tracker</h1>
<p class="covid-description">A daily tracker of the Covid-19 virus, enter the country in the search bar to recieve the report.</p>
<p class="covid-description">Report is given from the "covid19api" API.</p>
</div>
</div>
<div class="info-box">
<form>
<div class="form-row input-row">
<div class="col-12 form">
<label for="country-input">Enter country's name</label>
<input type="text" class="form-control" id="input-text" value="" required>
<button type="button" class="btn btn-success btn-block" id="submit-btn">Get Statistics</button>
</div>
</div>
</form>
<div class="api-data">
</div>
</div>
</div>
</body>
<script src="tracker.js"></script>
</html>
The else part is replaced. If countriesIndex is not updated from 0 , that means the data is not found.
Fixed Code:
let btn = document.getElementById("submit-btn");
//set variable btn to the html button id
btn.addEventListener("click",()=>{
let text = document.getElementById("input-text").value;
console.log("button was pressed");
//added a event once btn is pressed taking the value of what was typed in the form
fetch('https://api.covid19api.com/summary')
.then((covidData)=>{
return covidData.json();
})
//
.then((getData)=>{
console.log(getData);
console.log("api was contacted");
var content = document.querySelector(".api-data");
var box = content.lastElementChild;
while (box) {
content.removeChild(box);
box = content.lastElementChild;
}
var countriesIndex = 0;
for(var i = 0; i < 185; i++){
if( getData.Countries[i].Country.toLowerCase() == text.toLowerCase()){
countriesIndex = i;
break;
}
}
if(countriesIndex==0) {
var hideData = document.querySelector(".api-data");
hideData.style.display = "none";
alert("No information for that country")
}
else{
let data = document.querySelector(".api-data");
data.innerHTML = `<div class="data-boxes">
<div class="country-index">
<span>Covid-19 Cases in ${getData.Countries[countriesIndex].Country}</span>
</div>
<div class="total-data">
<div><p>Total Confirmed</p> ${getData.Countries[countriesIndex].TotalConfirmed}</div>
<div><p>Total Deaths</p> ${getData.Countries[countriesIndex].TotalDeaths}</div>
<div><p>Total Recovered</p> ${getData.Countries[countriesIndex].TotalRecovered}</div>
</div>
<div class="new-data">
<div><p>New Confirmed</p> ${getData.Countries[countriesIndex].NewConfirmed}</div>
<div><p>New Deaths</p> ${getData.Countries[countriesIndex].NewDeaths}</div>
<div><p>New Recovered</p> ${getData.Countries[countriesIndex].NewRecovered}</div>
</div>
</div>`;
}
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=News+Cycle:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container tracker-container">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="covid-header">Covid-19 Daily Tracker</h1>
<p class="covid-description">A daily tracker of the Covid-19 virus, enter the country in the search bar to recieve the report.</p>
<p class="covid-description">Report is given from the "covid19api" API.</p>
</div>
</div>
<div class="info-box">
<form>
<div class="form-row input-row">
<div class="col-12 form">
<label for="country-input">Enter country's name</label>
<input type="text" class="form-control" id="input-text" value="" required>
<button type="button" class="btn btn-success btn-block" id="submit-btn">Get Statistics</button>
</div>
</div>
</form>
<div class="api-data">
</div>
</div>
</div>
</body>
<script src="tracker.js"></script>
</html>

System.Data.Entity.DynamicProxies foreach

I've tried to loop out every "category" there is in my database, and put it into the dropdown, but instead it gives me a long code starting of with this:
System.Data.Entity.DynamicProxies
I'm not entirely sure why? And how to fix it. At first i thought it was due to me not having the "categories" in the same model, but as i joined it in the same model, nothing really seemed to change.
So I've tried to search around the internet, but I couldn't seem to find something that resembled the problem that i had.
So I want to know, whats causing it, and what kind of solutions are available in this case scenario?
What i tried to do:
Loop out the categories from the database into the dropdown menu so that all the categories were shown, without typing them in the html _layout file.
Heres my code:
function dropFunction() {
document.getElementById("inDrop").classList.toggle("show");
}
window.onclick = function (event) {
if (!event.target.matches('.dropBtn')) {
var dropdowns = document.getElementsByClassName("dropCon");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
#model Fisk.Models.ALL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<link href="~/Content/css/Common.min.css" rel="stylesheet" />
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<h2>Fisk.nu</h2>
</div>
<div class="col-lg-4">
<form action="/" method="post">
<input type="text" name="name" value="" class="col-md-8" />
<input type="button" name="name" value="Søg" class="col-md-3" />
</form>
</div>
</div>
<ul id="navMenu">
<li>Forsiden</li>
<li class="dropdown">
<button onclick="dropFunction()" class="dropBtn">Produkter</button>
<ul id="inDrop" class="dropCon">
#foreach (var item in Model.Kategorier)
{
<li class="dropList">#item</li>
}
</ul>
</li>
</ul>
#RenderBody()
<footer>
<p>Fisk.nu, Silovej 2, DK-8000 Århus C, Tlf. +45 87 11 12 13, info#fisk.nu</p>
</footer>
</div>
<script src="~/Content/js/bootstrap.min.js"></script>
<script src="~/Content/js/jquery-3.3.1.min.js"></script>
<script src="~/Content/js/Slider.js"></script>
<script src="~/Content/js/Dropdown.js"></script>
</body>
</html>
Heres the Home Controller:
public ActionResult Index()
{
var ViewModel = new Fisk.Models.ALL();
ViewModel.tekstBoks = db.front_TekstBoks.ToList();
ViewModel.Slider = db.front_Slider.ToList();
ViewModel.Kontakt = db.web_Kontakt.FirstOrDefault();
ViewModel.Kategorier = db.site_Kategorier.ToList();
List<front_Slider> sliders = new List<front_Slider>();
List<front_TekstBoks> tekstBoks = new List<front_TekstBoks>();
List<site_Kategorier> kategorier = new List<site_Kategorier>();
return View(ViewModel);
}
You have to access a property of the entity in your collection Kategorier -> Kategori, like #item.Name or something, Otherwise you're just printing the result of ToString()
<ul id="inDrop" class="dropCon">
#foreach (var item in Model.Kategorier)
{
<li class="dropList">#item.Name</li>
}
</ul>

clicking next page causes my page to slow down exponentially

this is my first time asking a question on Stack Overflow, any help would be greatly appreciated.
I have a website that displays images from the pixabay api. When i click the button, next, the next page of images is shown. The problem is that with each click, the page slows down at an exponential rate. I know this because i added a success console.log after every completion.
This is the image before:
Image Link Here.
and after
Image Link Here
I think the problem has something to do with the .getJSON call and the for loop inside that call, but I havn't been able to figure it out.
This is the Javascript and HTML
/*
Pixabay api key:
*/
$(document).ready(function () {
var searchValue = "rice"
var defaultPage = 1;
returnPhotos(searchValue, defaultPage);
$("#searchForm").on("submit", function (event) {
//obtain value from user input
searchValue = $("#searchText").val();
returnPhotos(searchValue, defaultPage);
//stops form from submitting to a file
event.preventDefault();
});
});
/*
1. Return Photos from pixabey API
*/
function returnPhotos(searchValue, pageNum) {
let key = "8712269-5b0ee0617ceeb0fd2f84487c3";
let startURL = "https://pixabay.com/api/?key=" + key;
let page = "&page=" + pageNum;
let imagesPerPage = "&per_page=" + 22
let addWH = "&min_width&min_height";
let safeSearch = "&safesearch=true";
let endingURL = "&q=" + searchValue + page + addWH + safeSearch + imagesPerPage;
// activate api and get data
$.getJSON(startURL + endingURL, function (data) {
let image = data.hits;
var imageLength = image.length;
arrayLength = image.length;
if (data) {
let output = ""
for (let x = 0; x < arrayLength; x++) {
//imageObject contains information on each image passed through the array
let imageObject = {
// id: image[x].id,
// pageURL: image[x].pageURL,
// tags: image[x].tags,
// previewURL: image[x].previewURL,
// previewWidth: image[x].previewWidth,
// previewHeight: image[x].previewHeight,
// webformatURL: image[x].webformatURL,
// webformatWidth: image[x].webformatWidth,
// webformatHeight: image[x].webformatHeight,
largeImageURL: image[x].largeImageURL,
// fullHDURL: image[x].fullHDURL,
// views: image[x].views,
// user_id: image[x].user_id,
// user: image[x].user,
// userImageURL: image[x].userImageURL
}
// output this template to the website
output += `
<div class="brick">
<img src="${imageObject.largeImageURL}">
</div>
`
}
$(".masonry").imagesLoaded(function () {
localStorage.clear();
$(".masonry").html(output);
});
console.log("success");
} else {
console.log("Didn't work");
}
getPage(searchValue, pageNum, arrayLength);
// console.log(arrayLength);
});
}
/*
2. INCREASE/Decrease PAGE
*/
function getPage(searchValue, defaultPage, max) {
if (defaultPage <= max + 1) {
$("#pagination2").click(function () {
if (defaultPage <= max) {
defaultPage++;
returnPhotos(searchValue, defaultPage);
console.log(1);
}
$(".pageNumber").html("Page " + defaultPage);
console.log("This is the default page:", defaultPage);
});
}
$("#pagination1").click(function () {
if (defaultPage != 1) {
defaultPage--;
returnPhotos(searchValue, defaultPage);
console.log(1);
}
$(".pageNumber").html("Page " + defaultPage);
console.log("This is the default page:", defaultPage);
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv='cache-control' content='no-cache'>
<title>Photo Gallery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="vendors/css/animate.min.css">
<link rel="stylesheet" href="resources/css/style.css">
<link href="data:image/x-icon;base64,AAABAAEAICAAAAEAIACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+4z/L/pMLv//j6/f///////v7//6vG8P+lwu//5u76/3ek5/+70fP///////7+/v+wyvH/daLn/9Hg9////////////////////////////////////////////////////////////////////////////////////////////1SM4f8kbNn/8PX8///////H2vX/CFnU/4yy6v/W4/j/ClvU/4St6f//////y9z2/xVi1v9QiuD/9Pf9////////////////////////////////////////////////////////////////////////////////////////////VIzh/yRs2f/w9fz/9Pf9/z9+3f9Egd7/8/f9/9bj+P8KW9T/hK3p/+7z+/8ob9n/LXLa//D0/P////////////////////////////////////////////////////////////////////////////////////////////////9UjOH/JGzZ/87e9v+Bqun/CVrU/8zc9v//////1uP4/wpb1P9+qej/ZZfk/xdj1v/J2/X//////////////////////////////////////////////////////////////////////////////////////////////////////1SM4f8kbNn/jrPr/zB02/8RX9X/e6bo//X4/f/W4/j/ClvU/2+e5v8faNj/oL/u////////////////////////////////////////////////////////////////////////////////////////////////////////////VIzh/yRs2f/w9fz/+vz+/6zH8P8EVtP/p8Tv/9bj+P8KW9T/cqDm/yRs2f9ek+P/+fv+//////////////////////////////////////////////////////////////////////////////////////////////////////9UjOH/JGzZ//D1/P///////v7//xJf1f9vnuX/1uP4/wpb1P+ErOn/nb3t/wdY1P+cvO3//v7//////////////////////////////////////////////////////////////////////////////////////////////////1SM4f8kbNn/8PX8//7+///J2/X/BFbT/5G17P/W4/j/ClvU/4St6f/5+/7/RoLe/xZi1v/e6fn/////////////////////////////////////////////////////////////////////////////////////////////////VIzh/yRs2f+au+3/RYLe/xdj1v9bkeL/7/T8/9bk+P8MXNX/ha3q///////W4/f/GmXX/0iE3//1+P3///////////////////////////////////////////////////////////////////////////////////////////+70fP/p8Tv/8fZ9f+jwe//xtn1/8nMz/+Ojo7/vcDG/77S8v/f6fn///////7+/v/P3/b/wNT0//T4/f/////////////////////////////////////////////////////////////////////////////////////////////////////////////////39/f/aWlp/9jY2P9ycnL/29vb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////v7+/9LS0v/CwsL/9/f3//r6+v9oaGj/vr6+/2xsbP/f39//7Ozs/729vf/j4+P//v7+//////////////////////////////////////////////////////////////////////////////////////////////////////+7u7v/f39//6CgoP+JiYn//v7+/+Hh4f+pqan/29vb//n5+f9mZmb/qqqq/2xsbP/h4eH//////////////////////////////////////////////////////////////////////////////////////////////////////6urq/+ampr/0NDQ/3d3d//9/f3/rMfw/9nl+P+zzPH/9vb2/2RkZP/c3Nz/eXl5/9jY2P//////////////////////////////////////////////////////////////////////////////////////////////////////9/f3/5mZmf+Li4v/5OTk/+Hr+f+Msuv/ydv1/42y6//u9Pz/ysrK/4aGhv+0tLT//Pz8/////////////////////////////////////////////////////////////////////////////////////////////////////////////Pz8//j4+P/4+v3/XJHi/+Xt+v//////irHq/7nQ8//+/v7/9fX1//7+/v///////////////////////////////////////////////////////////////////////////////////////////////////////////9nZ2f9ra2v/b29v/7e3t//k7fr/bp3l/6C/7v+xyvH//Pz8/42Njf91dXX/eHh4//Dw8P//////////////////////////////////////////////////////////////////////////////////////////////////////o6Oj/7a2tv/t7e3/bW1t//b4/P/U4vf/4Or5/+nw+//z8/P/ZmZm//b29v+FhYX/09PT///////////////////////////////////////////////////////////////////////////////////////////////////////g4OD/eXl5/3l5ef+/v7///Pz8/6Kiov+FhYX/vr6+//39/f+Xl5f/gYGB/4WFhf/z8/P////////////////////////////////////////////////////////////////////////////////////////////////////////////4+Pj/9PT0///////Ozs7/hoaG/97e3v9tbW3/6+vr//39/f/w8PD//f39/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+fn5/9vb2//mpqa/3d3d//09PT//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+Dg4P/IyMj/7e3t////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="
rel="icon" type="image/x-icon" />
</head>
<body>
<div class="container">
<nav class="nav">
<h1>
<a class="brand-logo" href="index.html">Photo Gallery</a>
</h1>
</nav>
<!-- IMAGE search box-->
<div class="header">
<div>
<h3 class="text-center">Search For Any Image</h3>
<form id="searchForm" autocomplete="off">
<input type="text" class="form-control" id="searchText" placeholder="Search Image Here">
</form>
<h4 class="from-pixabay">Images from Pixabay</h4>
</div>
<div class="paginations">
Previous
<p class="pageNumber">Page 1</p>
Next
</div>
</div>
<!-- IMAGES GO HERE -->
<div class="masonry">
</div>
</div>
<!-- Pre-footer -->
<!--SECTION Contact-Footer -->
<footer class="footer-section" id="contact">
<div class="rows-container">
<div class="footer-con">
<div class="homepage-link">
<a href="http://rkdevelopment.org" target="_blank">
<h3>Rkdevelopment.org</h3>
</a>
</div>
<ul class="social-list center">
<li>
<a href="https://github.com/RexfordK" target="_blank">
<i class="ion-social-github"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/rexford-koduah" target="_blank">
<i class="ion-social-linkedin"></i>
</a>
</li>
<li>
<a href="https://www.freecodecamp.org/rexfordk" target="_blank">
<i class="ion-fireball"></i>
</a>
</li>
</ul>
<p>Copyright © 2018 by Rexford Koduah. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<script src="resources/js/main.js"></script>
</body>
</html>
Every time you call getPage, you are adding another $("#pagination2").click handler. Which means the first time you click it, you do one ajax request. The second time you do two, the third time you do three, etc. You need to either only setup the click handler once, and make sure your logic reflects that, or clear the old one each time with $("#pagination2").off('click').click(

Uncaught ReferenceError: sendcard is not defined

Ok so i keep getting this error but have no idea why... And yes i have checked other similar posts but nothing helped. Here is the error:
Uncaught ReferenceError: sendcard is not defined
onclick # kikcards.html:102
which is:
<tr><td colspan=2 align=center><img src="/Images/generate.png" width=150 onclick="sendcard()"></td></tr>
All the code i have:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kik Cards | Crazii</title>
<link rel="stylesheet" type="text/css" href="/-default.css"/>
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link id="kikicon" rel="kik-icon" href="kik.png"/>
<script src="/navOpen.js"></script>
<script src="https://cdn.kik.com/kik/2.0.5/kik.js"></script>
</head>
<body class="body">
<nav id="mainNav">
<div id="logo">
<span>C</span>razii<span> </span>
</div>
<div id="mobileToggle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<ul id="mainMenu">
<li>
Home
</li>
<li>
About
</li>
<li>
PS3 Modding
</li>
<li>
PDFs
</li>
<li>
Kik Cards
</li>
</ul>
</nav>
<div class="mainContent">
<div class="content">
<article class="Content1">
<header>
<h2> Kik Cards</h2>
</header>
<footer>
<p class="post-info"> <br> </p>
</footer>
<content>
<p>
<table>
<tr><td style="text-align:right">Title:</td><td><input id="title"></td></tr>
<tr><td style="text-align:right">Text (optional):</td><td><input id="text"></td></tr>
<tr><td style="text-align:right">Main Title:</td><td><input id="maintitle"></td></tr>
<tr><td style="text-align:right">Little Icon (URL, optional):</td><td><input id="icon"></td></tr>
<tr><td style="text-align:right">Big Picture (URL, optional):</td><td><input id="pic">(If nothing is entered here, the default icon will be used)</td></tr>
<tr><td style="text-align:right">Redirect URL (optional):</td><td><input id="redirect"></td></tr>
<tr><td style="text-align:right">Big picture? (hides the title)</td><td><input type="checkbox" id="big"></td></tr> <!-- document.getElementById(big).checked -> bool -->
<tr><td style="text-align:right">Forward-able?</td><td><input type="checkbox" id="forward" checked=true></td></tr>
<tr><td colspan=2 align=center><img src="/Images/generate.png" width=150 onclick="sendcard()"></td></tr>
</table>
</p>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p> Copyright © 2015 <a href="#" title="Crazii"><b>Crazii</b></p>
</footer>
<script>
window.onload = function()
{
if (kik.message && kik.message['url']!="") {
window.location.replace(kik.message['url']);
}
var title = "";
var maintitle = "";
var body = "";
var display = "";
var bigpicture = "";
var forwardable = "";
var redirect = "";
function precede(str, check_for) {
return str.slice(0, check_for.length) == check_for;
}
function sendcard() {
title = document.getElementById("title").value;
maintitle = document.getElementById("maintitle").value;
if (maintitle=="") {
maintitle = "Kik Cards | Crazii";
}
body = document.getElementById("text").value;
document.getElementById("kikicon").href = document.getElementById("icon").value;
display = document.getElementById("pic").value;
if (display == "") {
display = "http://crazii.herobo.com/Images/kik.png";
}
bigpicture = document.getElementById("big").checked;
if (document.getElementById("forward").checked == true) {
forwardable = false;
} else {
forwardable = true;
}
redirect = document.getElementById("redirect").value;
if (precede(redirect, "http://")) {
redirect = redirect;
} else if (precede(redirect, "https://")) {
redirect = redirect;
} else if (redirect == "") {
redirect = "http://crazii.herobo.com";
} else {
redirect = "http://"+redirect;
}
document.getElementById("webtitle").innerHTML = maintitle;
kik.send({
title: title,
text: body,
pic: display,
big: bigpicture,
noForward: forwardable,
data: {'url': redirect}
});
}
}
</script>
</body>
</html>
In advance i appreciate any help i can get, thanks!
The function sendcard() is defined within the scope of the window.onload callback, as of that it is not visible in the global scope.
To self this you cab use addEventListener.
You need the be able to find your element, e.g. by adding an id to it:
<img src="/Images/generate.png" width=150 id="sendcard">
Then in your window.onload you search for that element, and add an event listener:
document.getElementById("sendcard").addEventListener("click",sendcard, false);
You could also think of moving the sendcard definition out of the callback, but then you would pollute the global scope which should be avoided.
Try this:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kik Cards | Crazii</title>
<link rel="stylesheet" type="text/css" href="/-default.css"/>
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link id="kikicon" rel="kik-icon" href="kik.png"/>
<script src="/navOpen.js"></script>
<script src="https://cdn.kik.com/kik/2.0.5/kik.js"></script>
</head>
<body class="body">
<nav id="mainNav">
<div id="logo">
<span>C</span>razii<span> </span>
</div>
<div id="mobileToggle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<ul id="mainMenu">
<li>
Home
</li>
<li>
About
</li>
<li>
PS3 Modding
</li>
<li>
PDFs
</li>
<li>
Kik Cards
</li>
</ul>
</nav>
<div class="mainContent">
<div class="content">
<article class="Content1">
<header>
<h2> Kik Cards</h2>
</header>
<footer>
<p class="post-info"> <br> </p>
</footer>
<content>
<p>
<table>
<tr><td style="text-align:right">Title:</td><td><input id="title"></td></tr>
<tr><td style="text-align:right">Text (optional):</td><td><input id="text"></td></tr>
<tr><td style="text-align:right">Main Title:</td><td><input id="maintitle"></td></tr>
<tr><td style="text-align:right">Little Icon (URL, optional):</td><td><input id="icon"></td></tr>
<tr><td style="text-align:right">Big Picture (URL, optional):</td><td><input id="pic">(If nothing is entered here, the default icon will be used)</td></tr>
<tr><td style="text-align:right">Redirect URL (optional):</td><td><input id="redirect"></td></tr>
<tr><td style="text-align:right">Big picture? (hides the title)</td><td><input type="checkbox" id="big"></td></tr> <!-- document.getElementById(big).checked -> bool -->
<tr><td style="text-align:right">Forward-able?</td><td><input type="checkbox" id="forward" checked=true></td></tr>
<tr><td colspan=2 align=center><img src="imgh.jpg" width=150 onclick="sendcard()" /></td></tr>
</table>
</p>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p> Copyright © 2015 <a href="#" title="Crazii"><b>Crazii</b></p>
</footer>
<script>
if (kik.message && kik.message['url']!="") {
window.location.replace(kik.message['url']);
}
var title = "";
var maintitle = "";
var body = "";
var display = "";
var bigpicture = "";
var forwardable = "";
var redirect = "";
function precede(str, check_for) {
return str.slice(0, check_for.length) == check_for;
}
function sendcard() {
alert("sdf");
title = document.getElementById("title").value;
maintitle = document.getElementById("maintitle").value;
if (maintitle=="") {
maintitle = "Kik Cards | Crazii";
}
body = document.getElementById("text").value;
document.getElementById("kikicon").href = document.getElementById("icon").value;
display = document.getElementById("pic").value;
if (display == "") {
display = "http://crazii.herobo.com/Images/kik.png";
}
bigpicture = document.getElementById("big").checked;
if (document.getElementById("forward").checked == true) {
forwardable = false;
} else {
forwardable = true;
}
redirect = document.getElementById("redirect").value;
if (precede(redirect, "http://")) {
redirect = redirect;
} else if (precede(redirect, "https://")) {
redirect = redirect;
} else if (redirect == "") {
redirect = "http://crazii.herobo.com";
} else {
redirect = "http://"+redirect;
}
document.getElementById("webtitle").innerHTML = maintitle;
kik.send({
title: title,
text: body,
pic: display,
big: bigpicture,
noForward: forwardable,
data: {'url': redirect}
});
}
</script>
</body>
</html>
Remove :- window.onload = function()
{
and end image tag

angularjs. Display object property after http.get

I am new to Angular.js and i did the tutorial Shaping up with angularjs in codeschool.com so please forgive me if the problem i am trying to solve might be too easy to resolve.
So, i am just trying to show a data i get from $http.get() which is JSON object into my document.
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>League of legends</title>
<!-- Load StyleSheets -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Load Javascript Libraries -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="LeagueOfLegends">
<!-- Navbar menu -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ng-controller="searchSummoner as summoner">
<!-- Search Form -->
<div ng-show="summoner.status.showSearch">
<form ng-submit="summoner.search()">
<div class="well">
<div class="form-group">
<label for="summonerName">Summoner Name</label>
<input type="text" class="form-control" placeholder="Enter Summoner Name" id="summonerName" ng-model="summoner.form.name">
</div>
<div class="form-group">
<label ng-repeat="region in summoner.region">
<input type="radio" ng-model="summoner.form.region" ng-value="region">{{region}}
</label>
</div>
<input type="submit" class="btn btn-default" value="Search"></input>
</div>
</form>
</div>
<p ng-show="summoner.status.showResult">Get request from: {{summoner.data.name}}</p>
</div>
</div>
</body>
app.js (module-controller):
var app = angular.module('LeagueOfLegends', []);
app.controller('searchSummoner', ['$http', function($http)
{
var form = {};
this.data = {};
this.form = {};
this.status = {
showSearch: true,
showResult: false
};
this.region = ['br', 'eune', 'euw', 'lan', 'las', 'na', 'oce', 'kr', 'tr'];
this.search = function()
{
form = this.form;
this.form = {};
// get data from the api rest
$http.get(getApiUrl(form)).success(function(data){
this.data = data[form.name];
console.log(this.data);
});
// hide form
this.status.showSearch = false;
this.status.showResult = true;
};
}]);
function getApiUrl(form)
{
var apiKey = 'fe9eb24f-5800-4f2a-b570-15328062b341';
return 'https://lan.api.pvp.net/api/lol/' + form.region + '/v1.4/summoner/by-name/' + form.name + '?api_key=fe9eb24f-5800-4f2a-b570-15328062b341'
}
after $http.get was successfully made, i make a log just to check if the data i retrieve is the one i need, but it does not show the object property in html
You're using this in the wrong closure. This is what you should do :
var that = this;//give controller scope access
// get data from the api rest
$http.get(getApiUrl(form)).success(function(data){
that.data = data[form.name];
console.log(that.data);
});
You could also bind your context like this:
$http.get(getApiUrl(form)).success(function(data){
this.data = data[form.name];
console.log(this.data);
}.bind(this));
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Categories