title: Change function in order to have a separate JS file - AJAX, HTML and MySQL
body: <p>I'm doing a project atm and I need to display a table from MySQL in a HTML page. I have code currently that is doing this but as I am using framework 7, I need to change the JavaScript function so that I can move the function to a separate <code>.js</code> file instead of having all the code in my HTML file. I literally want the code to do exactly what it's doing right now but just from two separate files, any ideas on how go change the function?</p>
  
  <p>My code currently is;</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://code.jquery.com/jquery-1.10.1.min.js"&gt;
  &lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $.post("https://cs1.ucc.ie/~lmm12/ProjectTraining/api.php",function(postresult){
      $("body").append(postresult);
      });
  });
  
  &lt;/script&gt;
  
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
   
  &lt;h3&gt;A jQuery post demo with MySQL DB and PHP&lt;/h3&gt;
  
   
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the corresponding PHP file increase that helps;</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  //remove space in PHP tag 
  $dbhostname = '--';
   
  $dbusername = '--';
   
  $dbpassword = '--';
   
  $conn = mysqli_connect($dbhostname, $dbusername, $dbpassword);
   
  if(! $conn )
   
  {
   
    die('Could not connect: ' . mysqli_error());
   
  }
   
  //echo 'MySQL Connected successfully'."&lt;BR&gt;";
   
  mysqli_select_db($conn, "--") or die(mysqli_error());
   
  //echo "Connected to Database"."&lt;BR&gt;";
   
  $emp_salary = 7000;
   
  $emp_id = 3;
   
  $sql_statemanet = "select * from food";
   
  $rec_select = mysqli_query($conn, $sql_statemanet);
   
  if(! $rec_select )
   
  {
   
    die('Could not retrieve data: ' . mysqli_error());
   
  }
   
  //Displaying fetched records to HTML table
   
  echo "&lt;table class='demotbl'&gt;";
   
  echo "&lt;tr&gt; &lt;th&gt;Product ID&lt;/th&gt; &lt;th&gt;Product &lt;/th&gt; &lt;th&gt;Quality &lt;/th&gt; &lt;th&gt;Quantity &lt;/th&gt;&lt;/tr&gt;";
   
  // Using mysql_fetch_array() to get the next row until end of table rows
   
  while($row = mysqli_fetch_array( $rec_select )) {
   
                  // Print out the contents of each row into a table
   
                  echo "&lt;tr&gt;&lt;td&gt;";
   
                  echo $row['name'];
   
                  echo "&lt;/td&gt;&lt;td&gt;";
                  
                  echo $row['tfat'];
   
                  echo "&lt;/td&gt;&lt;td&gt;";
  
                  echo $row['calories'];
   
                  echo "&lt;/td&gt;&lt;td&gt;";
                  
                  echo $row['type'];
   
                  echo "&lt;/td&gt;&lt;/tr&gt;";                                
   
  }
   
  mysqli_close($conn);
   
  ?&gt;</code></pre>
  </div>
  </div>
  </p>