• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 777
  • Last Modified:

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
0
Pedro Chagas
Asked:
Pedro Chagas
  • 2
  • 2
3 Solutions
 
Ray PaseurCommented:
I don't think I can write the app for you but I can show you the essential moving parts of a jQuery / AJAX interaction.  Please read this article and then post back if there is anything confusing.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
 
mankowitzCommented:
When communicating with javascript via ajax, I nearly always try to encode in json. If that's not possible, you can keep what you have.

anyway, you will want to replace this line
                alert(dat);
with something like this:
   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());
0
 
mankowitzCommented:
A json version might look more like this:

<?
if($_POST["ref"] == 1){
echo '{"user1" : { "img" : "image1.png", "points" : 100, "time" : "00.01.25"}, {"user2" : { "img" : "image2.png", "points" : 98, "time" : "00.01.30"}, "user3": {"img": "image3.png", "points": 80, "time" : "00.02.10"}}';
}
?>

and the javascript

   $("#user1 > #profile").attr('src;, "image_folder/" + dat.user1.img);
   $("#user1 > #points").text(dat.user1.points);
   $("#user1 > #time").text(dat.user1.time);
0
 
Pedro ChagasWebmasterAuthor Commented:
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
0
 
Pedro ChagasWebmasterAuthor Commented:
Hi again, for resolve the issue of the images load, change:
$("#user1 > #profile").attr("src", "image_folder/" + arr.shift());

Open in new window

to
$("#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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now