wjPopup with Knockout Binding gives console error on updating to Wijmo 5.20232

Posted by: dev on 11 March 2024, 5:48 am EST

  • Posted 11 March 2024, 5:48 am EST - Updated 11 March 2024, 5:54 am EST

    We encountered this error following an update to Wijmo ‘5.20232.939’ from ‘5.20202.699’.

    Here is an example demonstrating when the error occurs. We have used a wjPopup binding, and in the JS viewmodel, a knockout observable was utilized before applying the binding. This triggers the appearance of a console error. It appears to be specific to the wjPopup component. The error says ‘You cannot apply bindings multiple times to the same element’.

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8" />
        <link href="https://cdn.mescius.com/wijmo/5.20232.939/styles/wijmo.min.css" rel="stylesheet" />
    </head>
    
    <body>
        <div data-bind="wjPopup:{}"></div>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
        <script src="https://cdn.mescius.com/wijmo/5.20232.939/controls/wijmo.min.js"></script>
        <script src="https://cdn.mescius.com/wijmo/5.20232.939/controls/wijmo.input.min.js"></script>
        <script src="https://cdn.mescius.com/wijmo/5.20232.939/interop/knockout/wijmo.knockout.min.js"></script>
        <script>
            this.model = {
                dialog: ko.observable()
            }
            ko.applyBindings(this.model);
        </script>
    </body>
    </html>

    Attaching a screenshot of the console error and an HTML file containing the above-mentioned example, the error can be found in the browser console by simply opening the file.

  • Posted 13 March 2024, 12:16 am EST

    Hi,

    Sorry for the delayed response, we are investigating this issue, and update you soon on it’s progress. For now, to avoid this issue you can set the ‘removeOnHide’ property of the popup to true.

    Please refer to the following code snippet -

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8" />
        <link href="https://cdn.mescius.com/wijmo/5.20232.939/styles/wijmo.min.css" rel="stylesheet" />
    </head>
    
    <body>
        <div data-bind="wjPopup:{removeOnHide: true}"></div>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
        <script src="https://cdn.mescius.com/wijmo/5.20232.939/controls/wijmo.min.js"></script>
        <script src="https://cdn.mescius.com/wijmo/5.20232.939/controls/wijmo.input.min.js"></script>
        <script src="https://cdn.mescius.com/wijmo/5.20232.939/interop/knockout/wijmo.knockout.min.js"></script>
        <script>
            this.model = {
                dialog: ko.observable()
            }
            ko.applyBindings(this.model);
        </script>
    </body>
    </html>

    Regards

  • Posted 13 March 2024, 4:24 pm EST

    Hi,

    We have forwarded this issue to the dev team for further investigation, with internal tracking ID - WJM-33546, We will update you when we have some update from the dev team.

    Regards

  • Posted 19 March 2024, 6:30 am EST

    Thanks, in the meantime we are using the removeOnHide workaround you provided in order that we can upgrade. It does require another change, to move .show() before any initialization of the dialog state, but it does work. Looking forward to the fix so we can remove these workarounds.

  • Posted 19 March 2024, 3:22 pm EST

    Hi,

    The dev team is working on this issue, we will update you when we have some updates from the dev team.

    Regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels