Skip to main content

JavaScript Error: jmaki is not defined

2 replies [Last post]
sine_morbo
Offline
Joined: 2007-04-18

I'm having a problem in my JSF application, I've created a testpage to demonstrate it. Let me paste the code of the JSF page first:

<br />
<%@page contentType="text/html"%><br />
<%@page pageEncoding="UTF-8"%></p>
<p><%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%><br />
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%><br />
<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %></p>
<p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />
"http://www.w3.org/TR/html4/loose.dtd"></p>
<p><f:view><br />
    <html><br />
        <head><br />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br />
            <title>jMaki test</title><br />
        </head><br />
        <body><br />
            <div class="maincontent"><br />
                <f:subview id="pageContent"><br />
                    <h:form id="select" rendered="#{InvitationMB.currentMode == InvitationMB.MENU}"><br />
                        <h:commandLink id="link1"<br />
                                       action="#{InvitationMB.setNewInvitationMode}"><br />
                            <h:outputText value="form_1"/><br />
                        </h:commandLink><br />
                        <br /><br />
                        <h:commandLink id="link2"<br />
                                       action="#{InvitationMB.setAgreedInvListMode}"><br />
                            <h:outputText value="form_2"/><br />
                        </h:commandLink><br />
                    </h:form><br />
                    <h:form id="form_1" rendered="#{(InvitationMB.currentMode == InvitationMB.NEW)}"><br />
                        <h3>form_1</h3><br />
                        <f:subview id="resultEditor1"><br />
                            <a:widget name="dojo.editor" value="Edit Me 1" /><br />
                        </f:subview><br />
                    </h:form><br />
                    <h:form id="form_2" rendered="#{(InvitationMB.currentMode == InvitationMB.AGREEDINVLIST)}"><br />
                        <h3>form_2</h3><br />
                        <f:subview id="resultEditor2"><br />
                            <a:widget name="dojo.editor" value="Edit Me 2" /><br />
                        </f:subview><br />
                    </h:form><br />
                </f:subview><br />
            </div><br />
        </body><br />
    </html><br />
</f:view><br />

Short explanation:
InvitationMB is my managed/backing bean holding the values you see in the code above. The setXXXMode methods set the "currentMode" parameter to math the tested values.
The above JSF page work as follows: at first load, I initialize currentMode to MENU, so the form "select" can be seen. Selecting the first link makes "currentMode" change to NEW, so you can see form_1. Selecting the second link makes "currentMode" change to AGREEDINVLIST, so you can see form_2.
On both forms (form_1 and form_2) I use a dojo.editor widget, but it only works on the first form not on the second, in this error case I get the "JavaScript Error: jmaki is not defined" error.

Let me also paste you the generated page sources:
***first page load (currentMode = MENU)***

<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />
"http://www.w3.org/TR/html4/loose.dtd"></p>
<p>    <html><br />
        <head><br />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br />
            <title>jMaki test</title></p>
<p>        </head><br />
        <body><br />
            <div class="maincontent"></p>
<p><form id="pageContent:select" name="pageContent:select" method="post" action="/InvitationResultManager/web/jMakiTest.jsp" enctype="application/x-www-form-urlencoded"><br />
<input type="hidden" name="pageContent:select" value="pageContent:select" /><br />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id1:j_id2" /></p>
<p><script type="text/javascript" language="Javascript"><br />
<!--<br />
function jsfcljs(f, pvp, t) {if (f.sjsfinit == null) {f.dpf = function() {var adp = this.adp;if (adp != null) {for (var i = 0; i < adp.length; i++) {this.removeChild(adp[i]);}}this.adp = null;};var mos = f.onsubmit;if (mos == null) {f.onsubmit = f.dpf;} else {f.onsubmit = function() {f.dpf();mos();}}f.apf = function(pvp) {this.dpf();var adp = new Array();this.adp = adp;var ps = pvp.split(',');for (var i = 0, ii = 0; i < ps.length; i++, ii++) {var p = document.createElement("input");p.type = "hidden";p.name = ps[i];p.value = ps[i + 1];this.appendChild(p);adp[ii] = p;i += 1;}};sjsfinit = true;}if (f.apf) {f.apf(pvp);}if (t) {f.target = t;}f.submit();return false;};<br />
//--><br />
</script><br />
<a id="pageContent:select:link1" href="#" onclick="return jsfcljs(document.forms['pageContent:select'],'pageContent:select:link1,pageContent:select:link1','');">form_1</a></p>
<p>                        <br /></p>
<p>                        <a id="pageContent:select:link2" href="#" onclick="return jsfcljs(document.forms['pageContent:select'],'pageContent:select:link2,pageContent:select:link2','');">form_2</a><br />
</form><br />
            </div><br />
        </body><br />
    </html><br />

***first link selected (currentMode = NEW)***

<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />
"http://www.w3.org/TR/html4/loose.dtd"></p>
<p>    <html><br />
        <head><br />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br />
            <title>jMaki test</title></p>
<p>        </head><br />
        <body><br />
            <div class="maincontent"></p>
<p><form id="pageContent:form_1" name="pageContent:form_1" method="post" action="/InvitationResultManager/web/jMakiTest.jsp" enctype="application/x-www-form-urlencoded"><br />
<input type="hidden" name="pageContent:form_1" value="pageContent:form_1" /><br />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id1:j_id3" /></p>
<p>                        <h3>form_1</h3></p>
<p>                            <script type="text/javascript" src="http://localhost:8080/InvitationResultManager/resources/jmaki.js"></script></p>
<p><script type="text/javascript">jmaki.webRoot='http://localhost:8080/InvitationResultManager';jmaki.resourcesRoot ='/resources';jmaki.xhp ='http://localhost:8080/InvitationResultManager/xhp';</script><br />
<script type="text/javascript" src="http://localhost:8080/InvitationResultManager/glue.js"></script><br />
<script type="text/javascript" src="http://localhost:8080/InvitationResultManager/resources/system-glue.js"></script><br />
<script type="text/javascript">if (typeof djConfig =='undefined') djConfig = { parseWidgets: false, searchIds: [] };</script><br />
<script type="text/javascript">jmaki.writeScript('http://localhost:8080/InvitationResultManager/resources/dojo/resources/libs/dojo/v.4.2/dojo.js', 'dojo_editor0');</script><br />
<script type="text/javascript">dojo.require('dojo.widget.Editor2Plugin.SimpleSignalCommands');dojo.require("dojo.widget.Editor2");</script><br />
<link rel="stylesheet" type="text/css" href="http://localhost:8080/InvitationResultManager/resources/dojo/editor/component.css"></link><br />
<script type="text/javascript" src="http://localhost:8080/InvitationResultManager/resources/dojo/editor/component.js"></script><br />
<div id="dojo_editor0" class="dojoEditor">Edit Me 1</div></p>
<p><script type="text/javascript">jmaki.addWidget({widgetDir:'http://localhost:8080/InvitationResultManager/resources/dojo/editor',name:'dojo.editor',value:'Edit Me 1',uuid:'dojo_editor0'});</script></p>
<p></form><br />
            </div><br />
        </body><br />
    </html><br />

***second link selected (currentMode = AGREEDINVLIST)***
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />
"http://www.w3.org/TR/html4/loose.dtd"></p>
<p>    <html><br />
        <head><br />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br />
            <title>jMaki test</title></p>
<p>        </head><br />
        <body><br />
            <div class="maincontent"></p>
<p><form id="pageContent:form_2" name="pageContent:form_2" method="post" action="/InvitationResultManager/web/jMakiTest.jsp" enctype="application/x-www-form-urlencoded"><br />
<input type="hidden" name="pageContent:form_2" value="pageContent:form_2" /><br />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id1:j_id4" /></p>
<p>                        <h3>form_2</h3></p>
<p>                            <div id="dojo_editor1" class="dojoEditor">Edit Me 2</div></p>
<p><script type="text/javascript">jmaki.addWidget({widgetDir:'http://localhost:8080/InvitationResultManager/resources/dojo/editor',name:'dojo.editor',value:'Edit Me 2',uuid:'dojo_editor1'});</script></p>
<p></form><br />
            </div><br />
        </body><br />
    </html><br />

I guess it should be about the rendering rules, but I was not able to figure out the exact problem. Your help is welcome,
Peter

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
sine_morbo
Offline
Joined: 2007-04-18

I figured, that using ths JSTL instead of the JSF "rendered" attribute makes everything work well. "rendered" should be exchanged to "c:if" whereever you use a jMaki widget.
But the question is: why does this happen? Is this a bug in the current jMaki release, that is seems not working properly with JSF rendered attrib?
Peter

ntruchsess
Offline
Joined: 2007-01-05

Hi sine_morbo,

as I can see we don't have support for 'rendered' attribute in jmaki-tags (yet). Since this is just an entry in the tld's I'm going to add this to the next release

- Norbert