jQuery.getJSON function not work on Bootstrap

Question

I was trying to do the project from Udacity intro to AJAX.

I made Google Streetview image appear in the background but after I was trying to add New York Times articles with jQuery.getJSON() method all the function get on false and lose everything I have done.

The image was disappeared and all the scripts are not functioning as well.

Can anyone help me with this issue?

function loadData() {

    var $body = $('body');
    var $wikiElem = $('#wikipedia-links');
    var $nytHeaderElem = $('#nytimes-header');
    var $nytElem = $('#nytimes-articles');
    var $greeting = $('#greeting');

    // clear out old data before new request
    $wikiElem.text("");
    $nytElem.text("");

    // load streetview
	var streetStr =$('#street').val();
	var cityStr = $('#city').val();
	var address = streetStr + ',' + cityStr;
	var mapUrl = 'http://maps.googleapis.com/maps/api/streetview?size=600x300&location=' + address + ' ';
	$greeting.text('So, you want to live at' +' ' + address +  '?');
	$body.append('<img class="bgimg" src="' + mapUrl + '">');

	//NYT articles and headline
var nytUrl = 'https://api.nytimes.com/svc/search/v2/articlesearch.json?q=' + cityStr + '&sort=newest&api-key=f704d0319c734128a3f7f681e32f2556';
	
	$.getJSON(nytUrl, function(data){
		$nytHeaderElem.text('New York Times Article about' +' ' + cityStr);
		
		var articles =data.response.docs;
		for (var i = 0; i < articles.length; i++){
			var article = articles[i];
			$nytElem.append('<li class="articles">' + '<a href="' + article.web_url+ '">' + article.headline.main + '</a>' +
						'<p>' + article.snippet + '</p>' + '</li>');
		};
	})
	
	
    // YOUR CODE GOES HERE!

    return false;
};

$('#form-container').submit(loadData);

.bgimg {
    position:fixed;
    top: 0;
    left: 0;
    width:100%;
    z-index:-1;
    opacity:1;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	 <link rel="stylesheet" href="style.css">
    <title>Your moving Companion</title>
  </head>
  <body>
	<nav class="navbar navbar-dark bg-dark text-white">
    <form id="form-container" class="form-inline">
		<div class="input-group mx-2">
			<div class="input-group-prepend">
				<span class="input-group-text" for="street" id="basic-addon1">Street</span>
			</div>
			<input type="text" id="street" value>
		</div>
       <div class="input-group mx-2">
			<div class="input-group-prepend">
				<span class="input-group-text" for="city" id="basic-addon1">City</span>
			</div>
			<input type="text" id="city" value>
		</div>
      <button class="btn btn-success" id="submit-btn">Submit</button> 
  </form>
	</nav>
	
	 <h2 id="greeting" class="greeting text-center display-4 text-light">Where do you want to live?</h2>
	 
	 <div class="container">
		<div class="row">
			<div class="nytimes-container col-md-8">
				<h3 id="nytimes-header" class="display-6 text-light">New York Times Articles</h3>
				<ul id="nytimes-articles" class="lead text-white">What's going on in your new city? Enter an address and hit submit and the NY Times will tell you here!</ul>
			</div>
			
			<div class="wikipedia-container col-md-4">
				<h3 id="wikipedia-header" class="display-6 text-light">Relevant Wikipedia Links</h3>
				<ul id="wikipedia-links">Type in an address above and find relevant Wikipedia articles here!</ul>
			</div>
			
		</div>
	</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script src="script.js"></script>
  </body>
</html>

user3190433 · Accepted Answer · 2018-05-21 12:54:11Z

3

I guess it does not work because you (respectively bootstrap in the examples) are using the "slim" variant of jQuery (https://code.jquery.com/jquery-3.2.1.slim.min.js).

getJson ist not inside of this variant.

Use the "regular" minimized variant instead: http://code.jquery.com/

answered May 21, 2018 at 12:54

user3190433

4051 gold badge4 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery.getJSON function not work on Bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related