javascript , php, mysql data displayed into a list

Question

i am tring to display the data from mysql whith php and java script. I manage to display the data on the page but cant manage to send it to script . below are my files

script1.js

$(document).ready( function() {
 done();
});

function done() {
      setTimeout( function() { 
      updates(); 
      done();
      }, 200);
}


function updates() {

  $.getJSON("cocktail.php", function(data){
      $("ul") .empty ();

      $each(data.result, function(){
          $("ul").append("<li>Poza: "+this['poza']+"</li> <li>Nume: "+this['nume']+"</li><li>Compozitie: "+this['compozitie']+"</li><br/>");

  });
   }); 
}

cocktail.php

<?php include ('includes/header_js.php');?>
<?php include_once ('includes/connection.php');?>

<div class="body_bg">
                        <h2>Arta Cocktail-urilor</h2>


                        <div class="clr"> </div>

<?php

$sql = "SELECT * FROM   cocktail";
$res = mysql_query($sql);
$result = array ();

while($row = mysql_fetch_array ($res) )
{

array_push($result, array('poza' => $row[1],
                            'nume' => $row[2],
                            'compozitie' =>$row[3]));
}
echo json_encode(array("result" => $result));

?>

 </div><!--end of body_bg-->

<?php include ('includes/footer.php'); ?>

connection.php

<?php 
$connection = mysql_connect('localhost', 'root'. '');
if(!$connection){
die('Nu s-a putut conecta la baza de date.' .mysql_error());    
}
$db_select = mysql_select_db('first_class', $connection);
if(!$db_select){
die('Eroare de conexiune'.mysql_error());   
}

?>

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>First Class Cocktail</title>
<link  rel="stylesheet" href="stylesheets/style.css"  type="text/css" />
</head>
<body>
<table></table>
<script type="text/javascript" src="javascripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="javascripts/script1.js"></script>
<div class="container">
<div class="header">




                </div><!--end of logo-->
        <div class="menu">
         <ul>
          <li><a href="index.php" class="active"><span>Acasa </span></a></li>
          <li><a href="galerie.php"><span>Galerie</span></a></li>
          <li><a href="cocktail.php"><span>Cocktail</span></a></li>
          <li><a href="about.php"><span> Despre Noi </span></a></li>
          <li><a href="contact.php"><span> Contact </span></a></li>
        </ul>

        </div><!--end of menu-->
        <div class="clr"></div><!--end of clr-->

where do i faild??? Thank you in advance for the time wasted reading this! Thank you!

sooo..... cocktail.php does display the correct data? but script1.js is unable to get it with $.getJSON... is that correct? are you getting any errors? is the updates function actually being called? is the data just coming back blank or....? — gloomy.penguin
– gloomy.penguin, Commented Oct 15, 2013 at 16:19
What is the value of data after the $.getJSON("cocktail.php", function(data){ line? — Jon Koops
– Jon Koops, Commented Oct 15, 2013 at 16:21
the page cocktail.php it display the data from mysql but in a raw way: {"result":[{"poza":"\"images\/cocktail\/mojito.jpg\"\/>","nume":"Mojito","compozitie":"15cl rom, gheata, menta"}]} the script it supposed to arrage it in a list more cleaner — Marian
– Marian, Commented Oct 15, 2013 at 16:21

Marc B · Accepted Answer · 2013-10-15 16:23:11Z

1

You're generating a multi-level array:

array_push($result, array('poza' => $row[1], etc...);

will create an aray like:

$result = array(
     0 => array('poza' => ....)
);

meaning you have to use

      $("ul").append("<li>Poza: "+this[0]['poza']+ etc...);
                                      ^^^---- note this

in your JS code.

Your PHP-side code can be tremendously simplified:

SELECT poza, nume, compozitie FROM ...

$data = array();
while ($row = mysql_fetch_assoc($result)) {
   $data[] = $row;
};

As well, your JS code seems to be assuming there will only ever be ONE row of data coming out of the database, yet your database handling code is set up to handle MULTIPLE rows. Not my place to figure out which one is correct, but you should be aware of it.

answered Oct 15, 2013 at 16:23

Marc B

362k44 gold badges433 silver badges508 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon Koops · Accepted Answer · 2013-10-15 17:45:07Z

The problem is that cocktail.php contains HTML whilst the $.getJSON function expects JSON (and JSON only). You should also return a valid Content-Type header for JSON like application/json. In the end your cocktail.php would look something like this:

<? 

include_once('includes/connection.php');

header('Content-Type: application/json');

$sql = 'SELECT poza, nume, compozitie FROM cocktail';
$res = mysql_query($sql);
$results = array();

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

    $results[] = $row;

}

echo json_encode( array('results' => $results) );

?>

On a sidenote, I see you're using the mysql_... functions. These functions are deprecated in newer versions of PHP, it's highly recommended to use the newer PDO functions to future-proof your code (for more information look here: http://php.net/manual/en/mysqlinfo.api.choosing.php).

There are also some issues with your JavaScript code.

$each(data.result, function(){

Should be

$.each(data.result, function ( index, value ) {

You should also replace

this['poza']

with

value.poza

Finally your JavaScript would look something like this:

$(document).ready(function () {

    var updateList = function () {

        $.getJSON('cocktail.php', function( data ) {

            var list = $('ul');

            list.empty();

            $.each(data.results, function( index, result ) {

                list.append(
                    '<li>Poza: ' + result.poza + '</li>' +
                    '<li>Nume: ' + result.nume + '</li>' +
                    '<li>Compozitie: ' + result.compozitie + '</li>'
                );

            });

        });
    };

    window.setInterval(updateList, 200);

});

Collectives™ on Stack Overflow

javascript , php, mysql data displayed into a list

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related