pass string varialbe to placeholder for attribute in infoWindow (ArcGIS Javascript)

Question

I am working on a Javascript-based webapp that uses an ArcGIS map service, which has several attribute columns containing URLs to photos. The user will be able to open photos by clicking on a link in the infoWindow, accessed with an IdentifyTask. I would like to use a variable in the placeholder. My problem is I can't find a way to pass a string variable into the placeholder position. Below is an example:

In my code, I have onclick=\"javascript:showPicture('${PrePic1} where HTTP is the name of a column containing photo links.

I would like to use a variable, such as 'testString' so that I may vary the attribute in the placeholder (for instance, PrePic2, PrePic3 etc..)

I have tried setting a var to just 'PrePic1" and placing this in the brackets, and have tried '${PrePic1}' (with and without escape characters)..but these attempts didn't work..

any ideas? I hope I am explaining the problem well // Jason

Answer 1

Looks Like you are using the Dojo syntax (${key}), which identifies the field that will be used in the parameter substitution.

In this case you have something like

<a href=\"#photoViewer\" onclick=\"javascript:showPicture('${HTTP}');\">link here</a>

where ${HTTP} is a substitution for the value in the attribute field of HTTP from your feature (another attribute example is ${OBJECTID}).

I am not entirely certain of your intent, but if you have 3 different fields all storing image URLs you may want to access them like this.

<a href=\"#photoViewer\" onclick=\"javascript:showPicture('${HTTP_1}');\">link 1</a>

<a href=\"#photoViewer\" onclick=\"javascript:showPicture('${HTTP_2}');\">link 2</a>

<a href=\"#photoViewer\" onclick=\"javascript:showPicture('${HTTP_3}');\">link 3</a>

If you are looking to do something more dynamic and less hard-coded... you could try something like

var urlFieldName = 'HTTP';

var htmlContent = "<a href=\"#photoViewer\" onclick=\"javascript:showPicture('${" + urlFieldName + "}');\">link 4</a>"

your comment earlier was:

I tried things like; ('${' + HTTP + '}') but no luck

I think here you used single quotes where you needed double:

I tried things like; ('${" + HTTP + "}') but no luck

The one piece to keep in mind is... getting the substitution is only part of the solution, the field name must also be correct (and I think it is case-sensitive).

Answer 2

If I'm understanding, the quotes, escapes and substitution are giving you a problem -- common issue. Probably, you want to set the onclick event handler in your javascript. Best practice is to avoid javascript in your html.

This may not be quite right, but you get the idea of setting the onclick event to the links.

infoWindowHtml = "<a id='" + thePictureID + "' href='#' class='identifyHL' >Show Picture</a></td>";        

dojo.connect(dojo.byClass(".displayLink"), "onClick", function (evt) {
    showPicture(dojo.attr(this,"id"));
    dojo.stopEvent(evt);
});

function showPicture(identifyLayerKey) {
    //do something
}

If you don't want to use the id attribute, in HTML5 you can now add your data attributes. See http://dojotoolkit.org/features/1.6/html5data-attributes or http://www.spatialexception.org/posts/tip-use-jquery-data-method-instead-of-random-html-attribute