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
LVL 3
ashley2009Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
You mean

"callAlert(arr['+j+']).....
0
ashley2009Author Commented:
No, I do not mean that. Please rad my question
0
Michel PlungjanIT ExpertCommented:
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)
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

ashley2009Author Commented:
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.
0
Michel PlungjanIT ExpertCommented:
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>';



0
ashley2009Author Commented:
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
0
Michel PlungjanIT ExpertCommented:
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>';
0
ashley2009Author Commented:
I have not tried your suggestion, but I am going to try now.
0
Michel PlungjanIT ExpertCommented:
Typo in the last message
"callAlert(\''+arr[j-1+'\'])"/></td>';
should be

"callAlert(\''+arr[j-1]+'\')"/></td>';
0
ashley2009Author Commented:
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.



0
ashley2009Author Commented:
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]+

0
Michel PlungjanIT ExpertCommented:
Wrong quotes

\''

is \ ' '
and not \"

onClick="callAlert(\'' +arr[j-1]+'\')"/></td>';        -----gives compile error
0
ashley2009Author Commented:
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.
0
Michel PlungjanIT ExpertCommented:
I already suggested the code you need to change: http:#a29921450
You choose not to do what I posted. Then I cannot help you further.
Sorry
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ashley2009Author Commented:
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.

0
Michel PlungjanIT ExpertCommented:
great if that works for you...
0
Michel PlungjanIT ExpertCommented:
But then you should accept your own comment as answer
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Components

From novice to tech pro — start learning today.