Button on Popup

2836
6
Jump to solution
01-06-2016 07:54 AM
BillChappell
Occasional Contributor II

I have a button on a popup, if the attribute field is numeric, it passes the value to my function, if it's a string it fails.

infoTemplate: new InfoTemplate("CI Data", "Facility ID: ${ID} <br/> Facility Name: ${NAME} "

    + "<br/> County Name: ${CNTYNAME} <br/> City or Town: ${CITYTOWN}"

    + "<br/> Location Verified Date: ${VERDATE}"

    + "<br/> <button onclick='"

    + "ClickMe(${CNTYNAME});'"

    + ">Google</button>")

if the value is Albany, firebug says "Albany is not defined"  if I pick a text field like address I get "missing ) after argument list". I scoured google and it looks like it doesn't like unquoted values, I've tried the string() and toString functions with out luck. Any ideas?

Thanks..

0 Kudos
1 Solution

Accepted Solutions
ChrisSmith7
Frequent Contributor

You might need to escape your quotes; here's an example how I set my content:

contextPopupTemplate.setContent("<div><strong>Foo: ${foo}</strong></div>" + 
                                            "<hr>" + 
                                            "<strong>Bar: </strong> ${bar}<br />" + 
                                            "<strong>Bat: </strong> <a href=\"#\" onclick=\"window._contextPopup._initPopup(\'" + batLink + "\', 2);\">Bat</a>")

View solution in original post

6 Replies
ChadKopplin
Occasional Contributor III

On your last line does your > need to be outside the quote?  Also, does the semicolon on the second to last line need to be outside of the quote as well?

0 Kudos
BillChappell
Occasional Contributor II

It has to be inside as it’s part of the html tag. The whole HTML string is quotes, thus the last closing quote.

However I tried it just to confirm it.

Thanks,

Bill

0 Kudos
ChrisSmith7
Frequent Contributor

You might need to escape your quotes; here's an example how I set my content:

contextPopupTemplate.setContent("<div><strong>Foo: ${foo}</strong></div>" + 
                                            "<hr>" + 
                                            "<strong>Bar: </strong> ${bar}<br />" + 
                                            "<strong>Bat: </strong> <a href=\"#\" onclick=\"window._contextPopup._initPopup(\'" + batLink + "\', 2);\">Bat</a>")
SteveCole
Frequent Contributor

I would use a formatting function instead of trying to accomplish this in one JS line. Here's an example from one of my projects:

SetSwmPopupInfo: function(graphic) {
    var fullAttr = graphic.attributes;
    var rptParam, content, theProjID, theTipType;
    var theCipID = fullAttr.ProjectNo;
    
    var features = [];
    features.push(graphic);
    var fSet = new FeatureSet();
    fSet.features = features;
    app.curInfoGraphic = fSet;
    
    rptParam = "'" + graphic.attributes.OBJECTID + ',' + graphic.geometry.type + ',' + "SWM" + "'";
    rptProjectName = graphic.attributes.ProjTitle;
    
    if (theCipID.length > 1) {
        theProjID = fullAttr.ProjectNo;
    } else {
        theProjID = "Unknown";
    }
    
    content = '<table width=\"100%\"><tr><td valign=\'top\' style=\"font-weight:bold;padding-left:3px;padding-right:3px\">Project Name:</td><td valign=\'top\' style=\"padding-left:3px;padding-right:3px\">' + fullAttr.ProjTitle + '</td></tr>';
    content = content + '<tr><td valign=\'top\' style=\"font-weight:bold;padding-left:3px;padding-right:3px;vertical-align:top\">CIP Project ID:</td><td valign=\'top\' style=\"padding-left:3px;padding-right:3px;vertical-align:top\">' + theProjID + '</td></tr>';
    content = content + '<tr><td valign=\'top\' style=\"font-weight:bold;padding-left:3px;padding-right:3px;vertical-align:top\">Type of Project:</td><td valign=\'top\' style=\"padding-left:3px;padding-right:3px;vertical-align:top\">' + fullAttr.Category.toProperCase() + '</td></tr>';
    content = content + '<tr><td colspan=\"2\"><br/><div style=\"margin:0 auto;display:table;line-height:28px;\"><button id=\"reportButton\" type=\"button\" onclick=\"app.trf.getTractProjectReport(' + rptParam + ')\">View a Summary Demographic Report  (Census Tract Level)</button><br\>';
    content = content + '<button id=\"reportBlockButton\" type=\"button\" onclick=\"app.brf.getBlockProjectReport(' + rptParam + ')\">View a Summary Demographic Report  (Block Group Level)</button></div></td></tr></table><br/>';
    
    return content;
}

Which looks like this once viewed in the application:

infoWindowEx.jpg

BillChappell
Occasional Contributor II

It was a quote problem, 

The fix:

+ "<br/> <button onclick=\"ClickMe(\'+ ${GCADDRESS}+ \');\">Google</button>")

Now my button click passes the value in this field to a function.

Steve, for the record I did like your method and may use it in the future, however this was a quick and simple fix on a tight deadline. Thanks,

SteveCole
Frequent Contributor

No worries. It's all about getting it done!

0 Kudos