nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

show/hide hyperlinks

DavidBrooks3

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,

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

AustinDavis

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!

DavidBrooks3

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,

AustinDavis

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?

DavidBrooks3

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>

AustinDavis

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?

DavidBrooks3

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,

AustinDavis

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>

DavidBrooks3

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.

AustinDavis

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.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.