Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum

Hi,

AiP was working fine 3 days ago, but after updating to latest version v7.5.1, auto-height resize stopped working.

I saved the configuration to update the Javascript that loads on the external web page but still not working.

To test it, just fill the main form, click the "Compara Ya!" button and the next window doesn't resize. A few days ago, it resized to the proper height several times until all insurance companies were loaded. In "Selecciona tu vehículo" you will be asked for 4 inputs "Modelo, Marca, Línea, Descripción" in the same dropdown menú field. In "C.P." field type "64000": https://www.traigoseguro.com

You can continue selecting an insurance company and follow the process filling fake data, all the process used to work fine 3 days ago.

As far as I can see, external webpage https://gconline.segupoliza.com has javascript code and class element ".main-container" correctly.

I just set scrolling to yes temporarily after it stopped working so prospects can still follow the complete process.

This is the configuration I'm using (scrolling just temporarily while autoresize works again):



Can you help me solve this issue please?

If you need wp admin access, just let me know how to send you login details privately.

Thanks!

Sergio

You have javascript errors because you have set:

resize_on_element_resize=".main-container"
resize_on_element_resize_delay="100"

in the shortcode. This is not allowed in the short code if you use ai_external.js

This are settings for the same domain! You need to set this in the administration only that is is saved to ai_external.js

The height is sent properly to the parent. I see the request.

Please fix the error and retry.

Best, Michael

Hi Michael,

Thanks for your reply.

The only shortcode I'm using is:



For you to see the configuration settings, I clicked on the "Generate a shortcode for the current settings" button and listed the variables for you to see, but I'm not using this shortcode that includes settings as shortcode attributes.

Since the day I purchased AiF, in the "Advanced Settings" section, I set the "Resize on element resize: .main-container" and asked the iFrame website owner to add this class in a div in his code, along with the js code.

I also set the "Poll interval for the resize detection: 100".

In the "External Workaround" section, I don't recall editing anything, I think I left everything as it came by default and worked fine until a few days ago.

As you explain in your reply, I'm not sure what to do, could you help me explaining with a bit more detail like, "In the WorkAround section, enable/disable this...". Or if you want WP admin access, just let me know how I can send you access details privately for you to see the configuration.

Thanks again Michael!

Regards,

Sergio

But this is not o.k.

As you run the external workaround you need also to do step 2:
2. Add enable_external_height_workaround="true" to your shortcode! This is needed to disable the settings for the same domain.

Please do this first.

Best, Michael

Please check on the "external workaround" tab.
In one of the last versions I added a new option at: Resize remote iframe to content height: If this is set to yes you don't need enable_external_height_workaround="true".
Have you set this maybe?

Best,
Michael

Hi Michael,

Ok, this time I tried using the following shortcode:



I tried it with and without the following attribute:



And it did not work. Then I tried this last one according to what I understood from your last reply:



But it still doesn't work.

Force full reloads with ctrl+F5 in each attempt.

Here are a series of images of what I see and my AiF configuration settings:

1) Opening www.traigoseguro.com, I see part of the content of the iframe:



2) Then I see the iframe window adjusts height a moment later:



3) I fill the form:



4) Now the auto-height doesn't work, the iframe height stays the same as the form in the section before this one:



5) These are my basic configuration settings, the ones I used at the beginning of the last tests:



Remember, I ended up using just this shortcode, but still auto-resize height doesn't work:



6) Even though I understand that enabling the above parameter disables the advanced settings, I'll show them here:





7) Now here are the external workaround settings:





Whenever I try chosing "Yes" in the "Resize remote iframe to content height", it returns to "External" automatically.

I tried also chosing "Yes" in the "Use postMessage for communication" but still the auto-height won't work in the second section after filling the first section form.

I'm also making sure the js file for external workaround is being updated and it is every time I save settings.

I hope you can find what I'm doing wrong to fix this issue. If you need me to test or change settings, please let me know.

Thanks Michael!

Regards,

Sergio

I see a lot of resize callbacks
https://www.traigoseguro.com/wp-content/plugins/advanced-iframe/js/iframe_height.html?height=457&width=2014&id=advanced_iframe

which is fine. Then it load forever for me.

I the log I only see:
POST https://webapi.segupoliza.com/Quotes/Cars/Payments/Deals/CE 524 ()
gconline.segupoliza.com/#/quotes/new:1 Failed to load https://webapi.segupoliza.com/Quotes/Cars/Payments/Deals/CE: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://gconline.segupoliza.com' is therefore not allowed access. The response had HTTP status code 524.

This is an exception from the other page.

But I also have other scenatios where I see a resize event but always with a height of 476. But the div with main-container has a height of 1156.

I need to check why this is a problem...

Best, Michael

Can you set the resize/css delay to 0? I think there could be a problem with the fallback.

Best, Michael

Can you modify js/ai_external.template.js?

search for:
function resizeLater_PARAM_ID

there is a line:
if (newHeight > 10) {

Can you add

iframe_PARAM_ID_last_height = newHeight;

before that. Then save the administration again to get a updated ai_external.js. Flush the caches and retry.

Best, Michael

Hi Michael!

I'm so happy because AiF it started working again!

Here is what I did:

Following your first reply, I set "Resize/ css modification delay" to "0" and tested the iFrame and in the second section where the resize height was failing, it resized correctly. There is a delay of about 1 or 2 seconds between the moment I see the iframe content changing and the height resize, but this is no problem.

Then following your second reply instructions, I edited /js/ai_external.template.js file:



I once again saved settings, flushed caches and the height resizes correctly.

1) Do you want me to test anything else?
2) For now, should I keep the "Resize/ css modification delay" set to "0"?

I'll update this post in case something fails again.

Thank you so much Michael!

Best Regards,

Sergio

you can increase the resize delay if you want. It would be interesting if it works then still for you.

Best, Michael

Hi Michael,

I tested 3000 ms in the "Resize/ css modification delay" and it works fine. I can see the 3 second delay, but for now I'll disable the delay.

1) To take preventive measures, do you know what could have caused AiF to stop working?

There is another section where the iFrame content makes the height very long because there are several forms that have to be filled. When the user submits the form, the iFrame content height becomes very short showing just a message of the submit success, but the user is not automatically scrolled up so they can't see the message. It can become confusing because for the users, everything just disappear.

I saw there is a "Scrolls the parent window/iframe to the top" in the "Advanced Settings" tab but I'm guessing this does not apply when iFrame is in a different domain.

2) Do you know if there is a way to make parent window to scroll up when the iframe content height is reduced to a point it disappears?

Best Regards,

Sergio

You have to check if you really need such a delay.

the problem was that I did some optimizations that the new height was only sent if it really changes. But in the resize later the latest height was not updated (In that case I had a fallback of 0). Adding the additional line solves this.

In 7.5.2 I have further improved this as the delay only makes sense for the first real request. After that I now set the delay to 0 as the "resize on element" resize triggers this function and there a delay is not needed anymore.

Scrolls the parent window/iframe to the top does work for all setups as it only listens on a ready event of the iframe. Indepentent where the iframe is located. But it does not work for any one page websites where no reload of the page happens.

Best, Michael