show/hide hyperlinks

1561
9
07-16-2012 02:18 PM
DavidBrooks3
New Contributor
I'm wanting to show a popup hyperlink if there is feature data or hide it if the value is empty string or null.  I've searched the forum but was unable to locate a solution. 
Thank you,
Tags (2)
0 Kudos
9 Replies
AustinDavis
New Contributor III
You can put the link in an html anchor tag (<a>) and add it to the htmltext attribute of a text tag (<mx:Text>).

Put the text tag as a child in the infoWindow (map.infoWindow). Then call the show/hide methods on the infoWindow when the user interacts with a feature.
0 Kudos
DavidBrooks3
New Contributor
Here is a snip from my popup xml where I am trying to show/hide a link.  How is the {Location} parameter value used in JavaScript?

<configuration>
[LEFT][/LEFT] <title>{REVIEW_DESC}</title>
[LEFT][/LEFT] <script type="text/javascript">
[LEFT][/LEFT]  var Att = {Location: "Location"}
[LEFT][/LEFT]  function hideDiv() {
[LEFT][/LEFT]  if (Att = '')  {document.getElementById("testdiv").style.display = 'none';}
[LEFT][/LEFT]  }
[LEFT][/LEFT] </script>
[LEFT][/LEFT] <description>
[LEFT][/LEFT]  <![CDATA[
[LEFT][/LEFT]<div id="testdiv"><A href="http://000.000.000.000/flexviewers/app/{Location}" target=_blank>Location</A></div>
]]></description>
</configuration>

Your help is appreciated.
0 Kudos
AustinDavis
New Contributor III
Maybe something like this?

I think the Att variable is an object. You need to get the value of 'Location' out of the Att object.

So your script would be something like:

var Att = {Location: "Location"}
function hideDiv() {
if (Att = '') {document.getElementById("testdiv").style.visibility= 'hidden';}
}else{
 document.getElementById("testdiv").style.visibility='visible';}
};
}


Where you have the "testdiv" already added to the DOM somewhere.

<div id="testdiv">
<a href="{'http://000.000.000.000/flexviewers/app/'+Att.Location.toString()}"  target=_blank>Location</a>
</div>
0 Kudos
DavidBrooks3
New Contributor
Therein lies my issue.  I already have the {Location} value provided in the xml of the popup.  I'm attempting to verify in javascript if it is an empty string and if so to not show the div.  How do I use the {Location} value in javascript?
Thank you,
0 Kudos
AustinDavis
New Contributor III
David,

Sorry-- misunderstood.

So you would like to know if the location string (part of the URI) is empty?

If you have the div:
<div id="testdiv">
<a href="{'http://000.000.000.000/flexviewers/app/'+Att.Location.toString()}"  target=_blank>Location</a>
</div>


Then in javascript you'll use similar code as above, but add a check to the location:

You will use the equality operator '=='.


var Att = {Location: "Location"}
function hideDiv() {
    if (Att.Location.toString() == ''){ //if the Att object's location is cast to a string and is empty
         document.getElementById("testdiv").style.visibility= 'hidden';} //hide the div
    }else{ //if it is not an empty string
 document.getElementById("testdiv").style.visibility='visible';}//show the div
    };
}


Is this closer to what your asking?
0 Kudos
DavidBrooks3
New Contributor
Thanks Austinstig but I'm still getting the link regardless if {Locations} is empty string or not.  Here is my popup xml.  Am I doing something wrong?

<?xml version="1.0" ?>
<configuration>
<title>{REVIEW_DESC}</title>
<script type="text/javascript">
  var Att = {Locations: "Locations"}
  function hideDiv() {
  if (Att.Locations.toString() == ''){ //if the Att object's location is cast to a string and is empty
  document.getElementById("testdiv").style.visibility= 'hidden';} //hide the div
  }else{ //if it is not an empty string
  document.getElementById("testdiv").style.visibility='visible';}//show the div
  };
  }
</script>
<description>
  <![CDATA[
<div id="testdiv">
<a href="{'http://000.000.000.0/flexviewers/Location/'+Att.eLocation.toString()}"  target=_blank>Location</a>
</div>

</configuration>
0 Kudos
AustinDavis
New Contributor III
Let's see:

I had in error in my earlier code (extra brackets).

var Att = {Location: "Location"}
function hideDiv() {
    if (Att.Location.toString() == ''){ //if the Att object's location is cast to a string and is empty
         document.getElementById("testdiv").style.visibility= 'hidden'; //hide the div
    }else{ //if it is not an empty string
 document.getElementById("testdiv").style.visibility='visible';//show the div
    };
};


in your code:
Att.eLocation.toString()

"eLocation" is not a property of the Att object.

Are you able to debug your JavaScript by using something like firebug plugin in firefox?
0 Kudos
DavidBrooks3
New Contributor
Good morning Autsin,
Unfortunately I do not have a Java debugger so I'm driving blind.  The crux of my issue is this.  The popup xml produces {Locations} data, so I have what I need in that respect.  I am failing to use the {Locations} data in the javascript.  Please disregard the "eLocations" typo.  I rename "Location" to "eLocation" in the appropriate places since that is the name of the field in the database.

<?xml version="1.0" ?>
<configuration> 
 <title>{REVIEW_DESC}</title>
 <script type="text/javascript">
  var Att = {Locations: "Locations"}
  function hideDiv() {
  if (Att.Locations.toString() == ''){  //if the Att object's location is cast to a string and is empty
  document.getElementById("testdiv").style.visibility= 'hidden'; 
  }else{ //if it is not an empty string  //if it is not an empty string
  document.getElementById("testdiv").style.visibility='visible';};
  }
 </script>
 <description>
  <![CDATA[
<div id="testdiv">
<a href="{'http://146.129.110.197/flexviewers/app/Locations/'+Att.Locations.toString()}"  target=_blank>Location</a>
</div>
Location: {Locations} // HAS DATA I want to use in the javascript
Location2: {Att.Locations.toString()}  // NO DATA coming from javascript

</configuration>


Thanks for your time and help,
0 Kudos
AustinDavis
New Contributor III
David,

Are you successfully getting your "Locations" data to load into an object?

I assume you have a feature Layer with the field [Location] containing a link for each feature.
When you select (e.g. RollOver, click, etc.) a feature you should get it (i.e. event.target ). This should be returned to you as a graphic although you may need to cast it to a graphic.

In the event.target graphic, get the attributes (event.target).attributes. Then get the position of the [Location] attribute with something like "attributes[0]" or attributes["Location"].
This should return the link.

Unfortunately I usually code in flex and only vaguely familiar with the javascript API (although esri tells me there web api's are all similar). So i have described a logic I would use. I apologize for not solving your issue!
0 Kudos