Issue returning getElementById().src in app connect custom formatter

Coffee Lounge
1

Hi all
i suspect this is down to my poor .js skills but if anyone can help.

I have a image defined in a column

image

the contents are dynamic

image

contents are taken from a defined variable

image

within that dynamic attribute, a formatter is applied passing the ID

image

what i need to do is get the src of the image referred to by the ID, in this case 'myImageID"

if i examine the object by reference to the ID with:

console.log(document.getElementById('myImageID'))

i can see the attributes in the console including the src attribute i want

image
image1436×847 44.6 KB

Shouldn't i be able to access the src with

document.getElementById('myImageID').src

but if i add

const current_image = document.getElementById('myImageID').src
console.log("current src: " + current_image)

and examine the console i see an empty value

image
image936×252 4.02 KB

also tried

document.getElementById('myImageID').getAttribute('src')

which outputs null

image

Anyone any ideas?

2 
const current_image = document.getElementById('myImageID');
let imgSrc = current_image.getAttribute("src");
1 Like
3

You had me excited for a moment my friend but :slightly_frowning_face:

var current_image = document.getElementById('myImageID')
var imgSrc = current_image.getAttribute('src')
console.log('Src is: ' + imgSrc)

gives null

image

4

hmmm...

document.getElementById('myImageID').attributes returns an array of the img attributes...

Do you get any of these attributes?

5

Are you sure the src is actually available when you call the script?
What happens when you test this with a static image?

1 Like
6

i believe it should but...

tried to keep explanation simple but i am trying to replicate something similar to srcset. i was, and still am, worried the explanation will actually cause more confusion!

The images are in the assets folder.

They are called as a dynamic value from the image component but by refence to their location as a reference held in a variable

so we have

<dmx-value id="var1" dmx-bind:value="'myimage.png'"></dmx-value>

and

<img dmx-bind:src="'/assets/images/'+var1.value.dummy('myImageID')" id="myImageID" class="img-fluid">

with the function applied accordingly
so i assumed that the data would be ready immediately but perhaps not?

7

Brian

I started playing with it and basically I think that this is a timing issue (formatter triggers with an img without a "src" value and aborts)...

If dmx-bind:src has been set (exists on code), the img throughs an error on page load and then when the dynamic value is recovered, it gets populated.
I mean the problem should be there, the initial error that is thrown until the dynamic src is evaluated. I think that if on the first img load there is an error (loading...) then the formatter is aborted

I may be wrong but I would suggest:

  1. Do not use the dmx-bind:src
  2. Pass the value of the image source as an argument/parameter to your javascript.
    I suppose you need to fo that on the success event of your DataSourse (query or whatever...)
  3. set the "src" attribute

for example

<div class="container-fluid">
    <div class="row align-items-center h-100">
        <div class="col">
            <img id="myImageID" class="img-fluid" width="400">
        </div>
        <div class="col mh-100 align-self-center">
            <input id="imgSrc" name="imgSrc" type="text" class="form-control" value="screenshot2.webp">
            <button id="btn_setSrc" class="btn btn-danger" onclick="setImgSrc()">Button</button>
        </div>

    </div>
</div>

A simple layout with a column containing an img element (without dmx-bind:src)

  • I have an input and a button
  • I set the input.value to the source of the image I want
  • On button.click I run a function and pass the input.value as an argument:
function setImgSrc(imgsource) {
    const current_image = document.getElementById('myImageID');
    let imgSrc = current_image.setAttribute("src", imgsource);
}

This way I have no error...

Now, If instead of the above, I call the function setImgSrc(imgsource) on page load, even if a static value is set on the input, it would first through a 404 error and then show the image on page

8

Thanks for your time tasos, sorry about delay, was at cinema watching Deadpool and Wolverine.

Unfortunately the src value is only needed when the window resizes so this has to be a dynamic value as the purpose of the formatter is to change the image src as the view port changes.

Switching images is easy and works well and the formatter currently refreshes the full page on size change but that is not cosmetically nice.

So i want to refresh the image only, not the full screen hence needing to manage the src value.

Need to look at waiting until DOM is ready.

9

To test for timing issue i wrapped the code in a 500ms setTimout()

 setTimeout(function () {
      console.log('refresh_id: ' + refresh_id)
      console.log(document.getElementById('myImageID'))
      var current_image = document.getElementById('myImageID')
      var imgSrc = current_image.getAttribute('src')
       console.log('Src is: ' + imgSrc)
                    }, 500)
}

and all works as it should

Thanks @Teodor for pointing me in the timing direction even if i blame the Wappler team for making AC2 so incredibly fast thus causing the timing issues :rofl:

Also huge thanks to @famousmag for the time and effort he put into helping with this issue. You make a huge contribution to this forum and deserve praise my friend.

1 Like