asked on

Fill various fields with data from ajax using jquery or javascript

Hi E's, I need some help for processing data from ajax/php, and fill that data into document.
I have a file "info.php" that processing data, and send that data to "index.php" through ajax. In "index.php" I have to fill data of 3 users, image, points and time. That data come from "info.php" in this format: "image1.png, 100, 00.01.25, image2.png, 98, 00.01.30, image3.png, 80, 00.02.10".
The objective is complete the path of the image of all users, like image_folder/image1.php, fill the points and the time.
The information come through ajax have to be processing and belongs to:
user1: image1.png, 100, 00.01.25
user2: image2.png, 98, 00.01.30
user3: image3.png, 80, 00.02.10
This is the code in the 2 files:
index.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>Untitled Document</title>
<script src="../../ficheiros_apoio/jquery.min.js"></script>
<style>
#box{position: absolute; width: 300px; height: 900px;}
#user1{position: absolute; width: 300px; height: 300px; background-color: red; top: 0px;}
#user2{position: absolute; width: 300px; height: 300px; background-color: blue; top: 300px;}
#user3{position: absolute; width: 300px; height: 300px; background-color: yellow; top: 600px;}
#profile{position: absolute; top: 20px; left: 20px;}
#points{position: absolute; width: 300px; height: 50px; top: 50px; background-color: white;}
#time{position: absolute; width: 300px; height: 50px; top: 100px; background-color: gray;}
</style>
</head>
<body>
<script>
$(function(){
        $.ajax({
        type: "POST",
        url: "info.php",
        data: {"ref":1},
        success: function(dat){
                if(dat == ""){
                    alert("error");
                } else {
                alert(dat);
                } 
        }
        });
});
</script>


<div id="box">
<div id="user1">
<div id="profile"><img src="image_folder/"/></div>
<div id="points"></div>
<div id="time"></div>
</div>
<div id="user2">
<div id="profile"><img src="image_folder/"/></div>
<div id="points"></div>
<div id="time"></div>
</div>
<div id="user3">
<div id="profile"><img src="image_folder/"/></div>
<div id="points"></div>
<div id="time"></div>
</div>
</div>
</body>
</html>

Open in new window

info.php

<?
if($_POST["ref"] == 1){
echo "image1.png, 100, 00.01.25, image2.png, 98, 00.01.30, image3.png, 80, 00.02.10";
}
?>

Open in new window

My question is, how I do that?
Note: I don't know, when I fill entire path of the image, the image will appear?
Also, the php data in "info.php" can be change if you want and if have a solution more appropriate, like a array.
Thanks for attention.

The best regards, JC

SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

mankowitz

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

mankowitz

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pedro Chagas

ASKER

Hi @mankowitz, for text data your example works, the problem is the images that not load.
Something wrong happening with the html:
In Firebug, the part of the html image appear:

<div id="profile" src="image_folder/image1.jpg">
<img src="image_folder/">
</div>

Open in new window

Seems something wrong in html.

This is the code of index.php updated:

<!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>Untitled Document</title>
<script src="../../ficheiros_apoio/jquery.min.js"></script>
<style>
#box{position: absolute; width: 300px; height: 900px;}
#user1{position: absolute; width: 300px; height: 300px; background-color: red; top: 0px;}
#user2{position: absolute; width: 300px; height: 300px; background-color: blue; top: 300px;}
#user3{position: absolute; width: 300px; height: 300px; background-color: yellow; top: 600px;}
#profile{position: absolute; top: 20px; left: 20px;}
#points{position: absolute; width: 300px; height: 50px; top: 50px; background-color: white;}
#time{position: absolute; width: 300px; height: 50px; top: 100px; background-color: gray;}
</style>
</head>
<body>
<script>
$(function(){
        $.ajax({
        type: "POST",
        url: "info.php",
        data: {"ref":1},
        success: function(dat){
                if(dat == ""){
                    alert("error");
                } else {
   var arr = dat.split(",");
   $("#user1 > #profile").attr("src", "image_folder/" + arr.shift());
   $("#user1 > #points").text(arr.shift());
   $("#user1 > #time").text(arr.shift());
   $("#user2 > #profile").attr("src", "image_folder/" + arr.shift());
   $("#user2 > #points").text(arr.shift());
   $("#user2 > #time").text(arr.shift());
   $("#user3 > #profile").attr("src", "image_folder/" + arr.shift());
   $("#user3 > #points").text(arr.shift());
   $("#user3 > #time").text(arr.shift());
                } 
        }
        });
});
</script>


<div id="box">
<div id="user1">
<div id="profile"><img src="image_folder/"/></div>
<div id="points"></div>
<div id="time"></div>
</div>
<div id="user2">
<div id="profile"><img src="image_folder/"/></div>
<div id="points"></div>
<div id="time"></div>
</div>
<div id="user3">
<div id="profile"><img src="image_folder/"/></div>
<div id="points"></div>
<div id="time"></div>
</div>
</div>
</body>
</html>

Open in new window

@Ray, excellent article, easy to understand.

How I resolve the problem of the image?

~JC

Pedro Chagas

ASKER

Hi again, for resolve the issue of the images load, change:

$("#user1 > #profile").attr("src", "image_folder/" + arr.shift());

Open in new window

$("#user1 > #profile img").attr("src", "image_folder/" + arr.shift());

Open in new window

(left img).

So, the correct code in both files is:
index.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>Untitled Document</title>
<script src="../../ficheiros_apoio/jquery.min.js"></script>
<style>
#box{position: absolute; width: 300px; height: 900px;}
#user1{position: absolute; width: 300px; height: 300px; background-color: red; top: 0px;}
#user2{position: absolute; width: 300px; height: 300px; background-color: blue; top: 300px;}
#user3{position: absolute; width: 300px; height: 300px; background-color: yellow; top: 600px;}
#profile{position: absolute; top: 20px; left: 20px;}
#points{position: absolute; width: 300px; height: 50px; top: 50px; background-color: white;}
#time{position: absolute; width: 300px; height: 50px; top: 100px; background-color: gray;}
</style>
</head>
<body>
<script>
$(function(){
        $.ajax({
        type: "POST",
        url: "info.php",
        data: {"ref":1},
        success: function(dat){
                if(dat == ""){
                    alert("error");
                } else {
   var arr = dat.split(",");
   $("#user1 > #profile img").attr("src", "image_folder/" + arr.shift());
   $("#user1 > #points").text(arr.shift());
   $("#user1 > #time").text(arr.shift());
   $("#user2 > #profile img").attr("src", "image_folder/" + arr.shift());
   $("#user2 > #points").text(arr.shift());
   $("#user2 > #time").text(arr.shift());
   $("#user3 > #profile img").attr("src", "image_folder/" + arr.shift());
   $("#user3 > #points").text(arr.shift());
   $("#user3 > #time").text(arr.shift());
                } 
        }
        });
});
</script>


<div id="box">
<div id="user1">
<div id="profile"><img src="image_folder/"/></div>
<div id="points"></div>
<div id="time"></div>
</div>
<div id="user2">
<div id="profile"><img src="image_folder/"/></div>
<div id="points"></div>
<div id="time"></div>
</div>
<div id="user3">
<div id="profile"><img src="image_folder/"/></div>
<div id="points"></div>
<div id="time"></div>
</div>
</div>
</body>
</html>

Open in new window

info.php:

<?
if($_POST["ref"] == 1){
echo "image1.jpg,100,00.01.25,image2.jpg,98,00.01.30,image3.jpg,80,00.02.10";
}
?>

Open in new window

Thanks for all.

~JC