[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Fill various fields with data from ajax using jquery or javascript

Posted on 2014-03-23
5
Medium Priority
?
759 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 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 400 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 1600 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 1600 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

This article discusses how to implement server side field validation and display customized error messages to the client.
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
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 the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

649 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