12 Replies Latest reply on May 25, 2007 3:37 AM by juanignaciosl

    Javascript and verbatim workaround?

    juanignaciosl

      I'm trying to integrate some existing JS components (FCKEditor and some Dojo's) into JSF components, but I have a problem: JSF requires Javascript to be inside a f:verbatim, and Ajax4JSF tells not to use that tag(http://labs.jboss.com/file-access/default/members/jbossajax4jsf/freezone/docs/devguide/LimitationAndRules.html).

      Is there any other way to include Javascript?

        • 1. Re: Javascript and verbatim workaround?
          ilya_shaikovsky

          You understand the limitations wrong. f:verbatim and plain HTML and JS musn't be used only inside a4j:region with selfRendered = true. Because in this case page code isn't used for tree updates. So elements will be lost.

          f:verbatim is allowed in al common cases.

          • 2. Re: Javascript and verbatim workaround?
            juanignaciosl

            Well, I didn't detailed my situation for brevity...

            My actual problem is I'm trying yo use richfaces tabs and some Javascript-created components. When I include JS inside a tab, when it's reRendered Javacript is not regenerated (so not executed, obviously). In a ad-hoc fashion I can write the JS outside the tabs and invoke it oncomplete, but it's quite harder if I try to embed it in a generic component.

            • 3. Re: Javascript and verbatim workaround?
              ilya_shaikovsky

              around it with

              <a4j:outputPanel ajaxRendered="true">
              
              </..>
              


              • 4. Re: Javascript and verbatim workaround?
                juanignaciosl

                That's perfect. Thank you _that_ much!!!!

                • 5. Re: Javascript and verbatim workaround?
                  juanignaciosl

                  Damn, false positive :-\

                  That works when the content is rendered when the page loads. I have the following code inside an outputPanel reRendered later, but it doesn't trigger the alert():

                  <a4j:outputPanel ajaxRendered="true" >
                  <f:verbatim>

                  alert(":(");

                  </f:verbatim>
                  </a4j:outputPanel>

                  • 6. Re: Javascript and verbatim workaround?
                    ilya_shaikovsky

                    ok.. could you please create a simple example and post it here?

                    • 7. Re: Javascript and verbatim workaround?
                      juanignaciosl

                      Well, I'm creating a page from the beggining and at least the simplest case (two tabs, an alert per tab) works. I'll keep on adding things till it breaks.

                      Thanks for your help. If I find something useful I'll post it here. Please stay tuned... :(

                      • 8. Re: Javascript and verbatim workaround?
                        ilya_shaikovsky

                        ok. thanks! will wait for your case. ;)

                        • 9. Re: Javascript and verbatim workaround?
                          juanignaciosl

                          Well, the first problem I face is the rich text editor. In other post I've seen a suggestion of using TinyMCE. This is my code, but it only works when it's the first tab. When it's other, page goes blank (like a redirect!)!.

                          <rich:tab label="Tercera">
                           <t:inputTextarea id="resumen" forceId="true"
                           value="#{convocatoriaBean.modelo.resumen}" rows="10" cols="50" />
                           <a4j:outputPanel ajaxRendered="true">
                           <f:verbatim>
                           <script type="text/javascript">
                           function inicializar() {
                           alert('a');
                           tinyMCE.init({
                           mode : "exact",
                           elements : "resumen",
                           theme : "simple"
                           });
                           }
                           inicializar();
                           </script>
                           </f:verbatim>
                           </a4j:outputPanel>
                          </rich:tab>
                          


                          • 10. Re: Javascript and verbatim workaround?
                            juanignaciosl

                            I've tried this variation, but with the same result:

                            <rich:tab label="Tercera">
                            <t:inputTextarea id="resumen" forceId="true"
                            value="#{convocatoriaBean.modelo.resumen}" rows="10" cols="50" />

                            <a4j:outputPanel ajaxRendered="true">

                            <f:verbatim>
                            <a4j:loadScript src="/scripts/tiny_mce/tiny_mce.js" />


                            function inicializar() {
                            alert('a');
                            try {
                            tinyMCE.init({
                            mode : "textareas",
                            theme : "simple"
                            }); } catch(e) {alert(e);};
                            alert('b');
                            }
                            inicializar();

                            </f:verbatim>
                            </a4j:outputPanel>
                            </rich:tab>

                            • 11. Re: Javascript and verbatim workaround?
                              juanignaciosl

                              I've tried this also, same results:

                              <rich:tab label="Tercera">
                               <t:inputTextarea id="resumen" forceId="true"
                               value="#{convocatoriaBean.modelo.resumen}" rows="10" cols="50" />
                              
                               <a4j:outputPanel ajaxRendered="true">
                              
                               <f:verbatim>
                               <a4j:loadScript src="/scripts/tiny_mce/tiny_mce.js" />
                              
                               <script type="text/javascript">
                               function inicializar() {
                               alert('a');
                               try {
                               tinyMCE.init({
                               mode : "textareas",
                               theme : "simple"
                               }); } catch(e) {alert(e);};
                               alert('b');
                               }
                               inicializar();
                               </script>
                               </f:verbatim>
                               </a4j:outputPanel>
                              </rich:tab>
                              


                              • 12. Re: Javascript and verbatim workaround?
                                juanignaciosl

                                Well, it finally works. Thank everybody for the support. Working code for FCKEditor:

                                <rich:tab label="Tercera">
                                 <t:inputTextarea id="resumen" forceId="true"
                                 value="#{convocatoriaBean.modelo.resumen}" rows="10" cols="50" />
                                
                                 <a4j:outputPanel ajaxRendered="true">
                                
                                 <f:verbatim>
                                 <a4j:loadScript src="/scripts/fckeditor/fckeditor.js" />
                                
                                 <script type="text/javascript">
                                 var oFCKeditor = new FCKeditor( 'resumen' ) ;
                                 oFCKeditor.BasePath = "<%=request.getContextPath()%>/scripts/fckeditor/" ;
                                 oFCKeditor.ReplaceTextarea() ;
                                 </script>
                                
                                 </f:verbatim>
                                 </a4j:outputPanel>
                                </rich:tab>
                                


                                You also need to ensure value is sent at onsubmit:
                                <a4j:form onsubmit='if(dojo.byId("resumen") != null) FCKeditorAPI.GetInstance("resumen").UpdateLinkedField(); return true;'>