1

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}]}
Improve this question

1 Answer 1

Reset to default
1

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(){.......
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I had thought that to before and tried but that gave no results so I put it back in - I'll need that for a header title later. I'll add the return JSON data in my SO?
your json is invalid....put it in jsonlint.com. Need double quotes on everything. Can use $output['Some_Guidance_Library']=$row if you need to have several keys but you will need to use that key in your ajax parsing also
Sorry, I copied the output wrong into my SO? so I edited it. The php code is unchanged and comes back valid on jsonlint.com
I made a small edit in my code. I added ('#' + divId). Now I get the correct number of rows showing in the DOM but there is no data/text.
added an edit to my post to change how you access json you provided

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.