I have an info template that is just a single picture from a traffic camera that's inserted using the media type. Nothing fancy here. I want it to update the image every second but I cant seem to get the node for the image. I've used every kind of getElementsBy and querySelector and combination of the two that I can think of but the image eludes me. The best I have gotten is using what I have below which yields me an html collection with one object, the esri-popup-renderer__media-item, that has the image as a child but when I try to search it for the img tag I get nothing. I tried jQuery selection with $(".esri-popup-renderer__media-item img:first") but it returned the entire html document.
If there is an easier way to make this image update I'm willing to completely abandon this strategy.
view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"visible"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>visible<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>visible <SPAN class="operator token">===</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> media_item <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementsByClassName</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"esri-popup-renderer__media-item"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>media_item<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> image <SPAN class="operator token">=</SPAN> media_item<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementsByTagName</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"img"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>image<SPAN class="punctuation token">.</SPAN>src<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">updateImage</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
image<SPAN class="punctuation token">.</SPAN>src <SPAN class="operator token">=</SPAN> image<SPAN class="punctuation token">.</SPAN>src<SPAN class="punctuation token">.</SPAN><SPAN class="token function">split</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"?"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"?t="</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Date</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">getTime</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">var</SPAN> image_refresh_interval <SPAN class="operator token">=</SPAN> <SPAN class="token function">setInterval</SPAN><SPAN class="punctuation token">(</SPAN>updateImage<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN><SPAN class="punctuation token">{</SPAN>
<SPAN class="token function">clearInterval</SPAN><SPAN class="punctuation token">(</SPAN>image_refresh_interval<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><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></SPAN><SPAN></SPAN></SPAN>