Calling API without a page reload - javascript

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);
}
});
});

Related

Accessing to the data of an URL present in a JSON File

I would like to access to a data present in a JSON File, which it URL is present in a JSON file, it is complicated to explain, so I will tell you what I want to do:
I would like to access to get all the contributors and the last hunded commits of a given repository on github.
for that I begin by accessing the : https://api.github.com/search/repositories?q= link, by adding a repository name through a searchbar.
Let's take an example of :bootstrap4-zhcn-documentation and so I have the following link : https://api.github.com/search/repositories?q=bootstrap4-zhcn-documentation
I would like to list all the contributors, presented under the contributors_url ID :
enter image description here
after that, I would like to access the URL which is a JSON file, and get the Login ID, in this example : enter image description here
I should get "zoomla"
of course, here I have only one contributor, I would like to list them all.
THE PROBLEM IS : that I don't know how can I, via jQuery/Javascript access this URL, open it, list all the login ID and display them.
This is my code, I do have "undefined" at the Contributors section,
Thank you in advance.
$(document).ready(function() {
console.log("Ready!");
$("#SearchRep").on("keyup", function(e) {
let repository = e.target.value;
console.log(repository);
$.ajax({
// type: "method",
url: "https://api.github.com/search/repositories?q=" + repository,
data: {
"client-id": "522a9db59ec192e4cf6a",
"client-secret": "4bc5227ec0d26b14193923a1ee80afad19fe2ff6"
}
// dataType: "dataType",
// success: function (response) {
// }
}).done(function(repo) {
$("#repositoryResult").html(`
<h3 class="panel-title">Repository name: ${
repo.items[0].name
} </h3>
<h3> Contributors: ${ repo.items[1].contributors_url.login} </h3>
`);
});
});
});
body {
padding-top: 65px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Github Repositories Finder</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Github Repositories Finder</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Github Repositories Finder</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</ul>
<div class="searchContainer">
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder= "Search" id="SearchRep" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Github Public Repositories</h1>
</div>
<div id="repositoryResult"></div>
</main>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<script src="js/main.js"></script>
</body>
</html>
You will need to make another Ajax call to the Contributors URL that is returned from the first API call. Because you will only have the correct URL after the first API call is returned, your second API call needs to go in the .done() method of your first one.
$(document).ready(function() {
console.log("Ready!");
$("#SearchRep").on("keyup", function(e) {
let repository = e.target.value;
console.log(repository);
$.ajax({
// type: "method",
url: "https://api.github.com/search/repositories?q=" + repository,
data: {
"client-id": "522a9db59ec192e4cf6a",
"client-secret": "4bc5227ec0d26b14193923a1ee80afad19fe2ff6"
}
// dataType: "dataType",
// success: function (response) {
// }
}).done(function(repo) {
// HERE IS WHERE YOU MAKE A SECOND CALL TO THE CONTRIBUTORS URL
$.ajax({
url: repo.items[0].contributors_url
}).done(function(contributors) {
$("#repositoryResult").html(`
<h3 class="panel-title">Repository name: ${
repo.items[0].name
} </h3>
<h3> Contributors: ${ contributors[0].login} </h3>
`);
});
});
});
});
Be aware that this code will only display the first contributor of the first repository that is returned. You will need more complicated code to loop over repo.items[] and contributors[] (including making a separate Ajax call to each contributors_url for each repo returned) if you are wanting to display the full list, but this should give you the basic idea of what you need to do.
Thank you,
I have updated my code, not I can get the contributors, I did not use a new ajax call but instead I used a GET method inside the ajax, and I looped with a FOR loop to get all the logins, this works in the console with console.log but I don't know how to display it with HTML.
this is the new code :
$(document).ready(function() {
console.log("Ready!");
$("#SearchRep").on("keyup", function(e) {
let repository = e.target.value;
console.log(repository);
$.ajax({
// type: "method",
url: "https://api.github.com/search/repositories?q=" + repository,
data: {
"client-id": "522a9db59ec192e4cf6a",
"client-secret": "4bc5227ec0d26b14193923a1ee80afad19fe2ff6"
}
// dataType: "dataType",
// success: function (response) {
// }
}).done(function(repo) {
$("#repositoryResult").html(`
<h3 class="panel-title">Repository name: ${
repo.items[0].name
} </h3>
<p> Contributors: ${
$.get('https://api.github.com/repos/'+repo.items[0].owner.login+'/'+repo.items[0].name+'/contributors').done(function (e) {
for (let i = 0; i < e.length; i++){
console.log(e[i].login) ;
}
// console.log (e[0].login);
// console.log(e.login) ;
//});
})} </p>
`);
});
});
});
body {
padding-top: 65px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Github Repositories Finder</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Github Repositories Finder</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Github Repositories Finder</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</ul>
<div class="searchContainer">
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder= "Search" id="SearchRep" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Github Public Repositories</h1>
</div>
<div id="repositoryResult"></div>
</main>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<script src="js/main.js"></script>
</body>
</html>
jQuery doodoo
change auth / token
search for mootools-core
document.addEventListener('DOMContentLoaded', function(e) {
console.log('DOM fully loaded and parsed');
document.getElementById('SearchRep').addEventListener('keyup', function(e) {
let repository = e.target.value;
console.log(repository);
fetch(`https://api.github.com/repos/mootools/${repository}/contributors`, {
token: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
})
.then(r => {
if (!r.ok) throw new Error('Something went wrong!');
return r.json();
})
.then(r => {
console.log(r);
document.getElementById(
'repositoryResult'
).innerHTML = `<h3 class="panel-titile">Repository name: ${repository}</h3><h4>Contributors:</h4><p>${r
.map(c => `${c.login}`)
.join(', ')}</p>`;
})
.catch(console.log);
});
});

I dont get a response from Google Books API?

I am trying to make a Simple web app that can Search for books details using the Google Books API. The Code seems fine, but i dont understand what am I missing?
Here is the Code for Reference.:-
$(document).ready(function(){
$("#myform").submit(function(){
var search = $("#books").val();
if(search=='')
{
alert("Please enter something in the field");
}
else{
var url='';
var img='';
var title='';
var author='';
console.log("Search for "+search);
$.get("https://www.googleapis.com/books/v1/volumes?q="+search,function(response){
for(i=0;i<response.items.length;i++){
title=$('<h5>'+response.items[i].volumeInfo.title + '</h5>');
author=$('<h5>'+response.items[i].volumeInfo.authors + '</h5>');
img=$('<img><a href=' + response.items[i].volumeInfo.infoLink + '><button>Read More</button></a>');
url=response.items[i].volumeInfo.imageLinks.thumbnail;
img.attr('src',url);
title.appendTo("#result");
author.appendTo("#result");
img.appendTo("#result");
}
});
}
});
return false;
});
Here is the HTML Code for Reference:
<head>
<meta charset="UTF-8">
<title>Your Personal Library</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Antic'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css">
</head>
<body bgcolor="#232733">
<div align="center">
<div class="login">
<h1>The School Bag</h1>
<form id="myform">
<input type="search" id="books" placeholder="Type the book name" required="required" />
<button class="btn btn-primary btn-block btn-large" >Submit</button>
</form>
</div>
<div id="result">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="myscript.js"></script>
<!--<script src="scripts/googlebooks.js"></script>-->
<script src='https://use.edgefonts.net/amaranth.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</body>
</html>
Everything is running fine, except I cannot log any response to the Console. I am not getting any response In fact. Please help. i am stuck.
The page reloads every time you submit your form, that's why you're not getting any results back.
$("#myform").submit(function(e){
e.preventDefault()
Stop it from reloading with preventDefault() and you should be good.

How to use Bootstrap Icon Picker in Jquery

Basically, I am creating a list item that generated by jQuery script. I would like to have each list item with an icon chosen from font awesome.
My JS script to create a list and my HTML markup are as below:
<script type="text/javascript">
jQuery(document).ready(function() {
var menuID = 0;
var itemCount = 1;
$('.add-new-id').click(function() {
menuID = $('.menu-id').val();
$('.menu-id, .add-new-id').attr('disabled', 'disabled');
return false;
});
$('#new-parent').submit(function() {
var newParent = $('input.new-parent').val();
$('ol.example:last').append('<li>' + newParent + '<button class="btn btn-default" role="iconpicker"></button></li>');
itemCount++;
$('input.new-parent').val('');
return false;
});
$('body').on('click', 'button[role="iconpicker"]', function() {
$(this).iconpicker();
});
});
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/ionicons-1.5.2/css/ionicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/octicons-2.1.2/css/octicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/typicons-2.0.6/css/typicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>
<title>Menu</title>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-sm-12">
<form action="" id="new-parent">
<div class="input-group col-sm-4">
<input type="text" class="form-control new-parent" placeholder="Add parent menu">
<div class="input-group-btn">
<button class="btn btn-default add-new-parent" type="submit">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</form>
<h4>Available Forms:</h4>
<ol class="example">
</ol>
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/jquery-sortable-min.js"></script>
<!-- Icon picker script-->
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/iconset/iconset-all.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>
<!-- end script-->
</body>
</html>
For each list item icon, I would like to use Bootstrap-Iconpicker from this site. However, it does not work fine for each generated list item as you can see from screen shot and on my site.
Popup Icon Picker
By clicking on left and right arrow, or typing in text box, it does not work at all.
Please kindly test it on my demo site:
I could not find to any way to figure it out.
Please kindly help, your suggestion and solution are very much appreciate, thanks.

Opening Image File from JavaScript (doesn't work on mobile phones)

I am trying to open image files using JavaScript. It works successfully on Chrome (showing no errors), but the image refuses to show on my iPhone. Is this because the image is too large (like the DATA url is too long)?
My code uses FileReader, gets the img.src, and outputs it as an img tag as shown below:
if(window.FileReader) { //do this
$('input').change(function() {
$("#result").html("SELECTING IMAGE ... ... ...");
var fr = new FileReader;
fr.onload = function() {
var img = new Image;
img.onload = function() {
//I loaded the image and have complete control over all attributes, like width and src, which is the purpose of filereader.
$.ajax({url: img.src, async: true, success: function(result){
$("#result").html("<img src='ajax-loader.gif' />");
setTimeout(function(){
$("#result").html("<img src='" + img.src + "' /> <br/> <br/>" + "<a href='" + img.src + "'>View in browser</a>");
console.log("Finished reading Image");document.getElementById('iPUT').style.opacity=0.01;
}, 1000);
}});
};
img.src = fr.result;
};
fr.readAsDataURL(this.files[0]);
});
} else {
alert("You don't support FileReader");
}
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<title>iViewr</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body cz-shortcut-listen="true">
<div onclick="document.getElementById('iPUT').style.opacity=0.01">
<button onclick="document.getElementById('result').style.zoom=0.5;this.blur();">Zoom out</button>
<button onclick="document.getElementById('result').style.zoom=1.0;this.blur();">Zoom normal</button>
<button onclick="document.getElementById('result').style.zoom=1.5;this.blur();">Zoom in</button>
<br>
</div>
<div id="inputDIV" onclick="document.getElementById('iPUT').style.opacity=0.5"><input type="file" id="iPUT" accept="image/*" capture="camera" style="opacity: 0.5;"></div>
<div id="result">Please choose a file to view it.</div>
<script src="index.js"></script>
</body></html>
You can see it in action here at: http://iviewr.neocities.org/
Thanks in advance!
Use the URL.createObjectURL() on the file chosen by the input, as shown below.
Credits to #dandavis.
$('input').change(function(){
var resultPreview = document.getElementById('result');
var file = document.querySelector('input[type=file]').files[0]; //selects the very first file
var fr = new FileReader();
fr.addEventListener('load', function(){
//once the FileReader is loaded,
resultPreview.src = fr.result;
console.log("Finished reading Image");document.getElementById('iPUT').style.opacity=0.01;
document.getElementById('help').innerHTML="You can choose another image by tapping the screen again.";
}, false);
if (file){ //if there even is a first file
fr.readAsDataURL(file); //don't want to mess with Data URLs!! this calls the function above
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<title>iViewr</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div onclick="document.getElementById('iPUT').style.opacity=0.01">
<button onclick="document.getElementById('result').style.zoom=0.5;this.blur();">Zoom out</button>
<button onclick="document.getElementById('result').style.zoom=1.0;this.blur();">Zoom normal</button>
<button onclick="document.getElementById('result').style.zoom=1.5;this.blur();">Zoom in</button>
<br />
</div>
<div id='help'>Tap the middle of the screen to select an image for the computer to guess.</div>
<div id='inputDIV' onclick="document.getElementById('iPUT').style.opacity=0.5"><input type="file" id='iPUT' accept="image/*" capture="camera"></div>
<img id='result' src=''/>
<script src='index.js'></script>
</body>
</html>

API call with angularJS and Rotten Tomato

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;
});

Categories