API call with angularJS and Rotten Tomato - javascript

Right now I am just trying to get the API call to work, nothing fancy. In the end I will only want some basic info like name, runtime, rating and description... but that is all later. I can't even get the API call to work.
I have done several tutorials and I seem to be missing something.
HTML
<head>
<title>Watch a movie!</title>
<meta charset = "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-route.min.js"></script>
<script src="controllers/movies.js"></script>
</head>
<body>
<div id="wrapper">
<button type="button" class="btn btn-primary btn-lg btn-block">NOW PLAYING</button>
<button type="button" class="btn btn-default btn-lg btn-block">COMING FRIDAY</button>
<!-- PLACEHOLDER -->
<div id="movieInfoBox">
<div ng-controller = "movieController">{{movies}}</div>
</div>
</div> <!-- END WRAPPER -->
JS
var movies = angular.module("movies", []); //quotes are name of this file
movies.controller("movieController", function ($scope, $http){ //quotes are name of function called in index
$http.jsonp("http://api.rottentomatoes.com/api/public/v1.0/movies/155655062.json?apikey=wq98h8vn4nfnuc3rt2293vru")
.sucess(function(data)
{$scope.movies = data;})
.error(function(data){});
});

You have to include the JSON_CALLBACK in the URL. Otherwise the API returns JSON instead of JSONP. In the code below I use a config object instead of the parameters directly in the query string. It's just because it's easier to read, you can also use your version and add &callback=JSON_CALLBACK to the URL. See 'jsonp' in the docs
Working Fiddle: http://jsfiddle.net/pascalockert/fM7jb/
Code in the controller:
$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies/155655062.json', {
params: {
apikey: 'wq98h8vn4nfnuc3rt2293vru',
callback: 'JSON_CALLBACK'
}
})
.success(function (data) {
$scope.movies = data;
});

Related

HTML does not recognize external JS file function

I want to create a simple JS function where I click on a button, and the background changes into the color of that button. I have used an external JS file but even though I have used the function, it shows this error :'changecolor' is defined but never used.
here's the code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<span onclick="changecolor('grey')" class="button" id="grey"></span>
<span onclick="changecolor('white')" class="button" id="white"></span>
<span onclick="changecolor('blue')" class="button" id="blue"></span>
<span onclick="changecolor('yellow')" class="button" id="yellow"></span>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor (id) {
document.body.style.background = document.getElementById(id).innerHTML
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<span onclick="changecolor('grey')" class="button" id="grey"></span>
<span onclick="changecolor('white')" class="button" id="white"></span>
<span onclick="changecolor('blue')" class="button" id="blue"></span>
<span onclick="changecolor('yellow')" class="button" id="yellow"></span>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor (id) {
document.body.style.background = id;
}
now tell me if it works or not :)
Move script tag into the head section. Or at least put function declaration before its usage (move script tag to the very top of body).
Be sure to use a script tag at the end of the body where you are including the JS file. And to consume the functions of the JS file you should use them bellow the include of the file. This is the recommended approach.
Your tag's greater than mark is in the wrong place.
Move it right after and
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<div id="switch"><!--dont delete this div its here to avoid js to select all elements with class button -->
<span class="button" id="grey"></span>
<span class="button" id="white"></span>
<span class="button" id="blue"></span>
<span class="button" id="yellow"></span>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor(id) {
document.body.style.background = id;
}
var rootElem = document.querySelector("#switch");
var buttonArr = rootElem.querySelectorAll(".button");
for (let i = 0; i < buttonArr.length; i++){
buttonArr[i].addEventListener('click', function(){
changecolor(buttonArr[i].id);
}
}
Just drop the name or hex of the color in the id of the button and add as many as you want
Warning Dont remove div with id switch and dont alter the class of the
buttons used for the switching color

instantsearch menuselect widget is not working sometimes on IE

Now I'm developing search page by using algolia widgets.
If I don't use menuselect widget, my web page is running well in IE.
But If I use menuselect widget, algolia widgets following menuselect are not displayed.
So I have tried to test only menuselect widget.
Following code shows my test file.
var searchDiscover = instantsearch({
indexName: 'demo_ecommerce',
searchClient: algoliasearch('B1G2GM9NG0', 'aadef574be1f9252bb48d4ea09b5cfe5'),
routing: false,
});
var widget = instantsearch.widgets.menuSelect({
container: '#brand-list',
attribute: 'brand',
});
searchDiscover.addWidget(widget);
searchDiscover.start();
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="./manifest.webmanifest" />
<link rel="shortcut icon" href="./favicon.png" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/instantsearch.css#7/themes/algolia-min.css"
/>
<link rel="stylesheet" href="./src/index.css" />
<link rel="stylesheet" href="./src/app.css" />
<title>ais-ecommerce-demo-app</title>
</head>
<body>
<div class="ais-InstantSearch">
<h1>InstantSearch.js e-commerce demo</h1>
<div class="left-panel">
<div id="clear-refinements"></div>
<h2>Brands</h2>
<div id="brand-list"></div>
</div>
<div class="right-panel">
<div id="searchbox" class="ais-SearchBox"></div>
<div id="hits"></div>
<div id="pagination"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/algoliasearch#3.32.0/dist/algoliasearchLite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js#3.0.0"></script>
<script src="./src/app.js"></script>
</body>
</html>
It is working on Chrome, but not working on IE.(I can't see menuselect on IE).
In other hand, I can see menuselect live example in following url, but not find code.
https://instantsearchjs.netlify.com/stories/?selectedKind=MenuSelect&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
What's wrong in my code?
I sloved this issue.
For the widget to work in IE, I can add polyfills to the page:
<script src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.find,Array.prototype.includes"></script>

Calling API without a page reload

HTML
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rokkitt" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="styles1.css" />
<script src="api.js"></script>
</head>
<body background="texture.jpg" class="bg">
<div class="container">
<h1> Awesome Quotes</h1>
<p>Your daily dose of wisdom.</p>
<div class="dynamic">
<button class="btn btn-primary" id="button" type="submit">Get a New Quote</button>
</div>
<div class="quote"></div>
<a href="https://twitter.com/intent/tweet?hashtags=quotes" target="_blank">
<i class="fa fa-twitter"></i></a>
</div>
</body>
</html>
JS
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
$(".quote").append(a[0].content + "<p>— " + a[0].title + "</p>")
});
these are my HTML and JS.what I'm trying to do is generate a random quote inside a div.I called an API for that.Every time I reload the page a random quote comes up.What I need to do is click the "Get a New Quote" button and get a quote without reloading the page using jquery.Plus I need to click the twitter icon to take me to twitter where i see the relevant quote already in the editor just to post.
HTML
Give your button a class so you can easily access it
<button class="btn btn-primary getnewquote" id="button" type="submit">Get a New Quote</button>
Script
var Res;
$('.getnewquote').click(function(){
//your ajax call
$.ajax({
type: "POST",
url: "Your web service url",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (json) {
Res = JSON.parse(json.d);
$(".quote").append(Res[0].content + "<p>— " + Res[0].title + "</p>")
},
failure: function (msg) {
console.log(msg);
}
});
});

Angular.js routing

Hey guys ive been trying to use routing, still new to angular though :( I have the first page already made, but am trying to make it when you click enter the next page appears on top of the current page (so basically a new page). The reason I want it to be all 1 page is so I can transfer the data from the first page onto the second page, however I can't seem to get it to load the next page... Here's my html and js so far,, not sure where im going wrong -_-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/kandi.css">
</head>
<body data-ng-app="nameBox" class="ng-scope">
<ng-view></ng-view>
<section class="frontPageBox">
<div data-ng-controller="appearCntrl">
<form action="" method="">
<input type="text" data-ng-bind="name" data-ng-model="name" placeholder="Your Name..." id="name-input">
<a type="button" class="button" href="#/kandi2" style="text-decoration:none;color:#ccc;">Enter</a>
</form>
<p style="color:#999; font-size: 1.1em;">{{"Welcome " + name}}</p>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module("nameBox", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/kandi2", {
templateUrl : "kandi2.html"
});
});
app.controller("appearCntrl", function($scope){
$scope.name = "";
$scope.data = [];
$scope.data.push(name);
});
</script>
</body>
</html>
The problem is because of the ng-view tag
<ng-view></ng-view>
Gives an <!-- ngView: undefined --> element in the DOM, there is no place to attach the view.
You could write something like:
<div ng-view></div>
Then it should work.

jQuery $.ajax() request returns empty data

I have a simple login page that sends the login information to the servlet, and in response receives one parameter which is interpreted in jQuery.
Data is sent correctly, goes to the servlet which also sets the parameter correctly (I can see that in the Firebug in the response header).
The problem is when I want to retrieve data from the returned response and assign it to a JavaScript variable. The request object is empty, while in Chrome inspect I see an alert:
Uncaught TypeError: Object has no method 'getResponseHeader'.
When I display it using console.log () does not return anything to me, no value.
<!DOCTYPE html>
<html lang="en">
<head>
<%#page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<link
href="http://minikomi.github.io/Bootstrap-Form-Builder/assets/css/lib/bootstrap.min.css"
rel="stylesheet">
<link
href="http://minikomi.github.io/Bootstrap-Form-Builder/assets/css/lib/bootstrap-responsive.min.css"
rel="stylesheet">
<link
href="http://minikomi.github.io/Bootstrap-Form-Builder/assets/css/custom.css"
rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="../js/jquery.validate.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Logowanie</title>
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/signin.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<form class="form-signin" action="Login" method="post">
<h2 class="form-signin-heading">Logowanie</h2>
<input type="email" name="email" class="form-control" id="email"
placeholder="Adres email" autofocus>
<input type="password" id="password"
name="password" class="form-control" placeholder="Haslo">
</form>
<button id="zaloguj" value="zaloguj" class="btn btn-success btn-large">
<i class="icon-white icon-th-list"></i>Zaloguj
</button>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript">
$('#zaloguj').click(function() {
var email = $("#email").val();
var password = $("#password").val();
console.log(email+password);
var data = "email=" + email + "&password=" + password;
$.ajax({
url : "Login",
type : "POST",
data : data,
success : function(request) {
console.log(request);
var log = request.getResponseHeader("log");
console.log(log);
if (log == 1) {
$( ":header" ).after("Poprawne logowanie").css({ background: "#ccc", color: "green" });
document.location.href = '/landing.html';
} else {
$( ":header" ).after("Błędne logowanie").css({ background: "#ccc", color: "red" });
}
},
});
});
</script>
</body>
</html>
Looks like your using the wrong overload for success.
success : function(request) {
console.log(request);
var log = request.getResponseHeader("log");
should be:
success : function(data, status, xhr) {
console.log(data);
var log = xhr.getResponseHeader("log");
See the docs
success Type: Function( PlainObject data, String textStatus, jqXHR
jqXHR )
Then
The jqXHR Object
The jQuery XMLHttpRequest (jqXHR) object returned by $.ajax() as of
jQuery 1.5 is a superset of the browser's native XMLHttpRequest
object. For example, it contains responseText and responseXML
properties, as well as a getResponseHeader() method.
The success function returns ( PlainObject data, String textStatus, jqXHR jqXHR ). What you are looking for is the last parameter and not the response itself.
success: function(request, status, xhr) {
console.log(xhr.getResponseHeader("log"));
}

Categories