Solved

Fill various fields with data from ajax using jquery or javascript

Posted on 2014-03-23
5
748 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 110

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

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
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…

728 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