Asynchronous External Content

Asynchronous External Content

Create placeholder to show weather in the navbar

nano resources/views/shared/nav.blade.php

...
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        ...
        <ul class="nav navbar-nav navbar-right">
            <li id="weather" class="navbar-text">Loading weather...</li>
        </ul>
    </div>
...

Add ajax to load weather from openweathermap api

nano resources/assets/js/weatherApi.js

function loadWeather() {
  var url = 'https://api.openweathermap.org/data/2.5/weather?q=Sao%20Paulo,br&units=metric&APPID=YOUR_APPID'
  $.getJSON(url, function(data) {
    $('#weather').html('Sao Paulo: ' + data.main.temp + ' Celsius');
  });
}

Call the api function when load the page

nano resources/assets/js/loadRemoteContent.js

...
$(function() {
    loadWeather();
});

Compile the assets

gulp

Run the server

php artisan serve

Check weather in navbar

open http://localhost:8000

Add asynchronous external content to Git

git add .
git commit -m "Add asynchronous external content"

Next step: Cached External Content