title: AJAX in 000webhost
body: <p>I am having problem with AJAX in 000webhost. The output for AJAX is not displaying. Also, there is no error in the Console when I inspected. </p>
  
  <p>This is my website link:
  <a href="https://cwp-geoworld.000webhostapp.com/" rel="nofollow noreferrer">https://cwp-geoworld.000webhostapp.com/</a></p>
  
  <p>The AJAX part is working fine with localhost and it can display the list of continents in the sidebar as well as a table in the middle of the page when the sidebar is clicked.</p>
  
  <p>Example of how it should look like is here:
  <a href="https://drive.google.com/open?id=1Tn5hQXepA--o4LTqBc_DzjeZ17yz830Z" rel="nofollow noreferrer">https://drive.google.com/open?id=1Tn5hQXepA--o4LTqBc_DzjeZ17yz830Z</a></p>
  
  <p>Here are the codes for the index.php which contains the AJAX code:</p>
  
  <pre><code>&lt;?php
      include("control.php");
      //require_once( "classes/session.class.php" );
      $username = Session::getInstance()-&gt;getProperty("username");
      $userRole = Session::getInstance()-&gt;getProperty("userRole");
      require_once( "classes/PDOConnection.class.php" );
      //header('Content-type: application/json');
  ?&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;title&gt;GeoWorld | Home&lt;/title&gt;
  
          &lt;!--Icon at the tab--&gt;  
          &lt;link rel="icon" type="image/png" href="images/globe_icon.png"/&gt;
          &lt;!-- Tell the browser to be responsive to screen width --&gt;
          &lt;meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"&gt;
          &lt;link rel="stylesheet" href="template/other_pages/bower_components/bootstrap/dist/css/bootstrap.min.css"&gt;
          &lt;!-- Font Awesome --&gt;
          &lt;link rel="stylesheet" href="template/other_pages/bower_components/font-awesome/css/font-awesome.min.css"&gt;
          &lt;!-- Ionicons --&gt;
          &lt;link rel="stylesheet" href="template/other_pages/bower_components/Ionicons/css/ionicons.min.css"&gt;
          &lt;!-- Theme style --&gt;
          &lt;link rel="stylesheet" href="template/other_pages/dist/css/AdminLTE.min.css"&gt;
          &lt;!-- Skins --&gt;
          &lt;link rel="stylesheet" href="template/other_pages/dist/css/skins/skin-purple.css"&gt;
          &lt;!-- Google Font --&gt;
          &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"&gt;
      &lt;/head&gt;
  
      &lt;body class="hold-transition skin-purple sidebar-mini"&gt;
          &lt;!--WRAPPER--&gt;
          &lt;div class="wrapper"&gt;
              &lt;!-- Main Header --&gt;
              &lt;header class='main-header'&gt;
                  &lt;!-- Logo --&gt;
                  &lt;a href='index.php' class='logo'&gt;
                  &lt;!-- mini logo for sidebar mini 50x50 pixels --&gt;
                  &lt;span class='logo-mini'&gt;&lt;i class='fa fa-globe'&gt;&lt;/i&gt;&lt;b&gt;Geo&lt;/b&gt;&lt;/span&gt;
                  &lt;!-- logo for regular state and mobile devices --&gt;
                  &lt;span class='logo-lg'&gt;&lt;b&gt;Geo&lt;/b&gt;World&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;!-- Header Navbar --&gt;
                  &lt;nav class='navbar navbar-static-top' role='navigation'&gt;
                      &lt;!-- Sidebar toggle button--&gt;
                      &lt;a href='#' class='sidebar-toggle' data-toggle='push-menu' role='button'&gt;
                          &lt;span class='sr-only'&gt;Toggle navigation&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;div class="navbar-custom-menu"&gt;
                          &lt;ul class="nav navbar-nav"&gt; 
                              &lt;!--Include Conditions for Navbar--&gt;
                              &lt;?php include ('include/navbar.php'); ?&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
              &lt;/header&gt;   
              &lt;!--Include Sidebar--&gt;
              &lt;?php include ('include/sidebar.php'); ?&gt;
  
  
              &lt;!-- CONTENT WRAPPER --&gt;
              &lt;div class="content-wrapper"&gt;
                  &lt;!-- Content Header (Page header) --&gt;
                  &lt;section class="content-header"&gt;
                  &lt;h1 align='center'&gt;
                      Welcome to GeoWorld
                  &lt;/h1&gt;
                  &lt;/section&gt;
                  &lt;!-- Main content --&gt;
                  &lt;section class="content container-fluid"&gt;
                      &lt;!-- search form (Optional) --&gt;
                      &lt;div id="searchTextBox"&gt;
                          &lt;div class="input-group"&gt;
                          &lt;input type="text" id='search' name="search_country" maxlength=3 class="form-control" placeholder="Search for a country here..."&gt;
                          &lt;span class="input-group-btn"&gt;
                              &lt;button type="submit" id='search-btn' class="btn btn-flat"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;
                              &lt;/button&gt;
                              &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;!-- /.search form --&gt;
                      &lt;br/&gt;
                      &lt;div class="searchResults"&gt;&lt;/div&gt;&lt;br/&gt;
                      &lt;div class="box-body"&gt;
                          &lt;div id="records"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;&lt;!-- /.content --&gt;
              &lt;/div&gt;&lt;!-- /.content-wrapper --&gt;
          &lt;/div&gt;&lt;!-- ./wrapper --&gt;
  
          &lt;!-- Modal for show more details about country --&gt;
          &lt;div class="modal fade" id="countryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-dialog" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;h5 class="modal-title" id="exampleModalLabel"&gt;More details about the country&lt;/h5&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;&lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;!--&lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;--&gt;
                          &lt;!--&lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;--&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Modal for show details about city --&gt;
          &lt;div class="modal fade" id="cityModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-dialog" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;h5 class="modal-title" id="exampleModalLabel"&gt;City details&lt;/h5&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;&lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;!--&lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;--&gt;
                          &lt;!--&lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;--&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Modal to update HOS --&gt;
          &lt;div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-dialog" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Edit details&lt;/h5&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;&lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Modal to upload flag --&gt;
          &lt;div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-dialog" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Upload Flag&lt;/h5&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;!-- REQUIRED JS SCRIPTS --&gt;
  &lt;script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"&gt;
  &lt;script src="http://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;!-- jQuery 3 --&gt;
  &lt;script src="template/other_pages/bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Bootstrap 3.3.7 --&gt;
  &lt;script src="template/other_pages/bower_components/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;!-- AdminLTE App --&gt;
  &lt;script src="template/other_pages/dist/js/adminlte.min.js"&gt;&lt;/script&gt;
  
  &lt;!--script for displaying continents and countries records--&gt;  
  &lt;script type="text/javascript"&gt; 
      $(document).ready(function(){
          //$('#searchTextBox').hide();
          $('.records').hide();
  
          $("input[name='search_country']").on('keypress', function (e) {
              var charCode = e.which;
              if ((charCode &gt; 64 &amp;&amp; charCode &lt; 91) || (charCode &gt; 96 &amp;&amp; charCode &lt; 123) || charCode == 8)
                  return true;
              else
                  return false;
          });
      });
  
      $(function()
      {
          $.getJSON( "showAllContinents.php", function(obj) 
          { 
              $.each(obj, function(key, value) 
              { 
                  var sidebarOption = "";
                  //sidebarOption = '&lt;input type="hidden" value="showAllContinents" name="action"/&gt;';
                  sidebarOption += '&lt;li&gt;';
                  sidebarOption += '&lt;a data-id="'+value.ID+'" class="sidebar-country"&gt;';
                  sidebarOption += value.Name;
                  sidebarOption += '&lt;/a&gt;';
                  sidebarOption += '&lt;/li&gt;';
  
                  $(".treeview-menu").append(sidebarOption);
              });
          });//end of $.getJSON function
  
          $("#options_continent").change(function() {
              getCountryRecords($(this).val());
          });//end of option function      
  
          $(document).on('click', '.sidebar-country', function() {
              getCountryRecords($(this).attr('data-id'));
          });
  
          //to show LifeExpectancy, GNP and HOS when button is clicked    
          $("#records").on("click", "#tbl_countries button#more_details",function()
          {
              $(".modal-body").empty();
              var A3Code = $(this).val();
              $(".records").show();
              $.get( 
                  'showCountryDetails.php',
                  {A3Code: A3Code},
                  function(data)
                  {
                      console.log(data);
                      //var result= $.parseJSON(data);
                      //console.log(result);
                      var string ='&lt;table id="tbl_countries" class="table table-bordered table-hover"&gt;&lt;tr&gt;&lt;th&gt;Life Expectancy&lt;/th&gt;&lt;th&gt;GNP&lt;/th&gt;&lt;th&gt;Head of State&lt;/th&gt;&lt;/tr&gt;';
                      $.each( data, function( key, value ) 
                      { 
                          $(".records").empty();
                          string  += "&lt;tr&gt;"
                                  +"&lt;td&gt;"+value['LifeExpectancy'] +"&lt;/td&gt;"
                                  +"&lt;td&gt;"+value['GNP']+"&lt;/td&gt;"
                                  +"&lt;td&gt;"+value['HeadOfState']+"&lt;/td&gt;"
                                  +"&lt;/tr&gt;";
                      }); 
  
                      string += '&lt;/table&gt;'; 
                      $(".modal-body").append(string);
                  } //end of function data
              ); //end of get
  
          });//end of click button 
  
  
          //to show city details when button is clicked   
          $("#records").on("click", "#tbl_countries button#city_details",function()
          {
              $(".modal-body").empty();
              var A3Code = $(this).val();
              $(".records").show();
              $.get( 
                  'showCityDetails.php',
                  {A3Code: A3Code},
                  function(data)
                  {
                      var string ='&lt;table id="tbl_countries" class="table table-bordered table-hover"&gt;&lt;tr&gt;&lt;th&gt;City Name&lt;/th&gt;&lt;th&gt;District&lt;/th&gt;&lt;th&gt;Population&lt;/th&gt;&lt;th&gt;Latitude&lt;/th&gt;&lt;th&gt;Longitude&lt;/th&gt;&lt;/tr&gt;';
                      $.each( data, function( key, value ) 
                      { 
                          $(".records").empty();
                          string  += "&lt;tr&gt;"
                                  +"&lt;td&gt;"+value['name'] +"&lt;/td&gt;"
                                  +"&lt;td&gt;"+value['district']+"&lt;/td&gt;"
                                  +"&lt;td&gt;"+value['population']+"&lt;/td&gt;"
                                  +"&lt;td&gt;"+value['lat']+"&lt;/td&gt;"
                                  +"&lt;td&gt;"+value['lng']+"&lt;/td&gt;"
                                  +"&lt;/tr&gt;";
                      }); 
  
                      string += '&lt;/table&gt;'; 
                      //$(".records").append(string);
                      $(".modal-body").append(string);
                  } //end of function data
              ); //end of get
  
          });//end of click button 
  
  
          //to update HOS modal box   
          $("#records").on("click", "button#update_HOS",function()
          {
              $(".modal-body").empty();
              var A3Code = $(this).val();
              $(".records").show();
              $.get( 
                  'showCountryDetails.php',
                  {A3Code: A3Code},
                  function(data)
                  {
                      console.log(data);
                      var forms='';
  
                      $.each( data, function( key, value ) 
                      { 
                          forms +='&lt;form id="updateForm" name="updateForm" action="updateHOS.php" method="post"&gt;';
                          forms +='&lt;div class="form-group"&gt;';
                          forms +='&lt;input type="hidden" id="A3Code" name="A3Code" value='+value["A3Code"]+'&gt;';
                          forms +='&lt;label class="control-label"&gt;HOS:&lt;/label&gt;';
                          forms +='&lt;input type="text" class="form-control" id="hos" name="hos" value='+value['HeadOfState']+'&gt;';
                          forms +='&lt;/div&gt;';
                          forms += '&lt;div class="form-group"&gt;'; 
                          forms += '&lt;input type="submit" class="btn-success" id="updateBtn" name="updateBtn" value="Update"&gt;';
                          forms +='&lt;/div&gt;';                   
                          forms +='&lt;/form&gt;';
                      }); 
  
                      $(".modal-body").append(forms);
                  } //end of function data
              ); //end of get
          });//end of click button */
  
  
          //to show upload flag modal box 
          $("#records").on("click", "button#upload_flag",function()
          {
              $("#uploadModal .modal-body").empty();
              var A3Code = $(this).val();
  
              $(".records").show();
              $.get( 
                  'showCountryDetails.php',
                  {A3Code: A3Code},
                  function(data)
                  {
                      console.log(data);
                      var uploadForm='';
  
                      $.each( data, function( key, value ) 
                      { 
                          uploadForm +='&lt;form id="uploadFlagForm" name="uploadFlagForm" action="upload_flag.php" method="post" enctype="multipart/form-data"&gt;';
                          uploadForm +='&lt;div class="form-group" align="center"&gt;';
                          uploadForm +='&lt;input type="hidden" id="A3Code" name="A3Code" value='+value["A3Code"]+'&gt;';
                          uploadForm +='&lt;input type="file" name="fileToUpload" id="fileToUpload"&gt;';
                          uploadForm +='&lt;/div&gt;';
                          uploadForm += '&lt;div class="form-group" align="center"&gt;'; 
                          uploadForm += '&lt;button type="submit" class="btn btn-primary" id="uploadBtn" name="uploadBtn"&gt;Upload Flag&lt;/button&gt;';
                          uploadForm +='&lt;/div&gt;';                  
                          uploadForm +='&lt;/form&gt;';
                      }); 
  
                      $("#uploadModal .modal-body").append(uploadForm);
                  } //end of function data
              ); //end of get
          });//end of click button 
  
          //To get country records    
          function getCountryRecords(id) {
              $.ajax
              ({
                  url: 'showCountryInfo.php',
                  type: 'post',
                  data: {ID:id},
                  success:function(response)
                  {
                      var userRole = "&lt;?php echo $userRole; ?&gt;";
  
                      var string = "";
  
                      //string += '&lt;input type="hidden" value="showCountryInfo" name="action"/&gt;';
                      string += '&lt;table id="tbl_countries" class="table table-bordered table-hover"&gt;';
                      string += '&lt;tr&gt;';
                      string += '&lt;th&gt;Flag&lt;/th&gt;';
                      string += '&lt;th&gt;Country Name&lt;/th&gt;';
                      string += '&lt;th width=200px&gt;Region&lt;/th&gt;';
                      string += '&lt;th&gt;Surface Area&lt;/th&gt;';
                      string += '&lt;th&gt;Population&lt;/th&gt;';
                      string += '&lt;th width=150px&gt;Independent Year&lt;/th&gt;';
                      string += '&lt;th width=100px&gt;City Details&lt;/th&gt;';
                      if (userRole === "admin")
                      {
                          string += '&lt;th width=100px&gt;More Details&lt;/th&gt;';
                          string += '&lt;th width=100px&gt;Update Details&lt;/td&gt;';
                          string += '&lt;th width=100px&gt;Upload Flag&lt;/td&gt;';
                      }
                      string += '&lt;/tr&gt;';
  
  
                  /* from result create a string of data and append to the div */
                  $.each( response, function( key, value ) 
                  {
                      //var base64URL = "";
  
                      $("#records").empty();
                      string += "&lt;tr&gt;";
                      //string += "&lt;td&gt;&lt;img src='"+value['image']+"'/&gt;&lt;/td&gt;";
                      //string += "&lt;td&gt;&lt;img src='data:image/png;base64, "+base64URL+"'/&gt;&lt;/td&gt;";
                      string += "&lt;td&gt;"+"&lt;button class='btn btn-block btn-default btn-sm' id='btnView' name='btnView' type='submit' data-id='" + value['A3Code'] + "'&gt;View&lt;/button&gt;" + "&lt;/td&gt;";
                      //string += "&lt;td&gt;"+"&lt;button class='btn btn-block btn-default btn-sm' id='btnView' name='btnView' type='submit' value='" + value['A3Code'] + "'&gt;View&lt;/button&gt;" + "&lt;/td&gt;";
                      string += "&lt;td&gt;"+value['Name']+"&lt;/td&gt;";
                      string += "&lt;td&gt;"+value['Region']+"&lt;/td&gt;";
                      string += "&lt;td&gt;"+value['SurfaceArea']+"&lt;/td&gt;";
                      string += "&lt;td&gt;"+value['Population']+"&lt;/td&gt;";
                      string += "&lt;td&gt;"+value['IndepYear']+"&lt;/td&gt;";
                      string += "&lt;td&gt;"+"&lt;button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#cityModal' id='city_details' name='city_details' type='submit' value='" + value['A3Code'] + "'&gt;&lt;span class='glyphicon glyphicon-info-sign'&gt;&lt;/button&gt;" + "&lt;/td&gt;";
                      if (userRole === "admin")
                      {
                          string += "&lt;td&gt;"+"&lt;button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#countryModal' id='more_details' name='country_details' type='submit' value='" + value['A3Code'] + "'&gt;&lt;span class='glyphicon glyphicon-info-sign'&gt;&lt;/button&gt;" + "&lt;/td&gt;";
                          string += "&lt;td&gt;"+"&lt;button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#updateModal' id='update_HOS' name='update_HOS' type='submit' value='" + value['A3Code'] + "'&gt;&lt;i class='fa fa-edit'&gt;&lt;/i&gt;&lt;/button&gt;" + "&lt;/td&gt;";
                          string += "&lt;td&gt;"+"&lt;button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#uploadModal' id='upload_flag' name='upload_flag' type='submit' value='" + value['A3Code'] + "'&gt;&lt;i class='fa fa-flag'&gt;&lt;/i&gt;&lt;/button&gt;" + "&lt;/td&gt;";
                      }
                          string += "&lt;/tr&gt;";
                  }); 
  
                  string += '&lt;/table&gt;'; 
                  $("#records").append(string); 
              }
          });
      }
  
          /*$(document).on('click', '#btnView', function(){
              window.location.href = "view_flag.php"; 
          });*/
  
          $(document).on('click', '#btnView', function(){
              var value = $(this).attr('data-id');
              window.location.href = "view_flag.php?A3Code=" + value; 
          });
  
          /*//For view flag function
          $("#btnView").on('click', function(e) {
              window.location.href = "view_flag.php";  
          });*/
  
          /*$("#view_flag").on("click",function()
          {
              window.location.href = "view_flag.php";  
          });*/
  
  
  
          //For search country function
          $("#search-btn").on("click", function () 
              {   
                  if(document.getElementById("search").value.length &lt; 3)
                  {
                      alert("The characters MUST NOT be less than 3!");
                      return false;
                  }
  
                  $("#records").empty();
                  $(".records").empty();
                  $('.searchResults').empty();
  
                  var searchCountry = $("#search").val();
  
                  $.get(
                          'searchCountryInfo.php',
                          {id: searchCountry}, //left-&gt;sql id ,right-&gt;script id
                          function (data)
                          {
                              if (!$.trim(data)){   
                                  alert("No country with that name is found!");
                                  return false;
                              }
  
                              var userRole = "&lt;?php echo $userRole; ?&gt;";
  
                              var string = "";
                              //string += '&lt;input type="hidden" value="searchCountryInfo" name="action"/&gt;';
                              string += '&lt;table id="tbl_countries" class="table table-bordered table-hover"&gt;';
                              string += '&lt;tr&gt;';
                              string += '&lt;th&gt;Flag&lt;/th&gt;';
                              string += '&lt;th&gt;Country Name&lt;/th&gt;';
                              string += '&lt;th width=200px&gt;Region&lt;/th&gt;';
                              string += '&lt;th&gt;Surface Area&lt;/th&gt;';
                              string += '&lt;th&gt;Population&lt;/th&gt;';
                              string += '&lt;th width=150px&gt;Independent Year&lt;/th&gt;';
                              string += '&lt;th width=100px&gt;City Details&lt;/th&gt;';
                              if (userRole === "admin")
                              {
                                  string += '&lt;th width=100px&gt;More Details&lt;/th&gt;';
                                  string += '&lt;th width=100px&gt;Update Details&lt;/td&gt;';
                                  string += '&lt;th width=100px&gt;Upload Flag&lt;/td&gt;';
                              }
                              string += '&lt;/tr&gt;';
  
                              // var base64URL = getBase64(data[0]['image']);
                              // console.log(base64URL);
  
                              /* from result create a string of data and append to the div */
                              $.each( data, function( key, value ) 
                              { 
  
                                  $("#records").empty();
                                  string += "&lt;tr&gt;";
                                  //string += "&lt;td&gt;"+"&lt;img src='data:image/png;base64,base64_encode("+value['image']+")"+"'/&gt;"+"&lt;/td&gt;";
                                  //string += "&lt;td&gt;"+"&lt;img src='data:image/jpeg;base64, "+base64URL+"'/&gt;&lt;/td&gt;";
                                  string += "&lt;td&gt;"+"&lt;button class='btn btn-block btn-default btn-sm' id='btnView' name='btnView' type='submit' data-id='" + value['A3Code'] + "'&gt;View&lt;/button&gt;" + "&lt;/td&gt;";                                string += "&lt;td&gt;"+value['Name']+"&lt;/td&gt;";
                                  string += "&lt;td&gt;"+value['Region']+"&lt;/td&gt;";
                                  string += "&lt;td&gt;"+value['SurfaceArea']+"&lt;/td&gt;";
                                  string += "&lt;td&gt;"+value['Population']+"&lt;/td&gt;";
                                  string += "&lt;td&gt;"+value['IndepYear']+"&lt;/td&gt;";
                                  string += "&lt;td&gt;"+"&lt;button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#cityModal' id='city_details' name='city_details' type='submit' value='" + value['A3Code'] + "'&gt;&lt;span class='glyphicon glyphicon-info-sign'&gt;&lt;/button&gt;" + "&lt;/td&gt;";
                                  if (userRole === "admin")
                                  {
                                  string += "&lt;td&gt;"+"&lt;button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#countryModal' id='more_details' name='country_details' type='submit' value='" + value['A3Code'] + "'&gt;&lt;span class='glyphicon glyphicon-info-sign'&gt;&lt;/button&gt;" + "&lt;/td&gt;";
                                  string += "&lt;td&gt;"+"&lt;button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#updateModal' id='update_HOS' name='update_HOS' type='submit' value='" + value['A3Code'] + "'&gt;&lt;i class='fa fa-edit'&gt;&lt;/i&gt;&lt;/button&gt;" + "&lt;/td&gt;";
                                  string += "&lt;td&gt;"+"&lt;button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#uploadModal' id='upload_flag' name='upload_flag' type='submit' value='" + value['A3Code'] + "'&gt;&lt;i class='fa fa-flag'&gt;&lt;/i&gt;&lt;/button&gt;" + "&lt;/td&gt;";
                                  }
                              string += "&lt;/tr&gt;";
                              }); 
  
                              string += '&lt;/table&gt;'; 
                              $("#records").append(string); 
                          }
                      );
                  }); // end of search function
  
      }); //end of big function
  &lt;/script&gt;   
  </code></pre>
  
  <p>Your help will be really appreciated. Thank you.</p>