Day 42

Finally finished the intermediate II assignment with the Ajax incorporated. Here is what the Ajax looks like.

<script>
$(document).ready(function(){

$('#country_form').submit(function()
{

  $.post
  (
      $(this).attr('action'),
      $(this).serialize(),
      function(response)
     {
  // console.log(response);
         $('#results').empty();
$('#results').append('<h4>Country Information</h4>');
          $('#results').append('<p>Name: ' + response['Name'] + '</p>');
         $('#results').append('<p>Continent: ' + response['Continent'] + '</p>');
          $('#results').append('<p>Region: ' + response['Region'] + '</p>');
         $('#results').append('<p>Population: ' + response['Population'] + '</p>');
         $('#results').append('<p>Life Expectancy: ' + response['LifeExp'] + '</p>');
         $('#results').append('<p>Government Form: ' + response['GovForm'] + '</p>');
     },
      "json"
   );
return false;
});

});
</script>

Basically, this is getting the information from the process page and displaying it or "appending" it to the results id on the bottom of the index page. The .empty() makes sure that when the page is loaded there is nothing displayed until you select something.

Information (below) from the process page that is getting sent back to the index page. The information in the echo json_encode($country_data) is getting sent over and "caught" by the "function(response)" in the above script.

Here is what .empty() does. When the page is loaded, there is no info.

When a Country is selected, the information displays, with the page not having to reload to get the information.








- Kyle