NetTalk Central

Author Topic: setting an image in disconnected PWA app  (Read 4422 times)

jking

  • Sr. Member
  • ****
  • Posts: 419
    • View Profile
    • Email
setting an image in disconnected PWA app
« on: February 07, 2019, 08:34:15 AM »
Bruce,

I continue to struggle with my disconnected/PWA app.  One issue is images.  I want to display an image from the uploads folder, and the file name of the image is stored in a field.  See attached image. 

When I run the app all I see for the src attribute is src="/uploads/".  The file name contained in the field is not used, or does not seem to be "in scope" when creating the image control.  I have created some JS code to manually modify the src attribute and can call this from the onClick JS template field.  This is not ideal though, as I must click the blank image to get the control to display the correct image.  I would think the templates would be generating the necessary JavaScript code for me.

Now, if I do click the image control, get the image to display, I then close the form.  I select another record, go to view the image, but the previous image is still displayed.  I must again click the image control to get the correct image to display.  Seems the form that contains the image control is not updated with each record selected.

Thoughts or suggestions?

Thanks,

Jeff King
« Last Edit: February 07, 2019, 08:03:53 PM by jking »

jking

  • Sr. Member
  • ****
  • Posts: 419
    • View Profile
    • Email
Re: setting an image in disconnected PWA app
« Reply #1 on: February 07, 2019, 08:03:19 PM »
Bruce,

     As a workaround, I have created a JS function to change the src attribute of the image on the page.  The code is as follows:

         function setObverseImage() {
            $("#obvImage").attr("src", "/uploads/"+$("#CC__Coin_Image_Name_Obv").val());
    }

I call this function from a "tab change" embed and from the onChange template field for the CC:Coin_Image_Name_Obv field, which contains the file name of the image.  So, on an Insert, the image control shows the correct image.  On a Change, when the form opens, I select tab 3 which has the Image control, and the image displays as expected.  However, if I close/cancel/save the form, then immediately select a different record, the form opens on Tab 3 and has the old image.  I must select another tab (which fires the function in the tab change embed), then go back to tab 3 to see the newer image. 

I thought this was due to caching the image in the browser, so I added a parameter and a time stamp to the URL of the image.  For example:
     "/uploads/gold.jpg?c=1" or "/uploads/gold.jpg?timestamp=87854945775"

The problem remains so I don't think it is a caching issue.  I think it is a form refresh issue.  When I select a new record, all fields have the newer data, including the field with the image file name.  It just the form opens to the third tab with the old image displayed.  I need a way to fire my JS function to set the proper image.  I don't want to tab to another page or click on the image.  It should display automatically.

I have sent many examples and have attached a few here previously.  I can send more if needed, but I'm just spinning my wheels now.

Thanks,

Jeff

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11250
    • View Profile
Re: setting an image in disconnected PWA app
« Reply #2 on: February 10, 2019, 10:37:11 PM »
Hi Jeff,

sorry for the delay in getting back to you. Unfortunately I've got a bit of code to write on one of our commercial apps - something I've been putting off for years, that just has to get done. So I'll be "out of action" (as it were) for a couple weeks - then I can get back to making changes to NetTalk.

cheers
Bruce