tapestry-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From conflue...@apache.org
Subject [CONF] Apache Tapestry > JavaScript FAQ
Date Sat, 02 Jul 2011 19:54:00 GMT
<html>
<head>
    <base href="https://cwiki.apache.org/confluence">
            <link rel="stylesheet" href="/confluence/s/2042/9/12/_/styles/combined.css?spaceKey=TAPESTRY&amp;forWysiwyg=true"
type="text/css">
    </head>
<body style="background: white;" bgcolor="white" class="email-body">
<div id="pageContent">
<div id="notificationFormat">
<div class="wiki-content">
<div class="email">
    <h2><a href="https://cwiki.apache.org/confluence/display/TAPESTRY/JavaScript+FAQ">JavaScript
FAQ</a></h2>
    <h4>Page <b>edited</b> by             <a href="https://cwiki.apache.org/confluence/display/~hlship">Howard
M. Lewis Ship</a>
    </h4>
        <br/>
                         <h4>Changes (4)</h4>
                                 
    
<div id="page-diffs">
                    <table class="diff" cellpadding="0" cellspacing="0">
    
            <tr><td class="diff-snipped" >...<br></td></tr>
            <tr><td class="diff-unchanged" >* If you have used a tool to minimize
your JavaScript libraries, this can lead to JavaScript syntax errors, so check if it works
with all the JavaScript files unpacked. <br> <br></td></tr>
            <tr><td class="diff-added-lines" style="background-color: #dfd;">h3.
What&#39;s the difference between the {{T5}} object and the {{Tapestry}} object in the
browser? <br></td></tr>
            <tr><td class="diff-unchanged" > <br></td></tr>
            <tr><td class="diff-added-lines" style="background-color: #dfd;">Both
of these objects are _namespaces_: containers of functions, constants, and nested namespaces.
<br></td></tr>
            <tr><td class="diff-changed-lines" ><span class="diff-deleted-words"style="color:#999;background-color:#fdd;text-decoration:line-through;">{scrollbar}</span>
<span class="diff-added-words"style="background-color: #dfd;"> </span> <br></td></tr>
            <tr><td class="diff-added-lines" style="background-color: #dfd;">The
{{T5}} object is a replacement for the {{Tapestry}} object, starting in release 5.3.  Increasingly,
functions defined by the {{Tapestry}} object are being replaced with similar or equivalent
functions in the {{T5}} object. <br> <br>This is part of an overall goal, spanning
at least two releases of Tapestry, to make Tapestry JavaScript framework agnostic; which is
to say, not depend specifically on Prototype or jQuery.  Much of the code in the {{Tapestry}}
object is specifically linked to Prototype and Scriptaculous. <br> <br>The {{T5}}
object represents a stable, documented, set of APIs that are preferred when building components
for maximum portability between underlying JavaScript frameworks. In other words, when building
component libraries, coding to the {{T5}} object ensures that your component will be useful
regardless of whether the final application is built using Prototype, jQuery or something
else. <br></td></tr>
    
            </table>
    </div>                            <h4>Full Content</h4>
                    <div class="notificationGreySide">
        <style type='text/css'>/*<![CDATA[*/
table.ScrollbarTable  {border: none;padding: 3px;width: 100%;padding: 3px;margin: 0px;background-color:
#f0f0f0}
table.ScrollbarTable td.ScrollbarPrevIcon {text-align: center;width: 16px;border: none;}
table.ScrollbarTable td.ScrollbarPrevName {text-align: left;border: none;}
table.ScrollbarTable td.ScrollbarParent {text-align: center;border: none;}
table.ScrollbarTable td.ScrollbarNextName {text-align: right;border: none;}
table.ScrollbarTable td.ScrollbarNextIcon {text-align: center;width: 16px;border: none;}

/*]]>*/</style><div class="Scrollbar"><table class='ScrollbarTable'><tr><td
class='ScrollbarPrevIcon'><a href="/confluence/display/TAPESTRY/Component+Events+FAQ"><img
border='0' align='middle' src='/confluence/images/icons/back_16.gif' width='16' height='16'></a></td><td
width='33%' class='ScrollbarPrevName'><a href="/confluence/display/TAPESTRY/Component+Events+FAQ">Component
Events FAQ</a>&nbsp;</td><td width='33%' class='ScrollbarParent'><sup><a
href="/confluence/display/TAPESTRY/Frequently+Asked+Questions"><img border='0' align='middle'
src='/confluence/images/icons/up_16.gif' width='8' height='8'></a></sup><a
href="/confluence/display/TAPESTRY/Frequently+Asked+Questions">Frequently Asked Questions</a></td><td
width='33%' class='ScrollbarNextName'>&nbsp;<a href="/confluence/display/TAPESTRY/Ajax+Components+FAQ">Ajax
Components FAQ</a></td><td class='ScrollbarNextIcon'><a href="/confluence/display/TAPESTRY/Ajax+Components+FAQ"><img
border='0' align='middle' src='/confluence/images/icons/forwd_16.gif' width='16' height='16'></a></td></tr></table></div>

<h2><a name="JavaScriptFAQ-JavaScript"></a>JavaScript</h2>

<p>Main article: <a href="/confluence/display/TAPESTRY/JavaScript" title="JavaScript">JavaScript</a></p>

<h3><a name="JavaScriptFAQ-WhydoIgeta%22Tapestryisundefined%22erroronformsubmit%3F"></a>Why
do I get a "Tapestry is undefined" error on form submit?</h3>

<p>This client-side error is clear but can be awkward to solve. It means your browser
has not been able to load the tapestry.js file properly. The question is, why? It can be due
to multiple reasons, some of them below:</p>

<ul>
	<li>First, check if 'tapestry.js' is present in the head part of your resulting HTML
page.</li>
	<li>If you have set the <a href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/SymbolConstants.html#COMBINE_SCRIPTS"
class="external-link" rel="nofollow">tapestry.combine-scripts</a> configuration symbol
to true, Tapestry generates one single URL to retrieve all the JS files. Sometimes, this can
produce long URLs that browsers are unable to retrieve. Try setting the symbol to false. 
<div class='panelMacro'><table class='noteMacro'><colgroup><col width='24'><col></colgroup><tr><td
valign='top'><img src="/confluence/images/icons/emoticons/warning.gif" width="16" height="16"
align="absmiddle" alt="" border="0"></td><td>This only applies to Tapestry
5.1.</td></tr></table></div></li>
	<li>If you have included jQuery in conjunction with Tapestry's prototype, that will
cause a conflict with the '$' selector used by both. In this case, you should put jQuery on
top of the stack and turn on the <a href="http://api.jquery.com/jQuery.noConflict/" class="external-link"
rel="nofollow">jQuery.noConflict</a> mode.</li>
	<li>Also, if you have included a custom or third-party JS library on top of the stack
that causes the JavaScript parsing to fail, then check the JavaScript syntax in that library.</li>
	<li>If you have used a tool to minimize your JavaScript libraries, this can lead to
JavaScript syntax errors, so check if it works with all the JavaScript files unpacked.</li>
</ul>


<h3><a name="JavaScriptFAQ-What%27sthedifferencebetweenthe%7B%7BT5%7D%7Dobjectandthe%7B%7BTapestry%7D%7Dobjectinthebrowser%3F"></a>What's
the difference between the <tt>T5</tt> object and the <tt>Tapestry</tt>
object in the browser?</h3>

<p>Both of these objects are <em>namespaces</em>: containers of functions,
constants, and nested namespaces.</p>

<p>The <tt>T5</tt> object is a replacement for the <tt>Tapestry</tt>
object, starting in release 5.3.  Increasingly, functions defined by the <tt>Tapestry</tt>
object are being replaced with similar or equivalent functions in the <tt>T5</tt>
object.</p>

<p>This is part of an overall goal, spanning at least two releases of Tapestry, to make
Tapestry JavaScript framework agnostic; which is to say, not depend specifically on Prototype
or jQuery.  Much of the code in the <tt>Tapestry</tt> object is specifically linked
to Prototype and Scriptaculous.</p>

<p>The <tt>T5</tt> object represents a stable, documented, set of APIs that
are preferred when building components for maximum portability between underlying JavaScript
frameworks. In other words, when building component libraries, coding to the <tt>T5</tt>
object ensures that your component will be useful regardless of whether the final application
is built using Prototype, jQuery or something else.</p>
    </div>
        <div id="commentsSection" class="wiki-content pageSection">
        <div style="float: right;">
            <a href="https://cwiki.apache.org/confluence/users/viewnotifications.action"
class="grey">Change Notification Preferences</a>
        </div>
        <a href="https://cwiki.apache.org/confluence/display/TAPESTRY/JavaScript+FAQ">View
Online</a>
        |
        <a href="https://cwiki.apache.org/confluence/pages/diffpagesbyversion.action?pageId=24189784&revisedVersion=11&originalVersion=10">View
Changes</a>
            </div>
</div>
</div>
</div>
</div>
</body>
</html>

Mime
View raw message