First jquery/ajax test not working

Question

I'm trying to utilize jQuery/Ajax more in my web projects, as a test I have done: HTML Code

<div id="main_content"></div>
<div class="panel panel-primary">
    <div class="panel-heading">API Credits Left.</div>
    <div class="panel-body">
        <form id="frmAjax" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" class="form-horizontal container-fluid" role="form">
            <div class="row form-group">
                <div class="col-sm-12 text-right">
                    <button type="submit" name="submit" class="btn btn-default">Check the API credits...</button>
                </div>
            </div>
        </form>
    </div>
    <div class="panel-footer"><b>DomDetailer</b> & <b>SeoKicks</b> Api credits left.</div>
</div>

Script

$(function() {
$(document).ready(function(){
    $('#frmAjax').submit(function() {
      $("#main_content").load('ajax-credits.php');
    });
  });
});

The ajax-credits.php contents:

<?php
  echo "Loading...";
  // http://site1.com/api/checkBalance.php?apikey=QRUE8VTQMD5Fj6&app=
  $json1 = file_get_contents('http://site1.net/api/checkBalance.php?apikey=QRUE8VTQMD5F6&app='); 
  $data1 = json_decode($json1, true);
  $valu1 = $data1[1];
  // seokicks 
  $json2 = file_get_contents('http://www.site2.net/V1/inlinkData?appid=p2hFacSWU0&output=json&details=api_credits'); 
  $data2 = json_decode($json2);
  $valu2 = $data2->Overview->credits->available;
  // display
  stdmsg("Site 1 has <b>".$valu1."</b> credits left and Site 2 has <b>".$valu2."</b> credits left.");
?>

Very basic code (or so I thought) can anyone see what I have done wrong? Nothing is being displayed in the div , is there any issue?

Answer 1

Try removing echo "Loading"; and replacing

    stdmsg("Site 1 has <b>".$valu1."</b> credits left and Site 2 has <b>".$valu2."</b> credits left."); 

by

    echo "<p>Site 1 has <b>".$valu1."</b> credits left and Site 2 has <b>".$valu2."</b> credits left.</p>";

(Whatever you echo in the PHP script called by a jQuery AJAX function is what gets sent back to the AJAX function, so that is what will get loaded into your HTML div.)