Home/ Questions/Q 7737781
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T08:05:36+00:00

I created a jQuery function that calls on a PHP server-side file that pulls

  • 0

I created a jQuery function that calls on a PHP server-side file that pulls data from a MySQL database and outputs it in JSON format. The JSON data is template’d in this function to be dynamically inserted into a DIV as list items in my HTML document.

The JSON data is good – I validated it with a tool and if I run the PHP script in a browser, it displays correctly (using JSONView in Chrome). However, I cant get the data to display in the HTML doc.

I was originally sending the data as HTML in the PHP file and this worked correctly but I was having other issues (plz see this SO question) so I desided to go about this in another way – using JSON instead and templateing it.

I’m trying to add from the database rows: label, title, discription, & gotoURL into the perspective HTML tags:

<div id="navContent">
    <li id="navItem">
        <a href="">
        <h1>Label</h1>
        <h2>Title</h2>
        <p>Dispription</p>
       </a>
   </li>
</div>

I don’t know what I have wrong in my coding; could you please look thru the snippets and edit appropriately in your answer. Thnx

Served PHP:

<?php
//MySQL Database Connect
include 'mylogin.php';

mysql_select_db("myDB");
$sql=mysql_query("select * from my_list");

$output = new stdClass();

while($row = mysql_fetch_assoc($sql)) {
    $output->Some_Guidance_Library[] = $row;
}

header('Cache-Control: no-cache, must-revalidate');
header('Content-type: application/json');
echo (json_encode($output));

mysql_close();
?>

HTML Doc:

<html>
. . .
<head>
. . .
<script type="text/javascript">
    . . .
    var ajaxLoader = '';
    var dns = 'http://192.168.1.34';
    var navContent = '/andaero/php/my_list.php';
    var bodyContent = '/wiki/index.php/Document #content';

    <!-- ================ When Ready Do This ============================ -->
    <!-- **************************************************************** --> 
    $(document).ready(function(){
          loadNav(dns + navContent, "navContent");//<- This gets loaded into the navContent<div
          loadPage(dns + bodyContent, "bodyContent");
     });
    . . . 
</script>
</head>
<body>
    . . .
    <div id="navScrollContainer" class="navContentPosition">
        <div id="navContent">
        <li id="navItem">
            <a href="">
            <h1>Label</h1>
            <h2>Title</h2>
            <p>Dispription</p>
            </a>
        </li>
        </div>
    </div>
    . . .
</body>
<!-- ================ Functions ===================================== -->
<!-- **************************************************************** -->
. . .
<script type="text/javascript">

    /* --------------- Handle Pg Loading ----------------- */
    function loadPage(url, pageName) {
        $("#" + pageName).load(url, function(response){
            $('#navHeaderTitle').text($(response).attr('title'));
    //          transition("#" + pageName, "fade", false);
        });
    };

    function loadNav(url, divId) {//<-- THIS FUNCTION'S BROKE!!
        $.getJSON(url, function(data){
            $.each(data, function(){
                var newItem = $('#' + divId).clone();
                // Now fill in the fields with the data
                newItem.find("h1").text(this.label);
                newItem.find("h2").text(this.title);
                newItem.find("p").text(this.description);
                newItem.find("a").text(this.gotoURL);
                // And add the new list item to the page
                newItem.children().appendTo("#navScrollContainer")
            });
            //transition(pageName, "show");
        });
    };
</script>
</html>

Returned JSON Data:

{"Regulatory_Guidance_Library":[{"_id":"1","label":"AC","title":"Advisory Circulators","description":"Provides guidance such as methods, procedures, and practices for complying with regulations and requirements.","date":"2008-03-03","gotoURL":null},{"_id":"2","label":"AD","title":"Airworthiness Directives","description":"Legally enforceable rules that apply to aircraft, aircraft engines, propellers, and appliances.","date":"2012-06-08","gotoURL":"\/wiki\/index.php\/Airworthiness_Directive"},{"_id":"3","label":"CFR","title":"Code of Federal Regulations","description":"Official Rulemaking documents of the CFR in Title 14 and have been published in the Federal Register","date":"2012-01-31","gotoURL":null},{"_id":"4","label":"PMA","title":"Parts Manufacturer Approvals","description":"Parts Manufacturer Approvals","date":"2012-01-31","gotoURL":null},{"_id":"5","label":"SAIB","title":"Special Airworthiness Info Bulletins","description":"Bulletins issued by manufacturers to provide modification or inspection instructions.","date":"2012-01-31","gotoURL":null},{"_id":"6","label":"SFAR","title":"Special Federal Aviation Regulation","description":"Official Rulemaking documents that have changed the language of the CFR in Title 14 CFR for aviation.","date":"2012-01-31","gotoURL":null},{"_id":"7","label":"STC","title":"Supplemental Type Certificates","description":"Document issued by the Federal Aviation Administration approving a product (aircraft, engine, or propeller) modification","date":"2012-01-31","gotoURL":null},{"_id":"8","label":"TSO","title":"Technical Standard Orders","description":"Minimum performance standards issued by the FAA for specified materials, parts, processes, and appliances used on civil aircraft.","date":"2012-01-31","gotoURL":null},{"_id":"9","label":"TCDS","title":"Type Certificate Data Sheets","description":"Repository of Make and Model information of aircraft, engine or propeller including airspeed, weight, and thrust limitations, etc.","date":"2012-01-31","gotoURL":null}]}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You never refer the array Some_Guidance_Library in your ajax success parsing. Likely easier to just get rid of it.

    Try changing 

    $output = new stdClass();

while($row = mysql_fetch_assoc($sql)) {
    $output->Some_Guidance_Library[] = $row;
}

    TO: 

    $output = array();

while($row = mysql_fetch_assoc($sql)) {
    $output[] = $row;
}

    Would be a lot easier to help if you provided sample of the json returned to browser. Can copy it right from browser console

    EDIT

    Based on json provided you would need to change your $.each loop to:

        $.each(data.Regulatory_Guidance_Library, function(){.......
    • 0