asked on

How to manipulate DOM with javascript when working with json feed

Hello,

I need help in javascript. I have this json feed that gets fetched and displayed correctly, but I want to do more. for example,

after the data gets diaplayed in web page, if user mouse hover or mouse click on an element(image or description or title), a tool tip or
a dom window will open. I know that this is possible by Dom scripting; however, I cannot access any ids as there is no content
inside my div that retrieves all the information(please see attached image). My idea is save either the link or image of each element in an array
, and if user clicks or mouse over on an image either a dom window or tolltip will appear:

.
.
arr[j]=feed.value.items[j].link;
.
.
.
tmp += media_thumbnail.url + '" id="a'+i+'" width="150" onMouseOver="callAlert(arr[j])"/></td>';
.
.
.

in the above two code, I have stored all the links in an array called arr. I tried to code the image as -- if someone mouse hover on an image, the current
link information will be passed to a function call callalert(arr[j]).

However, it does not work, as the final count j gets passed instead of the item that user is hovering on. I do believe that the html content need to be inside the div so that I can access the id,
and can manipulate dom. For example, after the json feed data gets extracted and displayed on webpage ( which is happening in this case), if user mouseclick or mouse over on an particular element (say item # 3),
I can show a dom window with item # 3 information or show item # 3's link or image.

I have pasted the html page with javascript. I have also posted an image. If you are not clear what i am asking, please ask me. Please help me in this situation.

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Vodo Atom Feed</title>
<script type="text/javascript" src="readJson.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
   $("a").click(function(event){
     alert("Thanks for visiting!");
   });
 });
 </script>

<style type="text/css">
body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
	color:#444444;	
}

#page-wrap {
	background: white;
	min-width: 500px;
	max-width: 1260px;
	margin: 10px auto;
	}
	#page-wrap #inside {
		margin: 10px 10px 0px 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

#json {    
	padding-left: 230px;
	padding-top: 20px;
	width:700px;
    height:480px;
    overflow:auto;
    font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:10px;color:#444444;
}
#json a:link{
	font-size:14px;
 text-decoration:none;
 font-weight:bold;
	
}
#json a:hover{
	font-size:14px;
 text-decoration:underline;
  font-weight:bold;
	
}

	
#header {

	padding-left: 230px;
}
#header a:link{
 font-size:x-large;
}
</style>
</head>
   <body onload="getFeed()">
<div id="page-wrap">
<div id="inside">
        <div id="header">
		<table><tr><td><img src="http://vodo.net/static/html/feed/logo.png" alt="vodo logo"/></td><td><h1><a href="http://vodo.net/feeds/">VoDo All Works</a></h1></td></tr></table>
	    </div>
<div id="json"></div>
</div></div>
   </body>
</html>   

--------------------------------------------------
function getFeed(){
      	var newScript = document.createElement('script');
      	newScript.type = 'text/javascript';
        newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=40616620df99780bceb3fe923cecd216&_render=json&_callback=myfunction';
 		document.getElementsByTagName("head")[0].appendChild(newScript);
 		alert(feed.value.items.length);
}
function myfunction(feed){
var data = feed.value.items[1].content;
    var tmp='';
    j = 0;
 	arr = new Array();
        for ( i=0; i<feed.value.items.length; i++) {  
         		desc = feed.value.items[i].description;
         		
             arr[j]=feed.value.items[j].link;
             tmp+='<a href="'+feed.value.items[i].link+'">';
             tmp+=feed.value.items[i].title+'</a><br>';
             tmp+=feed.value.items[i].author.name+'<br>';
             tmp+=feed.value.items[i].published+'<br><br>';
             glabalLink = feed.value.items[i].link;
             if (feed.value.items[i].description) {                  
                  media_thumbnail = feed.value.items[i]['media:thumbnail'];
				  tmp += '<table border="0"><tr><td valign="top"><img src="';
				  variable = 'a'+i;
				  tmp += media_thumbnail.url + '" id="a'+i+'" width="150" onMouseOver="callAlert(arr[j])"/></td>';
                  tmp += '<td valign="top">'+feed.value.items[i].description+'</td></tr></table>'+'<br>';
            }   
            j++;       
            tmp+='<hr>';   
        }   
        document.getElementById('json').innerHTML=tmp;    
}       

function callAlert(arr){
alert(j);
}

Open in new window

json.jpg

Michel Plungjan

You mean

"callAlert(arr['+j+']).....

ashley2009

ASKER

No, I do not mean that. Please rad my question

Michel Plungjan

Well you ALSO need to do what I suggested,.
And make the arr a global array too (it is now, but make it more clearly so by defining it outside all functions)

ashley2009

ASKER

Hi,

my question is not on array. Please help. My question is:

after I fetch data by java script, how to do some sort of animation. For example, I fetched some json feed by java script and displayed on my web page. Now if I click on a specific link or title, I would like to see a tool tip or a Dom window that will contain specific information about that specific link or title.

I know how to make those dom windows or those tool tips, but I do not know how to retreive the specific link or title information. That is why I tried to make an array, but after callAlert(array[j]) function gets called, I can only see the last index information. For example, after data from syndication feed gets displayed in web page, i click item #10, but callalert(array[]) always transfer information about the last item. See the following example, a syndication feed consisted of 20 item get fetched and the links or title or image urls get stored in an array called array[]. Therefore, there are
calAlert(array[0])---http://www.yahoo.com
calalert(array[1])---http://msn.com
calalert(array[2])---http://www.google.com
.
.
calalert(array[n-2])
calalert(array[n-1])---http://facebook.com

n-1 items in the array and the items are either link or image or title information(whatever I decide). After the web page shows all the feed, if the user hovers or clicks on the image or on the title or on the link, the Dom window or tool tip will show information about only that specific link/image/title. However, in my case, whenever calalert(array[]) gets called, only last index information gets displayed, as for some reason j is always n-1, no matter what item I click ( I may be clicking #7 item).

I hope that I have explained as much as I can. Will anyone point me somewhere to solve this specific DOM animation problem.
Please help.

Michel Plungjan

You have two issues
EITHER you solve your closure issue OR you create an array and use the correct index:

function callAlert(idx){
alert(arr[idx]);
}
var arr = new Array();
function myfunction(feed){
.
.
.

tmp += media_thumbnail.url + '" id="a'+i+'" width="150" onMouseOver="callAlert('+j+')"/></td>';

ashley2009

ASKER

HI,

I am not sure what do you mean. The array is working fine, and I believe that I cannot pass the index information correctly to callalert function. fI I click item# 2, it always show the last index because I am not sending the correct index information via callalert function.

How to send the correct index information when an user clicks an item of the array.

function getFeed(){
      var newScript = document.createElement('script');
      newScript.type = 'text/javascript';
newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=40616620df99780bceb3fe923cecd216&_render=json&_callback=myfunction';
           document.getElementsByTagName("head")[0].appendChild(newScript);
           alert(feed.value.items.length);
}
function myfunction(feed){
var data = feed.value.items[1].content;
var tmp='';
j = 0;
     arr = new Array();

for ( i=0; i<feed.value.items.length; i++) {
           desc = feed.value.items[i].description;
arr[j]=feed.value.items[j].link;
tmp+='<a href="'+feed.value.items[i].link+'">';
tmp+=feed.value.items[i].title+'</a><br>';
tmp+=feed.value.items[i].author.name+'<br>';
tmp+=feed.value.items[i].published+'<br><br>';
if (feed.value.items[i].description) {
media_thumbnail = feed.value.items[i]['media:thumbnail'];
                          tmp += '<table border="0"><tr><td valign="top"><img src="';
                          variable = 'a'+i;
                          tmp += media_thumbnail.url + '" rel="a'+i+'" width="150" onClick="callAlert(arr[j-1])"/></td>';
tmp += '<td valign="top">'+feed.value.items[i].description+'</td></tr></table>'+'<br>';
}
j++;

tmp+='<hr>';
}
tmp+='<a href="http://www.yahoo.com" onmouseover="this.innerHTML=\'<B>Mouseout to change back.</B>\';">Yahoo</a><br>';
document.getElementById('json').innerHTML=tmp;
}

function callAlert(arr){

alert(arr);
}

How to send the correct index information when an user clicks an item of the array.

callArr.jpg

Michel Plungjan

Did you even TRY my suggestion?
You cannot put the array in the call unless you put it in quotes like this

tmp += media_thumbnail.url + '" rel="a'+i+'" width="150" onClick="callAlert(\''+arr[j-1+'\'])"/></td>';

ashley2009

ASKER

I have not tried your suggestion, but I am going to try now.

Michel Plungjan

Typo in the last message
"callAlert(\''+arr[j-1+'\'])"/></td>';
should be

"callAlert(\''+arr[j-1]+'\')"/></td>';

ashley2009

ASKER

If I put

onClick="callAlert(\"+arr[j-1+'\'])"

a compile error happens. I also do not understand why are you suggesting to put + in front of arr[j] and why there is another + sign after j-1.

if I put callAlert(+j+) as you suggested earlier, compile error happens. I am trying to pass the index information correctly, when the user clicks on a specific image or link(inthis case it is img tag.

Is my question very inappropriate? Or I just cannot explain well.

ashley2009

ASKER

onClick="callAlert(\"+arr[j-1]+\")"/></td>'; ----gives run time error.
onClick="callAlert(\"+arr[j-1]+'\')"/></td>'; -----gives compile error

still not sure why are suggesting to pass +arr[j-1]+

Michel Plungjan

Wrong quotes

\''

is \ ' '
and not \"

onClick="callAlert(\'' +arr[j-1]+'\')"/></td>'; -----gives compile error

ashley2009

ASKER

I did that and it does not compile. Why are you suggesting to send array(+arr[j-1]+ )this information to the function?

This will not send the correct index information to the array. Please do not mind, but did you read my problem statement, which is how to send the correct index information to the function as user clicks an item. I also add, instead of current index, current rel information can be also sent, but my problem is I cannot figure out how to send the current index, and that is why I am asking whether someone here can tell me how to send current index information.

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

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

Start Free Trial

ashley2009

ASKER

Hi,
I was not solved the problem by using:

function callAlert(idx){
alert(arr[idx]);
}
var arr = new Array();
function myfunction(feed){
.
.
.

tmp += media_thumbnail.url + '" id="a'+i+'" width="150" onMouseOver="callAlert('+j+')"/></td>';

as mplungjan suggested
..................................................................................................................

but
I solved the problem in this way:

function getFeed(){
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=40616620df99780bceb3fe923cecd216&_render=json&_callback=myfunction';
document.getElementsByTagName("head")[0].appendChild(newScript);
alert(feed.value.items.length);
}
function myfunction(feed){
var data = feed.value.items[1].content;
var tmp='';
j = 0;
length=feed.value.items.length;
arr = new Array();
for ( i=0; i<feed.value.items.length; i++) {
desc = feed.value.items[i].description;
len = feed.value.items.length;
// alert(len);
arr[j]=feed.value.items[j].link;
tmp+='<a href="'+feed.value.items[i].link+'">';
tmp+=feed.value.items[i].title+'</a><br>';
tmp+=feed.value.items[i].author.name+'<br>';
tmp+=feed.value.items[i].published+'<br><br>';
glabalLink = feed.value.items[i].link;
if (feed.value.items[i].description) {
media_thumbnail = feed.value.items[i]['media:thumbnail'];
tmp += '<table border="0"><tr><td valign="top"><img src="';
variable = 'a'+i;
tmp += media_thumbnail.url + '" id='+i+ ' width="150" onMouseOver="callAlert(id)"/></td>';
tmp += '<td valign="top">'+feed.value.items[i].description+'</td></tr></table>'+'<br>';
}
j++;
tmp+='<hr>';
// alert(len);
}
document.getElementById('json').innerHTML=tmp;
}

function callAlert(id){
alert(id);
alert(len);
alert(arr[id]);

}

What was my question?

My question was after all the information gets displayed on the webpage, if one clicks or hover over an item, some specific information about that item will be displayed. I was having problem by fetching that specific item as after the for loop, j 's value is always the number of item of the list; therefore, j will not never correct index information.

How did I solve the problem?

arr[j]=feed.value.items[j].link; //here all the links are getting stored in the array
.
.

tmp += media_thumbnail.url + '" id='+i+ ' width="150" onMouseOver="callAlert(id)"/></td>'; //here i am assigning id number to each image tag

And here-----
function callAlert(id){
alert(id);
alert(arr[id]);

}

And in the above function, I can show the correct link that user requested either by hoving or clicking

Therefore, I have solved my problem by doing the above coding.

Michel Plungjan

great if that works for you...

Michel Plungjan

But then you should accept your own comment as answer