Having problems with local varibles 1

[ShawnMolloy]

For some reason, I can not assign a value to the var "mp3Id" in my code below. Can anyone help me out in debugging this?

this script makes a pop up menu appear, and then writing in the array called mp3Menu as the menu item. I want to pass in a ID to this array, but its not defined in the function, as you can see, so its making it diffiucult.

<script type="text/javascript">

// This is the var i want to assign to:
var _mp3Id = "0";

var mp3Menu=new Array()
mp3Menu[0]='<a href="listen.aspx?id='+_mp3Id+'"><img class="menuIcon">Listen</a>'
mp3Menu[0]+='<a href="details.aspx?id='+_mp3Id+'"><img class="menuIcon">&nbsp;View Details</a>'



function showmenu(e, which, optWidth, mp3Id){

// this is my main problem. I am trying to assign the parameter to the local var defined up there. but when the pop up menu appears the "mp3Id" i created stays at "0"

_mp3Id = mp3Id;



// the below code controls the div that opens for the menu and is inconsequential


if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

Shawn Molloy
Seattle, WA

 

[cLFlaVA]

what?

if i understand you correctly (and I probably don't), shouldn't your array creation be inside your function?

function showmenu(e, which, optWidth, mp3Id){

// this is my main problem. I am trying to assign the parameter to the local var defined up there. but when the pop up menu appears the "mp3Id" i created stays at "0"

_mp3Id = mp3Id;

var mp3Menu=new Array()
mp3Menu[0]='<a href="listen.aspx?id='+_mp3Id+'"><img class="menuIcon">Listen</a>'
mp3Menu[0]+='<a href="details.aspx?id='+_mp3Id+'"><img class="menuIcon">&nbsp;View Details</a>'

why aren't you indenting your code? it makes it MUCH easier to debug! also, avoid using the all collection whenever possible. instead, optimize your code to work in as many browsers as possible.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ShawnMolloy]

Well, for one I didn't write this code; I got it off of dynamic drive I'm trying to modify it to fit my needs. I needed to pass in a varible, so I added the mp3Id stuff.

I just tried to move the array into the funciton; but as I thought it broke everything. I assume they built it that way for easy editing.

Shawn Molloy
Seattle, WA

 

[trollacious]

Where do you call showmenu()? You have the function, but you didn't provide the code for us to see how you use it.

Lee

 

[ShawnMolloy]

Hi Lee,

The code for the showmenu function is called like so:

<span style="vertical-align:middle;" onmousedown="showmenu(event,mp3Menu[0],'180px','420')" onmouseout="delayhidemenu()">SOME LINK</span>

Please let me know if you'd like to see the entire code block (its quite large).

Thanks,



Shawn Molloy
Seattle, WA

 

[trollacious]

Insert the following code after the line I copied from your code above:

_mp3Id = mp3Id;

alert('_mp3Id = ' + _mp3Id);
alert('mp3Id = ' + mp3Id);

Since you don't actually refer to either variable in the function after that assignment, I'm not sure what you're expecting from the code.

Lee

 

[ShawnMolloy]

It tells me that _mp3Id = 0, but I can not see mp3Id because that value is in the function... outside the scope of that line of code. That is why in my function I am assigning the value:


_mp3Id = mp3Id;

I am hoping that by assigning _mp3Id to mp3Id it will be accessibel in the ARRAY that is shown above. There is a reference to both variables; and I expect the code to populate the array with the parametered value through this assignment....



Shawn Molloy
Seattle, WA

 

[cLFlaVA]

outside the scope of the line of code? your line of code is WITHIN the function. lee asked that you place those alerts after that line of code, so they'd also be WITHIN the function...



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ShawnMolloy]

K, I see what you're saying.

I moved it to the function. Both values are being assigned the correct value. I get two alerts with matching int values (the values passed in the function call params.

I'm starting to see why the code where the array lives can't read the value of the parameter... but there has to be some way to assign a global var a value from a function (which is what I was trying to do in my original code)



Shawn Molloy
Seattle, WA

 

[trollacious]

You ARE assigning a global variable a new value inside the function. What are you doing with the new value in the variable after it's assigned? Do you use it somewhere else that you haven't shown? It doesn't automatically get put into the menu object and isn't something dynamically assigned to the menu string, if that's what you're trying to do. All your menu building code does is plug in the value in the variable at the time it's processed, but there's nothing in what you've shown that would update the menu if a variable value is changed.

Lee

 

[ShawnMolloy]

Sorry, I'm attaching it to the url in the array:

mp3Menu[0]='<a href="listen.aspx?id='+_mp3Id+'"><img class="menuIcon">Listen</a>'



Shawn Molloy
Seattle, WA

 

[trollacious]

Where do you update the value in the array once you change the value in the variable?

Lee

 

[ShawnMolloy]

I was hoping that when showmenu() was called this assigment (in the function)

_mp3Id = mp3Id;

would overwrite the value of "0" I defined in this line:

var _mp3Id = "0";

And in the array there is a reference to that var:

<a href="listen.aspx?id='+_mp3Id+'">

Notice the _mp3Id reference. This obviously does not work, thus my question. I wish I could make it more clear, but if I could explain it any better I would prolly be able to fix it.



Shawn Molloy
Seattle, WA

 

[trollacious]

That's not a "reference", that's an assignment of a string value to a string variable. Once it's assigned, as I've said twice before, it doesn't automatically update when you change the variable's value. You'll have to change the value on the page manually in the <a href> tag.

One way is to create an ID for the <a href> and then access the href property using

document.getElementById('href id name here').href = 'listen.aspx?id='+_mp3Id;

Lee

 

[ShawnMolloy]

I had a feeling this would turn into a lesson in proper javascript programming; I am bascially a C# developer, and this is how I would accomplish this in the .NET world.

Thanks for the suggestions; I agree - I will have to find another way to assign a value to that string.

The problem is I am dynamically writing out these links via a .NET control.

 <ItemTemplate><span style="vertical-align:middle;" onmousedown="showmenu(event,mp3Menu[0],'180px','420')" onmouseout="delayhidemenu()">
        <img alt="Open Menu" src="/_img/_core/icon_AudioMenu.gif" /></span></ItemTemplate>

Do you propose I add replace the array I'm using with your above suggestion or add it to the calling function?

Thanks,

Shawn Molloy
Seattle, WA

 

[ShawnMolloy]

Here is the entire code sample:

<script type="text/javascript">

var defaultMenuWidth="20px" //set default menu width.
var _mp3Id;

var mp3Menu=new Array()
mp3Menu[0]='<a  href="detail.aspx?id='+_mp3Id+'"><img class="menuIcon" src=\"lab/icons/mini/icons/action_go.gif\">&nbsp;<strong>Listen</strong></a>'
mp3Menu[0]+='<a href="detail.aspx?id='+_mp3Id+'"><img class="menuIcon" src=\"lab/icons/mini/icons/interface_installer.gif\">&nbsp;View Details</a>'
mp3Menu[0]+='<a href="detail.aspx?id='+_mp3Id+'"><img class="menuIcon" src=\"lab/icons/mini/icons/action_stop.gif\">&nbsp;Remove File</a>'
mp3Menu[0]+='<a href="detail.aspx?id='+_mp3Id+'"><img class="menuIcon" src=\"lab/icons/mini/icons/icon_user.gif\">&nbsp;Send to Friend</a>'
mp3Menu[0]+='<a href="detail.aspx?id='+_mp3Id+'"><img class="menuIcon" src=\"lab/icons/mini/icons/folder_new.gif\">&nbsp;Add to Torrent</a>'


var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth, mp3Id){

_mp3Id = mp3Id;

alert('_mp3Id! = ' + _mp3Id);
alert('mp3Id! = ' + mp3Id);

if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",5000)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu

</script>



<form runat="server>
<asp:GridView 
    ID="gv_Music" 
    runat="server"
    AutoGenerateColumns="false"
    
    Font-Names="Tahoma, Verdana, Arial"
    Font-Size="Larger" 
    Width="570px" 
    
    AlternatingRowStyle-BackColor="#EEEEEE"
    
    RowStyle-VerticalAlign="middle" 
    RowStyle-BackColor="#FFFFFF"
    RowStyle-Height="25px" 
    RowStyle-Font-Names="Tahoma,Verdana,Arial"
    RowStyle-Font-Bold="true"
    RowStyle-ForeColor="#006666"
    
    HeaderStyle-HorizontalAlign="Left"
    HeaderStyle-Font-Bold="true" 
    HeaderStyle-CssClass="header"
    CssClass="mp3List"
    
    GridLines="none"
    BorderStyle="none" 
 >
   
   <Columns>
   
   <asp:TemplateField HeaderText="Menu" 
    ItemStyle-VerticalAlign="Middle"
    ItemStyle-Width="60px" >
        <ItemTemplate><span style="vertical-align:middle;" onmousedown="showmenu(event,mp3Menu[0],'180px','<%#Eval("Mp3Id")%>')" onmouseout="delayhidemenu()">
        <img alt="Open Menu" src="<%=Core.Config.Root%>/_img/_core/icon_AudioMenu.gif" /></span></ItemTemplate>
   </asp:TemplateField>
   
   <asp:BoundField DataField="Mp3Name" HeaderText="Name" />
   <asp:BoundField DataField="Length" HeaderText="Time"  DataFormatString="{0:hh:mm}" />        
   </Columns> 

</asp:GridView>
</form>

Shawn Molloy
Seattle, WA

 

[trollacious]

If you put the code I provided in your Javascript function, it should do what you want. Just make sure you add some kind of id to the string you build that you want to change later on, and use that id in the code I provided.

I've never heard of a programming language that updates portions of strings that were concatenated with a mixture of variables and literals.

Lee

 

[ShawnMolloy]

Its a new flavor for the CLR....


OK maybe I'm wrong. LoL. Thanks for your help.

Shawn Molloy
Seattle, WA