13 Replies Latest reply on Mar 22, 2010 9:36 AM by thinkwise

    Contextmenu js-errors

      I'm using the RF multiple contextmenus in a master-detail situation within the same page/form. The master displays a dataGrid and the detail displays a form with input fields.

      In IE, the first time I open a contextmenu nothing is wrong. Every time I open a different contextmenu on the page a js-error occures. It occurs on this.element because it is 'null' in uiPack.js where this.element.appentChild is called.

      I fixed this one by filling it manualy. After that the first problem does not occur anymore, but other js-errors occure when I execute an action from my first contextmenuGroup. If I open the other contextmenu and go with the mouse above a contextmenu the js-error occurs.

      To me it looks like the both contextmenus get intertwined or the wrong clientIds are used to find the correct component.

      I tried RF 3.2.2 and RF 3.3.0 beta5

      Thanks for your time!

        • 1. Re: Contextmenu js-errors
          nbelaevski

          Hello,

          Please post full page code.

          • 2. Re: Contextmenu js-errors

            Oke I will try to create a small sample project to describe my issue.

            • 3. Re: Contextmenu js-errors

              Hi there,

               

              The js-error I discribed still occures and now I know what the problem is in this case.

               

              The contextmenu can change after I clicked it, eg some items disable. To realize that I need to rerender the contextmenu. Every time the contextmenu is rerendered after a clcik action the contextmenu is not cleaned up correctly because of the js error. I hope you can reproduce this issue with this information.

               

              My current version is 3.3.1.

               

              Thanks for your time.

              • 4. Re: Contextmenu js-errors
                ilya_shaikovsky

                I guess you updating it via ajax when it's already showing(probably with support on onshow or something similar). And in that case that is expectable result. You should invoke some ajax with support or jsFunction instead and show the menu on oncomplete just via client API.

                 

                It will affect any component: calendar will be collapsed reRendered in opeded state, modal panel will be hidden and so on. Components which targeted to be reRendered - re-initialized after ajax request. So you should always use the scenario - re-render and only then invoke.

                • 5. Re: Contextmenu js-errors

                  Hi Ilya,

                   

                  Yes we build/rebuild our in javacode in the encodeBegin method of the component and use Ajax through rerenderIds to update the component. When I use the solution you provided means that my applicatie needs to do an extra roundtrip to the web-server to rebuild the contextmenu.

                   

                  The 2nd solution I was thinking about is to rerender single changed items of the contextmenu. I tried that but the changed item is not changed in my page. Can you explain that?

                   

                  It seems like I need to use the solution you provided. Where can I find documentation about the client-side API?

                  • 6. Re: Contextmenu js-errors

                    Let me be a bit more precise about my problem. After a click in the contextmenu a event is fired to the web-server. The contextmenu is closed then. The action on de web-server modifies the contextmenu content so I need to rerender it to modify it in the clients browser. Till now the contextmenu is hidden and everything is fine.

                     

                    When I open the contextmenu again the js-error occures. When I do this all again two js-errors occures and so on.

                     

                    It seems that the contextmenu js component from before the rerender stays in memory and every time I open the contextmenu again a js-error occures for every component in memory. This occures in IE 7/8 and after doing this multiple times the contextmenu shows up, but fires no request to the web-server anymore. In Firefox the js-error is shown once at the same moment as in IE.

                     

                    I tried to rerender the contextmenu after the click on the contextmenu is finished with another request, but than my problem still occures. It seems that the Contexmenu cannot be rerendered at all.

                     

                    I hope you can provide me a solution to this soon.

                    • 7. Re: Contextmenu js-errors
                      ilya_shaikovsky

                      please provide sample you going to made. Then I'll investigate locally and update you. Thanks for your efforts!

                      • 8. Re: Contextmenu js-errors

                        It only happens when I rerender the contextmenu from java-code. Use this sample code(copy of Richfaces live demo)

                         

                        <h:panelGrid columns="1" columnClasses="cent">
                                    <h:panelGroup id="picture">
                                        <h:graphicImage value="/richfaces/jQuery/images/pic1.jpg" id="pic" style="border : 5px solid #E4EAEF"/>
                                        <rich:contextMenu id="menu" event="oncontextmenu" attachTo="pic" submitMode="ajax">
                                            <rich:menuItem value="Zoom In" onclick="alert('Zoom in');" id="zin" actionListener="#{menuBean.refreshMenu}"></rich:menuItem>
                                            <rich:menuItem value="Zoom Out" onclick="alert('Zoom out');" rerender="menu"></rich:menuItem>
                                        </rich:contextMenu>
                                    </h:panelGroup>
                                </h:panelGrid>

                         

                        In the called bean method:

                        public void refreshMenu(ActionEvent event) {
                                HtmlMenuItem item = (HtmlMenuItem)event.getComponent();
                                ContextMenu menu = (ContextMenu) event.getComponent().getParent();
                                item.setReRender(NamingContainer.SEPARATOR_CHAR + menugetClientId(FacesContext.getCurrentInstance()));
                            }

                         

                        Click in IE "Zoom in" and open the contextmenu again. Then the js-error will occure for the first time. Click on "Zoom out" and it does not give a js-error.

                        • 9. Re: Contextmenu js-errors
                          ilya_shaikovsky
                          <h:panelGroup id="picture">
                               <h:graphicImage value="/richfaces/jQuery/images/pic1.jpg" id="pic"
                                    style="border : 5px solid #E4EAEF" />
                               <rich:contextMenu id="menu" event="oncontextmenu" attachTo="pic"
                                    submitMode="ajax">
                                    <rich:menuItem value="Zoom In" id="zin"  onclick="alert('Zoom in');"
                                         actionListener="#{userBean.actionListener}"></rich:menuItem>
                               </rich:contextMenu>
                          </h:panelGroup>
                          
                          public void actionListener(ActionEvent event) {
                                    HtmlMenuItem item = (HtmlMenuItem) event.getComponent();
                                    ContextMenu menu = (ContextMenu) event.getComponent().getParent();
                                    item.setReRender(NamingContainer.SEPARATOR_CHAR
                                              + menu.getClientId(FacesContext.getCurrentInstance()));
                               }
                           
                          

                          can't reproduce with that code. check a4j:log for some other errors.

                          • 10. Re: Contextmenu js-errors
                            I'm using Richfaces 3.3.1 libraries. The error that occurs the second time I open the contextmenu is:

                            js-error.JPG
                            There is a error shown in a4j.log. I will provide a part of the printed info.
                            ...
                            debug[9:32:19,093]: Header  Ajax-Expired not found, search in <meta>
                            debug[9:32:19,093]: search for elements  by name 'meta'  in element #document
                            debug[9:32:19,095]: Find <meta  name='Ajax-Update-Ids'  content='f:menu,f:menu_menu_script,f:loginError'>
                            debug[9:32:19,096]: Find <meta  name='Ajax-Response' content='true'>
                            debug[9:32:19,096]: Header Ajax-Update-Ids not found,  search in <meta>
                            debug[9:32:19,096]: search for elements by name 'meta'  in element #document
                            debug[9:32:19,098]: Find <meta  name='Ajax-Update-Ids'  content='f:menu,f:menu_menu_script,f:loginError'>
                            debug[9:32:19,098]: Update page by list  of rendered areas from response f:menu,f:menu_menu_script,f:loginError
                            debug[9:32:19,099]: search for elements  by name 'script'  in element #document
                            debug[9:32:19,102]: search for elements by name 'link'   in element #document
                            debug[9:32:19,105]: call getElementById for id= org.ajax4jsf.queue_script
                            debug[9:32:19,106]: Update page part  from call parameter for ID f:menu
                            debug[9:32:19,106]: call getElementById for id= f:menu
                            debug[9:32:19,107]: Replace content of  node by replaceChild()
                            debug[9:32:19,107]: Temporarily substituting document.getElementById() to work  around WebKit issue
                            debug[9:32:19,108]: Restoring document.getElementById()
                            debug[9:32:19,108]: search for elements  by name 'script'  in element div
                            debug[9:32:19,112]: Scripts in updated part count : 1
                            debug[9:32:19,112]: Update part of page  for Id: f:menu successful
                            debug[9:32:19,112]: Update page part from call parameter for ID f:menu_menu_script
                            debug[9:32:19,112]: call getElementById  for id= f:menu_menu_script
                            error[9:32:19,112]: New node for ID f:menu_menu_script is not present in response
                            debug[9:32:19,112]: Update page part  from call parameter for ID f:loginError
                            debug[9:32:19,113]: call getElementById for id=  f:loginError
                            debug[9:32:19,113]: Replace content of node by replaceChild()
                            debug[9:32:19,113]: Temporarily  substituting document.getElementById() to work around WebKit issue
                            debug[9:32:19,113]: Restoring  document.getElementById()
                            debug[9:32:19,113]: search for elements by name 'script'  in element dl
                            debug[9:32:19,117]: Scripts in updated  part count : 0
                            debug[9:32:19,117]: call getElementById for id= org.ajax4jsf.oncomplete
                            debug[9:32:19,118]: Processing updates  finished, no oncomplete function to call
                            debug[9:32:19,118]: Update part of page for Id:  f:loginError successful
                            debug[9:32:19,118]: call getElementById for id= ajax-view-state
                            debug[9:32:19,118]: Hidden JSF state  fields: [object HTMLSpanElement]
                            debug[9:32:19,118]: Namespace for hidden view-state  input fields is undefined
                            debug[9:32:19,118]: search for elements by name 'input'  in element span
                            debug[9:32:19,120]: Replace value for  inputs: 14 by new values: 1
                            debug[9:32:19,120]: Input in response: javax.faces.ViewState
                            debug[9:32:19,121]: Found same input on  page with type: hidden
                            debug[9:32:19,121]: search for elements by name 'INPUT'  in element span
                            debug[9:32:19,123]: Replace value for  inputs: 14 by new values: 0
                            debug[9:32:19,123]: call getElementById for id= _A4J.AJAX.focus
                            debug[9:32:19,123]: No focus information  in response
                            debug[9:32:19,155]: Evaluate script replaced area in document: // var contextMenu = new Richfaces.ContextMenu('f:menu', 50, [new  E('div',{'style':'display: none; z\x2Dindex: 2;',  'className':'rich\x2Dmenu\x2Dlist\x2Dborder', 'id':'f:menu_menu'},[new  E('div',{'className':'rich\x2Dmenu\x2Dlist\x2Dbg'},[new  E('div',{'onmouseup':function (context) { return  Richfaces.interpolate("Event.stop(event);", context);},  'onmouseover':function (context) { return  Richfaces.interpolate("RichFaces.Menu.itemMouseOver(event, this, '', '',  '');", context);}, 'onmouseout':function (context) { return  Richfaces.interpolate("RichFaces.Menu.itemMouseOut(event, this, '', '',  '');", context);}, 'onmousedown':function (context) { return  Richfaces.interpolate("Event.stop(event);", context);},  'onclick':function (context) { return  Richfaces.interpolate("RichFaces.Menu.updateItem(event,this);alert('Zoom   in');;A4J.AJAX.Submit('loadingDocument','f',event,{'similarityGroupingId':'f:zin','parameters':{'f:zin':'f:zin'}  ,'actionUrl':'/TSF_WEBGUI/pages/main.jsf'} )", context);},  'id':'f:zin', 'className':'rich\x2Dmenu\x2Ditem  rich\x2Dmenu\x2Ditem\x2Denabled'},[new E('span',{'id':'f:zin:icon',  'className':'dr\x2Dmenu\x2Dicon rich\x2Dmenu\x2Ditem\x2Dicon'},[new  E('img',{'width':'16',  'src':'/TSF_WEBGUI/a4j/g/3_3_1.GAimages/spacer.gif.jsf', 'height':'16',  'alt':''})]),new E('span',{'id':'f:zin:anchor',  'className':'rich\x2Dmenu\x2Ditem\x2Dlabel'},[new T('Zoom In')])]),new  E('div',{'className':'rich\x2Dmenu\x2Dlist\x2Dstrut'},[new  E('div',{'style':'', 'className':'rich\x2Dmenu\x2Dlist\x2Dstrut'},[new  T(' ')])])])]) , new E('script',{'type':'text/javascript',  'id':'f:menu_menu_script'},[new T('new  RichFaces.Menu.Layer(\'f:menu_menu\',50,800).asContextMenu({\'onitemselect\':function(event){;return  true;},\'oncollapse\':function(event){;return  true;},\'onexpand\':function(event){;return  true;},\'dummy\':\'dummy\',\'ongroupactivate\':function(event){;return  true;}} ).addItem(\'f:zin\',{\'closeOnClick\':true} );')]) ]);Richfaces.onAvailable('f:pic',function () {var vars =  {contextMenu:contextMenu};return function() { with (vars)  {contextMenu.attachToElementById('f:pic','oncontextmenu',{} )}}}()); //
                            debug[9:32:19,156]: Script  evaluation succeeded
                            • 11. Re: Contextmenu js-errors
                              ilya_shaikovsky
                              please try 3.3.3 CR1
                              • 12. Re: Contextmenu js-errors

                                I could not get it working. Maybe you can help me a little.

                                 

                                When I add the 3.3.3 libs I get js-errors saying "A4J is undefined".Eg by using a a4j:commandbutton. What am I doing wrong?

                                • 13. Re: Contextmenu js-errors

                                  Hey Ilya,

                                   

                                  Richfaces 3.3.3 has solved my problem. Thanks for your help.