CODEWITHSUNDEEP
javascriptjqueryajaxgoogle-api
Priytosh Tripathi
Priytosh Tripathi

Reputation: 5

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.

Upvotes: 0

Views: 346

Answers (1)

ohmlnz
ohmlnz

Reputation: 26

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.

Upvotes: 1

Related Questions