How can I execute javascript after page load in IE11?

This issue only occurs when using IE11 with Outsytems11.

I write a script at the bottom of the page to get the width of the table. But I can not get the table width correctly. In Chrome, the expected result is returned.

"<script>
    $(document).ready(function () {
        var w = $('#" + ContactTable.Id + "').width();
        alert(w);
    });
</script>"

In IE, it looks like the script is being executed before page load. Please tell me the solution.

In addition, if it is Outsystems10, it works also with IE11. Why?

Hi Sadanobu,

Thanks for a well described problem and uploading the oml.

I can reproduce the issue. Yes, it appears there is a delay in OutSystems 11 to make the table the correct size.

Potentially this is caused by the responsiveness of OutSystemsUI, as it is responsive in the client, unlike SilkUI which requires server processing.

I modified your script to get more information and to detect when IE would have the appropriate table width.

It appears all rows are present in document ready, but the width is set within 0.02 seconds (in my IE 11, on my machine).

I hope this helps.

"<script>
    var element = $('#" + ContactTable.Id + "');
    var count = 0;
    var delay = 10; // milliseconds
    function displayWidth() {
            var rows = element.find('tr').length;
            var w = $('#" + ContactTable.Id + "').width();
            if ((rows > 0 && w > 100) || count > 10) {
                alert('Width = ' + w + ', rows = ' + rows + ', waited = ' + (count * delay / 1000.0) + ' seconds.');
            } else {
                count++;
                setTimeout(displayWidth, delay);
            }
    }
    $(document).ready(displayWidth);
</script>"

Hi again Sadanobu,

After further investigation, it appears the width still reports 100 after the "translatedToResponsive" class has been added to the table.

Normally its not good form to suggest a different approach, however, in this case, it would help to understand your objective. Then community users may be able to suggest an alternative approach where you can avoid having to dive into jQuery.

Many issues can be resolved with the existing controls and classes.

Kind regards,

Stuart

Stuart Harris wrote:

Hi again Sadanobu,

After further investigation, it appears the width still reports 100 after the "translatedToResponsive" class has been added to the table.

Normally its not good form to suggest a different approach, however, in this case, it would help to understand your objective. Then community users may be able to suggest an alternative approach where you can avoid having to dive into jQuery.

Many issues can be resolved with the existing controls and classes.

Kind regards,

Stuart


Hi Stuart,

Thank you very much for your helpful suggestions.
I have implemented a jQuery plugin that manipulates the table. At that time I need to get the width of the table.
Your suggestion is very useful to me this time, but I would like OutSystems to work around the underlying problems.
Since I created and checked a module that does not use Outsystems' Base Theme, but this module does not cause any problems. I think that there is a problem with CSS.