GetJSON with jquery

Question

When I try to display data using getJSON, nothing happens, $('#child-left-container-2')should display data from php file. Where am I wrong? ... The following is a brief example of my code.

php file

while($row = mysql_fetch_assoc($query)) {

//code

    $array[] = "<div class='array-container-2' $style id='$id' data-sid='$sid' data-user='$user'>$details1</div>";


            }

            echo json_encode($array);

JQuery

$(function() {
    $('.next_button').click(function() {

var id =  $('#container').find('.graphic-blank:visible').siblings().attr('id');

        $.getJSON('fetchstack.php?id='+id,function(data) {

            $('#child-left-container-2').html(''); //clear div

            $.each(data,function(i,result) {
                $('#child-left-container-2').append(result);
            });
        });

          });
});

Answer 1

I don’t know if this will solve the problem you are facing, but I would solve this problem this way. Try this code if it works, stopping sending html via json will be a bonus.

$key = 0;
while($row = mysql_fetch_assoc($query)) {
    //code
    $array[$key]['id']      = $id;
    $array[$key]['sid']     = $sid;
    $array[$key]['user']    = $user;
    $array[$key]['content'] = $details1;
    $array[$key]['style']   = $style;
    $key++;
}

echo json_encode($array);

JS:

$(function() {
    $('.next_button').click(function() {

        var id =  $('#container').find('.graphic-blank:visible').siblings().attr('id');
        $.getJSON('fetchstack.php?id='+id,function(data) {
            $('#child-left-container-2').html(''); //clear div

            for (var i in data){
                var id      = data[i].id;
                var sid     = data[i].sid;
                var user    = data[i].user;
                var content = data[i].content;
                var style   = data[i].style;
                $('#child-left-container-2').append($('<div />').addClass('array-container-2')attr('id', id)
               .attr('data-sid', sid).attr('data-user', user).html(content);
            }           
       });
   });
});

I admit that, not knowing what style of $ or how it appeared, I could not add it to the chain. If you post $ style content, I can update anwser. Hope this helps.

Answer 2

The second line of your jQuery

var id =  $('#container').find('.graphic-blank:visible').siblings().attr('id');

id jQuery (siblings()). jQuery $getJSON

, ,

var id =  $('#container').find('.graphic-blank:visible').siblings().eq(0).attr('id');

Answer 3

, , , - . HTML , . , firebug, JSON. . , DOM Firebug. .

Answer 4

html, console.log,

, div response = $('#child-left-container-2') ,

<div id="child-left-container-2" />

, maby json in under array... console.log(data) debbuger F12

Answer 5

HTML PHP , ?

while($row = mysql_fetch_assoc($query)) {
    echo "<div class='array-container-2' $style id='$id' data-sid='$sid' data-user='$user'>$details1</div>";
}

$.getJSON('fetchstack.php?id='+id,function(data) {
    $('#child-left-container-2').html(data);
});

Answer 6

Ok, this is my solution and it works flawlessly:

PHP:

<?php

ini_set('magic_quotes_gpc', false);
header('Content-type: text/plain');

      //DB connection credentials
$dbhost = 'hostname';
$dbuser = 'database_username';
$dbpass = 'database_password';
$dbname = 'database_name';

// allow cross-browser acces
header('Access-Control-Allow-Origin: *');

// query SQL
$sql = "do your DB query SELECT what ever here";

  //do our thingies withouth hacks (SQL Injection, etc)
try {
$dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
$dbh->query("set names utf8");
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $dbh->query($sql);  
$json_export = $stmt->fetchAll(PDO::FETCH_OBJ);
$dbh = null;

    // return JSON format DATA
echo '{"items":'. json_encode($json_export) .'}'; 
} catch(PDOException $e) {

    // return error
echo '{"error":{"text":'. $e->getMessage() .'}}'; 
}

?>

HTML LISTVIEW:

<div data-role="page" id="myPage"><div data-role="content" id="myContent">
       //my HTML list tag
  <ul data-role="listview" id="myList"></ul>
</div></div>

JAVASCRIPT

  //trigger script on show page
$('#myPage').live('pageshow',function (event) {
       //get our JSON data
    $.getJSON('path_to_your_php_json_generator_file_declared_upper',function(data){
          //append our JSON data to a variable
       var json_entries = data.items;
                //for each JSON data, append it to our list as one element
       $.each(json_entries,function(index,entry){
           $('#myList').append('<li><a href="#">' + entry.title + '</a></li>');
             //assuming we have a field named "title" in JSON data
       });
             //refresh the list for layout (style) loading
       $('#myList').listview('refresh');
    });
});

And here is how you populate the list on jQuery Mobile with the JSON data generated by the php file. You can adapt this type of script to each JSON interpreter in your jQuery code even with parameters (id, category, etc.)!

Hope this helps anyway!

Answer 7

try to put it juste before echo json_encode($array);. Finally, call exit to avoid extra output.

header('Content-type:application/json;charset=utf-8');
echo json_encode($array);
exit();