Solved

Fill various fields with data from ajax using jquery or javascript

Posted on 2014-03-23
5
726 Views
Last Modified: 2014-03-23
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
Comment
Question by:Pedro Chagas
  • 2
  • 2
5 Comments
 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 100 total points
ID: 39948554
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
 
LVL 24

Accepted Solution

by:
mankowitz earned 400 total points
ID: 39948556
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
 
LVL 24

Assisted Solution

by:mankowitz
mankowitz earned 400 total points
ID: 39948563
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
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 39948697
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
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 39948788
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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now