Open modal Image from Data Page button

[BillW]

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

[CoopperBackpack]

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.

 

 

 

[BillW]

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

[CoopperBackpack]

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.

 

[BillW]

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

[Kurumi]

Hi! Just an update on this, Caspio has a new Tech tip called Zooming in and out of Images in Report DataPages. To know more on how to implement it in the DataPage, you can check it here: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/zooming-images-in-report-datapages/

[Kurumi]

Hi! Just an update - if you have a modal that is showing behind the Results Page, you can use this code in the Header:

<style>

.modal {
 z-index: 9999 !important;
}

</style>

In addition, if you would like to automatically adjust the size of the modal based on its content. You can use this code in the Header as well:

<style>

body .modal-dialog { /* Width */
max-width: 50%;
width: auto !important;
}

</style>