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; } } }

Problem with popups in 4.13 and later

ShawnMoore

I've been trying to get my map to display a popup when a point on my feature layer is clicked and it looks like something has changed between ArcGIS js api 4.12 and 4.13 (and later) that breaks my code. I didn't see any notes in the release notes that indicated any required code updates for moving to later versions of the api.

Here's a code pen with the broken popup template (I've distilled this example to a very very basic map)

Link to Codepen

Run the code pen to recreate the problem (try clicking any point), then change the 2 api references from 4.13 to 4.12 and the popups work fine when you click a point on the map.

Anyone know why this works in 4.12 and not in 4.13 (or 4.16)?

Thanks!

Shawn

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Shawn,

Use a function to set the content and it avoids the sanitization of the popup content.

                <SPAN class="keyword token">var</SPAN> propertiesTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>  <SPAN class="comment token">// autocasts as new PopupTemplate()</SPAN>
                    title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<h5><strong>{bname}</strong></h5>"</SPAN><SPAN class="punctuation token">,</SPAN>
                    content<SPAN class="punctuation token">:</SPAN> contentFunc
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
          
                <SPAN class="keyword token">function</SPAN> <SPAN class="token function">contentFunc</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                  <SPAN class="keyword token">var</SPAN> div <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                  div<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> <SPAN class="string token">"123 Main St.<br/><br/>"</SPAN> <SPAN class="operator token">+</SPAN>
                        <SPAN class="string token">"<strong>"</SPAN> <SPAN class="operator token">+</SPAN> feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>category <SPAN class="operator token">+</SPAN> <SPAN class="string token">":</strong> 0.345<br/><br/>"</SPAN> <SPAN class="operator token">+</SPAN>
                        <SPAN class="string token">'<a target="_blank" href="mydetailpage.html?id=12345">View Details Page</a>'</SPAN>
                  <SPAN class="keyword token">return</SPAN> div<SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

SarahNoakes1_0-1732628015458.png

All comments

RobertScheitlin__GISP

Shawn,

If you switch your code to use JS API Next url then your code works fine.

<SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/next/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

So there has been a bug for a couple of version with this.

ShawnMoore

Thanks, Robert, getting closer....

The next branch gets us closer, but I think the new code has at least 1 more problem. I switched to next on my more detailed production map and had to make sure the outFields: was specified as all fields ( "*") otherwise it wouldn't work.

From there I thought I was done until I clicked on my link in the popup. (There's a link that takes the user to a specific properties page for the point on the map.)

In next any relative link is replaced with a link to the actual map html page. If I switch to 4.12, I get my relative link to my properties page, but next seems to wipe that out in favor of the current page.

It's a bit harder to show on code pen, but here's the pen. https://codepen.io/snmoore/pen/wvGNReZ If you change from 4.12 to next you can see the different in the url when you hover over the details link in the popup.

-Shawn

RobertScheitlin__GISP

Shawn,

Use a function to set the content and it avoids the sanitization of the popup content.

                <SPAN class="keyword token">var</SPAN> propertiesTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>  <SPAN class="comment token">// autocasts as new PopupTemplate()</SPAN>
                    title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<h5><strong>{bname}</strong></h5>"</SPAN><SPAN class="punctuation token">,</SPAN>
                    content<SPAN class="punctuation token">:</SPAN> contentFunc
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
          
                <SPAN class="keyword token">function</SPAN> <SPAN class="token function">contentFunc</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                  <SPAN class="keyword token">var</SPAN> div <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                  div<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> <SPAN class="string token">"123 Main St.<br/><br/>"</SPAN> <SPAN class="operator token">+</SPAN>
                        <SPAN class="string token">"<strong>"</SPAN> <SPAN class="operator token">+</SPAN> feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>category <SPAN class="operator token">+</SPAN> <SPAN class="string token">":</strong> 0.345<br/><br/>"</SPAN> <SPAN class="operator token">+</SPAN>
                        <SPAN class="string token">'<a target="_blank" href="mydetailpage.html?id=12345">View Details Page</a>'</SPAN>
                  <SPAN class="keyword token">return</SPAN> div<SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

SarahNoakes1_0-1732628015458.png

ShawnMoore

Thanks Robert this solved the problem!

note: I also had to add an outFields property in my propertiesTemplate with "*" to make other fields available in my more detailed production template.

i.e.

            <SPAN class="keyword token">var</SPAN> propertiesTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>  <SPAN class="comment token">// autocasts as new PopupTemplate()</SPAN>
                title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<h5><strong>{bname}</strong></h5>"</SPAN><SPAN class="punctuation token">,</SPAN>
                outFields<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>    <SPAN class="comment token">// specify outfields of * to get access to all fields in your content function</SPAN>
                content<SPAN class="punctuation token">:</SPAN> contentFunc
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

-Shawn

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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