Question

I have a mysql database containing several items and I want to change top property of footer section via jquery depending of number of items in this mysql database.

this is server side part of newsletter.php

<?php
    //allow sessions to be passed so we can see if the user is logged in
    session_start();
    //connect to the database so we can check, edit, or insert data to our users table
    $con = mysql_connect('localhost', 'user', 'pwd') or die(mysql_error());
    $db = mysql_select_db('newsletter', $con) or die(mysql_error());
    $SQL = "SELECT * FROM papers";
    if(array_key_exists('rowcount', $_GET)) {
      $query = mysql_query("select count(*) as total FROM papers");
      $result = mysql_fetch_array($query);
      $json = array('rowCount' => $result); // can add more data here
      return json_encode($json);
    }
?>

this is client side part of newsletter.php

<script>
    $.getJSON('newsletter.php?rowCount', function(data) {
        var jsonData = $.parseJSON(data);
        var ntop = jsonData.rowCount * 250;
        $('#footer').css('top', ntop);
    });
</script>

This is theorical solution but the browser send an error log ‘jsonData is null’

Answer 1

One way to do this would be to provide an endpoint JQuery can query through a $.post, $.get, $.ajax e.g.

$.getJSON('ajax.php?rowcount', function(data) {
  var jsonData = $.parseJSON(data);

  var ntop = jsonData.rowCount * 250;
  $('#footer').css('top', ntop);
}

and a php script something like:

if(array_key_exists('rowcount', $_GET)) {
  $query = mysql_query("select count(*) as total from table_name");
  $result = mysql_fetch_array($query);
  $json = array('rowCount' => $result); // can add more data here
  return json_encode($json);
}