Programatically add hyperlinks to popup

1818
4
07-24-2013 12:48 PM
JeffPace
MVP Alum
I am using a popup in a side panel.  It is a tabContainer. 

I have a details tab which I am writing the content to, works great.

I would like a LINK panel, which contains a number of hyperlinks for each popup item.

How do i attach the hyperlinks to the content? Right now I have a JSON Array of hyperlinks that is generated at the same time as my popup content.

psuedo code


//start loop for each feature

//how do i put these in the popup so i can access them later?
var links = [{link1: 'http://...", link2: 'http://....'}]

//popup content
 var fieldInfos= [];
                    dojo.forEach(fieldNames, function(name){
                        fieldInfos.push({
                            fieldName: name, visible:true
                        });
                    });
                 //   alert(fieldInfos);
                    var g = new esri.Graphic(f.geometry, sym, attrs);
                    g.setInfoTemplate (new esri.dijit.PopupTemplate({
                          title: title,
                          fieldInfos: fieldInfos
                        }));
map.graphics.add(g);
features.push(g);

//end loop

this.popup.setFeatures(features);
this.popup.select(0);

0 Kudos
4 Replies
JeffPace
MVP Alum
Appreciate the links, but they dont help.

Mainly because they hardcode everything down the to field values

I ended up just appending the links onto the feature as it comes back to the query. Then i loop through and set the links and manually create the dom elements and write them to the links tab.

var links = feature.attributes.links;
                        for (var key in links) {
                          if (links.hasOwnProperty(key)) {
                         if(links[key]){
                            var a = dojo.create('a',{ href: links[key],target:"_blank"}, dojo.byId('resultLinksTab'));
                            var img = dojo.create('img',{ src:"images/"+key+".png"}, a);
                            dojo.addClass(img,'resultLink');
                              }
                          }
0 Kudos
NickO_Day
New Contributor III
Jeff,
I struggled with this for a while and ended up using some jQuery to convert a raw URL into a simple href on the fly.  In the code, I search for all of the elements in a table (td) that start with "http://" and then convert them to an href that shows the user a simple "Click here".  It has some downsides, but it works for what we need it to do.  Here's the code:
function hrefLinks()
{
    //Grab all TD elements that have http://
    var $tds =  $('td:contains("http://")');
    
    $.each($tds, function(i, td){
        //each returns a raw element, so wrap in jQuery for convenience
        var $td = $(td);
        
        //save original url
        var url = $td.html();
        
        //change TD's HTML
        $td.html('<a href="' + url + '" target="_blank">Click here</a>');
    });
}
function schedule_hrefLinks()
{
    setInterval('hrefLinks();', 200); 
}

schedule_hrefLinks();


Good luck!

Nick
0 Kudos
JeffPace
MVP Alum
I am pretty surprised that the popup class doesnt support a "hyperlink" data type.  Thats the point of gis right? bring data together? Spatial Links?

I have (for example) parcels, which i can generate 5+ hyperlinks on (appraiser, tax collector, permitting, google, document management, etc..) simply with the parcel id.

Oh well, its handled for now.
0 Kudos