0

ZK a loading screen block the access to a page

asked 2018-12-14 22:22:08 +0800

WilliamBakker gravatar image WilliamBakker
1

updated 2018-12-19 10:55:06 +0800

cor3000 gravatar image cor3000
6280 2 7

Hi I use zk in version 8.5.1.1 in my application.

I have a problem when i try to access a screen in a specific version of browser (IE11).

When i try to access a screen, a loading screen comes up and blocks the access to the actual page, after 30 seconds the user is redirected to a zk error page.

Error code 2: ZK error, mounting.

Something went wrong while loading the page.

Please try to reload or visit another page. If you are the administrator, try to check your Javascript or Network console.

In the console of the browser, i see this error :

SCRIPT5007: Unable to get property 'id' of undefined or null reference

zk.wpd (344,116)

When i try to debug the js : zk.eff.Shadow=zk.$extends(zk.Object,{$init:function(a,b){ this.wgt=zk.Widget.$(a.id);

The variable a is undefined but i don't know why this part of code is called.

I posted here the zul :

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./DetailGrilleTarifaire"?>
<?page title="${labels.grilletarifaire.detail.titre}" contentType="text/html;charset=UTF-8"?>
<window id="DetailGrilleTarifaire" border="none" height="100%"
    apply="com.orange.ctrl.grilletarifaire.DetailCtrlConsult" xmlns:ca="client/attribute">
    <script type="text/javascript">
          function unloadFunction() { zAu.send(new zk.Event(zk.Widget.$(this),
        'onUnload', '')); }

        if (window.attachEvent) {
            window.attachEvent("onbeforeunload", unloadFunction);
        }else if (window.addEventListener) {
            window.addEventListener("beforeunload", unloadFunction);
        }
    </script>

    <style>
    input {
        padding:0;margin:0;
    }
    #zc_Paging_0-info {
      top : 4px;
    }
    </style>
    <borderlayout id="Layout1">
        <north id="Layout1_North" border="none">
            <include id="header" src="/include/header.zul" vflex="min"/>
        </north>
        <center id="Layout1_Center" autoscroll="true">
            <borderlayout id="Layout2">
                <west id="Layout2_West" title="Navigation" border="none"
                    collapsible="true" size="400px" maxsize="400" splittable="true"
                    style="overflow-y:auto;">
                    <include id="arbre" src="/common/arbre.zul"/>
                </west>
                <center id="Layout2_Center" border="none"
                    autoscroll="true">
                    <div>
                        <hbox align="center">
                            <button id="btnSynthese" class="button-puce"
                                label="${labels.gamme.detail.btnSynthese}"
                                image="/images/corporate/boutons/button_special_icon_next.gif" />
                            <button id="btnJournal" class="button-puce"
                                label="${labels.gamme.detail.btnJournal}"
                                image="/images/corporate/boutons/button_special_icon_next.gif" />
                            <div id="divTnt" style="margin-left:15px">
                                <label id="lblTnt" sclass="message">
                                </label>
                            </div>
                        </hbox>
                        <groupbox id="boxProprietes" mold="3d"
                            open="true" sclass="opentrue"
                            title="${labels.grilletarifaire.detail.proprietes}">
                            <caption
                                label="${labels.grilletarifaire.detail.proprietes}"
                                sclass="triangle">
                            </caption>
                            <grid sizedByContent="true"
                                class="FormGrid">
                                <rows>
                                    <row>
                                        <cell>
                                            ${labels.grilletarifaire.detail.filiale}
                                        </cell>
                                        <cell>
                                            <combobox id="cmbFiliale"
                                                readonly="true"
                                                model="@{DetailGrilleTarifaire$composer.dataFiliales}"
                                                cols="18" value="">
                                                <comboitem
                                                    self="@{each=filiale}" label="@{filiale.valeur}"
                                                    value="@{filiale.cle}" />
                                            </combobox>
                                        </cell>
                                    </row>
                                    <row>
                                        <cell>
                                            ${labels.grilletarifaire.detail.dureeEngagement}
                                        </cell>
                                        <cell>
                                            <combobox
                                                id="cmbDureeEngagement" readonly="true"
                                                model="@{DetailGrilleTarifaire$composer.dataDureeEngagement}"
                                                cols="18" value="">
                                                <comboitem
                                                    self="@{each=dureeeng}" label="@{dureeeng.valeur}"
                                                    value="@{dureeeng.cle}" />
                                            </combobox>
                                        </cell>
                                    </row>
                                    <row id="rowLibelle"
                                        visible="false">
                                        <cell>
                                            ${labels.grilletarifaire.detail.libelle}
                                        </cell>
                                        <cell>
                                            <textbox id="txtLibelle"
                                                disabled="true" value="@{$composer.grilleEnCours.lib}"
                                                cols="18">
                                            </textbox>
                                        </cell>
                                    </row>
                                    <row id="rowDevise">
                                        <cell>
                                            ${labels.grilletarifaire.detail.devise}
                                        </cell>
                                        <cell>
                                            <combobox id="cmbDevise"
                                                readonly="true" model="@{$composer.dataDevise}" cols="18"
                                                constraint="no empty">
                                                <comboitem
                                                    self="@{each=devise}" label="@{devise.valeur}"
                                                    value="@{devise.cle}" />
                                            </combobox>
                                        </cell>
                                    </row>
                                    <row>
                                        <cell>
                                            ${labels.grilletarifaire.detail.dateDebut}
                                        </cell>
                                        <cell>
                                            <datebox id="dateDebut"
                                                value="@{$composer.grilleEnCours.datdeb}" cols="12"
                                                format="dd/MM/yyyy" mold="rounded" constraint="no empty" />
                                            <monthbox id="dateDebutODB"
                                                value="@{$composer.grilleEnCours.datdeb}" cols="12"
                                                format="dd/MM/yyyy" constraint="no empty" />
                                        </cell>
                                    </row>
                                    <row id="rowVgprx"
                                        visible="false">
                                        <cell>
                                            ${labels.grilletarifaire.detail.vgprx}
                                        </cell>
                                        <cell>
                                            <textbox id="vgprx"
                                                constraint="/[0-9]*/:${labels.contraintes.numerique}"
                                                maxlength="6"
                                                value="@{DetailGrilleTarifaire$composer.grilleEnCours.vgprx}"
                                                cols="6" />

                                        </cell>
                                    </row>
                                    <row>
                                        <cell>
                                            ${labels.grilletarifaire.detail.dateFin}
                                        </cell>
                                        <cell>
                                            <datebox id="dateFin"
                                                disabled="true" value="@{$composer.grilleEnCours.datfin}"
                                                cols="12" format="dd/MM/yyyy" mold="rounded" />
                                            <monthbox id="dateFinODB" ca:latestDay="true"
                                                disabled="true" value="@{$composer.grilleEnCours.datfin}"
                                                cols="12" format="dd/MM/yyyy" />
                                        </cell>
                                    </row>
                                    <row>
                                        <cell>
                                            ${labels.grilletarifaire.detail.commentaire}
                                        </cell>
                                        <cell>
                                            <textbox id="commentaire"
                                                value="@{$composer.grilleEnCours.cmt}" cols="50"
                                                constraint="@{contrainteLibCommentaire}" rows="5"
                                                multiline="true" maxlength="1000">
                                            </textbox>
                                        </cell>
                                    </row>
                                </rows>
                            </grid>
                            <hbox>
                                <button id="btnModifier"
                                    class="button-puce" label="${labels.common.BtnModifier}"
                                    image="/images/corporate/boutons/button_special_icon_next.gif" />
                                <button id="btnValider"
                                    class="button-puce" label="${labels.common.BtnValider}"
                                    image="/images/corporate/boutons/button_special_icon_next.gif" />
                                <button id="btnAnnuler"
                                    class="button-puce" label="${labels.common.BtnAnnuler}"
                                    image="/images/corporate/boutons/button_special_icon_next.gif" />
                                <button id="btnSupprimer"
                                    class="button-puce" label="${labels.common.BtnSupprimer}"
                                    image="/images/corporate/boutons/button_special_icon_next.gif" />
                                <button id="btnCloturer"
                                    class="button-puce"
                                    label="${labels.grilletarifaire.detail.btnCloturer}"
                                    image="/images/corporate/boutons/button_special_icon_next.gif" />
                                <button id="btnAnnulerCloture"
                                    class="button-puce"
                                    label="${labels.grilletarifaire.detail.btnAnnulerCloture}"
                                    image="/images/corporate/boutons/button_special_icon_next.gif" />
                                <button id="btnDupliquer"
                                    class="button-puce"
                                    label="${labels.grilletarifaire.detail.btnDupliquer}"
                                    image="/images/corporate/boutons/button_special_icon_next.gif" />

                            </hbox>

                        </groupbox>
                        <groupbox id="boxListElemTar" mold="3d"
                            open="false" sclass="openfalse">
                            <caption
                                label="${labels.grilletarifaire.detail.listeElemTar}"
                                sclass="triangle" />
                            <div id="periodeApp" align="left"
                                style="margin:5px;">
                                <hbox align="center" pack="start">
                                    <label
                                        value="${labels.grilletarifaire.listeElemTar.periodeApplication} :">
                                    </label>
                                    <space spacing="20px" />
                                    <combobox id="cmbPeriodeApplication"
                                        readonly="true"
                                        model="@{DetailGrilleTarifaire$composer.dataPeriodeApplication}"
                                        cols="25">
                                        <comboitem
                                            self="@{each=filiale}" label="@{filiale.valeur}"
                                            value="@{filiale.cle}" />
                                    </combobox>                             
                                </hbox>
                            </div>
                            <div align="center" style="margin:5px;"
                                id="diverreurs" visible="false">
                                <label id="lblerreurs" sclass="infos"
                                    multiline="true" />
                            </div>
                            <grid id="grdListeElemTar"  mold="paging" 
                                pageSize="15" use="com.orange.grid.OctaveGrid">
                            </grid>
                            <vlayout id="lblsErreursSara" style="padding:0;color:red;font-family: Arial;font-size:10px; height:0"/>

                            <button id="btnAjoutElemTar"
                                autodisable="self" class="button-puce"
                                label="${labels.common.BtnAjouter}"
                                image="/images/corporate/boutons/button_special_icon_next.gif" />
                            <button id="btnModifierElemTar"
                                class="button-puce" label="${labels.common.BtnModifier}"
                                image="/images/corporate/boutons/button_special_icon_next.gif" />
                            <button id="btnRevaloriser"
                                class="button-puce"
                                label="${labels.grilletarifaire.listeElemTar.revaloriser}"
                                image="/images/corporate/boutons/button_special_icon_next.gif" />
                            <button id="btnAnnulerRevalorisation"
                                class="button-puce"
                                label="${labels.grilletarifaire.listeElemTar.annulerRevalorisation}"
                                image="/images/corporate/boutons/button_special_icon_next.gif" />
                        </groupbox>

                    </div>
                </center>
            </borderlayout>
        </center>
    </borderlayout>

</window>

Do you know a way to resolve the problem ?

delete flag offensive retag edit

Comments

Little off question, you use ZK 8.5 and still the old ZK databinding from version 6, what is replaced in 6.5. usage of that binding is really discouraged. (For good reasons)

chillworld ( 2018-12-15 03:53:27 +0800 )edit

For resolving your problem, put some code in the zul in comment and try to find like that what the least amount of code still produces this problem

chillworld ( 2018-12-15 03:58:54 +0800 )edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2018-12-19 11:13:56 +0800

cor3000 gravatar image cor3000
6280 2 7

I tried to run your code (i.e. removed all the custom components/includes/composer references I can't see from your code snipped) and it didn't show a JS error in IE11 using ZK 8.5.1.1.

Please provide runnable code that reliably produces the error - preferably on https://zkfiddle.org - otherwise I doubt anyone can help you, especially in a forum where people try to help in their free time.

Also enabling <debug-js> in your zk.xml will produce better line numbers and non minified variable names in the browser console and debugging tools, that might help.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
2 followers

RSS

Stats

Asked: 2018-12-14 22:22:08 +0800

Seen: 26 times

Last updated: Dec 19 '18

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More