Jump to content
  • 0

Open modal Image from Data Page button


BillW
 Share

Question

Hi,

The attached WORD file provides the details related to a problem that I have opening an image from a submission form.  I have also attached an .htm file that contains the Header contents from the affected data page.  The mysterious thing is that the code works perfectly when launched from the .htm file, but not when executed via the caspio server.

Please take a look to see what I'm missing....

Sincerely,

Bill W.

 

Open Modal Image Error.docx Updated W3 Modal Function.htm

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Hello @BillW,

It looks like the issue is related to how the JS code is loading when rendering the DataPage.

Please try to move all JavaScript code to the Footer section instead of the Header section.

I have tested the code you have provided in my account and it works when placed in the DataPage footer.

Hope this will help.

 

 

 

Link to comment
Share on other sites

  • 0
On 8/25/2020 at 6:09 AM, CoopperBackpack said:

Hello @BillW,

It looks like the issue is related to how the JS code is loading when rendering the DataPage.

Please try to move all JavaScript code to the Footer section instead of the Header section.

I have tested the code you have provided in my account and it works when placed in the DataPage footer.

Hope this will help.

 

 

 

Hi CoopperBackpack,

I did as you recommended and the image opened perfectly; however, now I can't 'close' the image.  Once again, the image opens and closes perfectly when I execute outside the caspio bridge.  I have moved the var span and associated function above the footer, but it didn't make a difference.  There are no console errors generated, so I have no idea what to try next.

Any suggestions???

Thank you,

Bill

Link to comment
Share on other sites

  • 0

Hello @BillW,

Could you double-check the code that you have on the DataPage?

Do you get element to the span variable as shown below? Do you have [0] index? Since the getElementsByClassName() method returns a collection of all elements, you need to use the index of the required element. 

var span = document.getElementsByClassName("close")[0];

Also, you may use another approach and to receive the element:

var span = document.querySelector(".close");

Feel free to update this thread in case you have any questions.

 

Link to comment
Share on other sites

  • 0

CoopperBackpack,

Thank you VERY much.  Your recommendation to add the index did the job.  Thank you for this advice and for providing the rationale as to why the index was needed.  I learned a lesson.  Have a great day and stay safe.

Bill

var span = document.getElementsByClassName("close")[0];
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...