incubator-sling-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From conflue...@apache.org
Subject [CONF] Apache Sling > Howto use jQuery with Sling
Date Fri, 19 Nov 2010 07:59:00 GMT
<html>
<head>
    <base href="https://cwiki.apache.org/confluence">
            <link rel="stylesheet" href="/confluence/s/1810/9/1/_/styles/combined.css?spaceKey=SLING&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/SLING/Howto+use+jQuery+with+Sling">Howto
use jQuery with Sling</a></h2>
    <h4>Page <b>edited</b> by             <a href="https://cwiki.apache.org/confluence/display/~vicrry">Vicary
Archangel</a>
    </h4>
        <div id="versionComment">
        <b>Comment:</b>
        Unified inconsistency of words "mynode" and "myName" to "myNode", using first appeared
words "my node" and the capitalized coding style.<br />
    </div>
        <br/>
                         <h4>Changes (5)</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" >h3. What just happened? <br>
<br></td></tr>
            <tr><td class="diff-changed-lines" >We used jQuery to create a node
named <span class="diff-changed-words">&quot;{{my<span class="diff-deleted-chars"style="color:#999;background-color:#fdd;text-decoration:line-through;">n</span><span
class="diff-added-chars"style="background-color: #dfd;">N</span>ode}}&quot;</span>
below &quot;{{content}}&quot;, with a property &quot;{{oneProperty}}&quot;
and value &quot;{{oneValue}}&quot;. <br></td></tr>
            <tr><td class="diff-unchanged" > <br>{code:JavaScript} <br></td></tr>
            <tr><td class="diff-snipped" >...<br></td></tr>
            <tr><td class="diff-unchanged" >  &quot;/content/*&quot;,
<br>  { <br></td></tr>
            <tr><td class="diff-changed-lines" >&#39;:nameHint&#39;: <span
class="diff-deleted-words"style="color:#999;background-color:#fdd;text-decoration:line-through;">&#39;myName&#39;,</span>
<span class="diff-added-words"style="background-color: #dfd;">&#39;myNode&#39;,</span>
<br></td></tr>
            <tr><td class="diff-unchanged" >    oneProperty: &#39;oneValue&#39;
<br>  }, <br></td></tr>
            <tr><td class="diff-snipped" >...<br></td></tr>
            <tr><td class="diff-unchanged" >If you are not familiar with jQuery,
the code might look cryptic, but in 2 words: {{$.post}} creates the ajax post request, taking
3 parameters: <br>* &quot;{{/content/\*}}&quot; as url, using SlingPostServlet
to create a new jcr node under the {{/content}} node <br></td></tr>
            <tr><td class="diff-changed-lines" >* {{&#39;:nameHint&#39;:
<span class="diff-changed-words">&quot;my<span class="diff-deleted-chars"style="color:#999;background-color:#fdd;text-decoration:line-through;">n</span><span
class="diff-added-chars"style="background-color: #dfd;">N</span>ode&quot;,</span>
oneProperty: &#39;oneValue&#39;}} is a _key:pair_ list of request parameters. <br></td></tr>
            <tr><td class="diff-changed-lines" >** &#39;{{:nameHint}}&#39;
is a command (starts with &#39;:&#39;) that tells Sling to use <span class="diff-changed-words">&quot;{{my<span
class="diff-deleted-chars"style="color:#999;background-color:#fdd;text-decoration:line-through;">n</span><span
class="diff-added-chars"style="background-color: #dfd;">N</span>ode}}&quot;</span>
for the node name. <br></td></tr>
            <tr><td class="diff-changed-lines" >** {{oneProperty}}: sets one property
under <span class="diff-deleted-words"style="color:#999;background-color:#fdd;text-decoration:line-through;">mynode</span>
<span class="diff-added-words"style="background-color: #dfd;">{{myNode}}</span>
<br></td></tr>
            <tr><td class="diff-unchanged" >* the third (optional) parameter is
a callback <br> <br></td></tr>
            <tr><td class="diff-snipped" >...<br></td></tr>
        </table>
</div>                            <h4>Full Content</h4>
                    <div class="notificationGreySide">
        <h3><a name="HowtousejQuerywithSling-What%27sthepoint%3F"></a>What's
the point?</h3>

<p>Sling lets you drive your content repository from within a webpage by making an ajax
request with jQuery. And it's easy.</p>

<h3><a name="HowtousejQuerywithSling-Howdowegetstarted%3F"></a>How do we
get started?</h3>

<ul>
	<li>create your sample application: create a folder "<tt>helloJquery</tt>"
(e.g. with webDAV)</li>
	<li>download <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js"
class="external-link" rel="nofollow">jQuery</a> and copy it in your "helloJquery"
folder</li>
	<li>create a file helloJquery.html with the content below and copy it in your "helloJquery"</li>
	<li>point your browser to <a href="http://localhost:8888/helloJquery/helloJquery.html"
class="external-link" rel="nofollow">http://localhost:8888/helloJquery/helloJquery.html</a>.
the next steps are there...</li>
</ul>


<div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader"
style="border-bottom-width: 1px;"><b>helloJquery.html</b></div><div
class="codeContent panelContent">
<pre class="code-html">
<span class="code-tag">&lt;html&gt;</span>
  <span class="code-tag">&lt;head&gt;</span>
    <span class="code-tag">&lt;title&gt;</span>Driving Sling with jQuery<span
class="code-tag">&lt;/title&gt;</span>
    <span class="code-tag">&lt;script type=<span class="code-quote">"text/javascript"</span>
src=<span class="code-quote">"jquery-1.2.6.js"</span>&gt;</span><span
class="code-tag">&lt;/script&gt;</span>
  <span class="code-tag">&lt;/head&gt;</span>
<span class="code-tag">&lt;body&gt;</span>

<span class="code-tag">&lt;h3&gt;</span>Driving Sling with jQuery<span
class="code-tag">&lt;/h3&gt;</span>
<span class="code-tag">&lt;p&gt;</span>Start firebug, click on Console,
then go multiline (click the little red arrow on the bottom bottom right)<span class="code-tag">&lt;/p&gt;</span>
<span class="code-tag">&lt;p&gt;</span>enter the code below, click on
'run'<span class="code-tag">&lt;/p&gt;</span>

<span class="code-tag">&lt;pre&gt;</span>
$.post(
  <span class="code-quote">"/content/*"</span>,
  { ':nameHint': 'myName', oneProperty: 'oneValue' },
  function(data){ alert(data); }
);
<span class="code-tag">&lt;/pre&gt;</span>

<span class="code-tag">&lt;p&gt;</span>Then <span class="code-tag">&lt;a
href=<span class="code-quote">"http://localhost:7402/content/myname.html"</span>&gt;</span>view
your new node<span class="code-tag">&lt;/a&gt;</span><span class="code-tag">&lt;/p&gt;</span>

<span class="code-tag">&lt;/body&gt;</span>
<span class="code-tag">&lt;html&gt;</span>
</pre>
</div></div>

<h3><a name="HowtousejQuerywithSling-Whatjusthappened%3F"></a>What just
happened?</h3>

<p>We used jQuery to create a node named "<tt>myNode</tt>" below "<tt>content</tt>",
with a property "<tt>oneProperty</tt>" and value "<tt>oneValue</tt>".</p>

<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-javascript">
$.post(
  "/content/*",
  {
    ':nameHint': 'myNode',
    oneProperty: 'oneValue'
  },
  <span class="code-keyword">function</span>(data){
    alert(data);
  }
);
</pre>
</div></div>

<p>If you are not familiar with jQuery, the code might look cryptic, but in 2 words:
<tt>$.post</tt> creates the ajax post request, taking 3 parameters:</p>
<ul>
	<li>"<tt>/content/&#42;</tt>" as url, using SlingPostServlet to create
a new jcr node under the <tt>/content</tt> node</li>
	<li><tt>':nameHint': "myNode", oneProperty: 'oneValue'</tt> is a <em>key:pair</em>
list of request parameters.
	<ul>
		<li>'<tt>:nameHint</tt>' is a command (starts with ':') that tells Sling
to use "<tt>myNode</tt>" for the node name.</li>
		<li><tt>oneProperty</tt>: sets one property under <tt>myNode</tt></li>
	</ul>
	</li>
	<li>the third (optional) parameter is a callback</li>
</ul>


<p>It's the ajax equivalent of using this html form:</p>
<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-html">
<span class="code-tag">&lt;form action=<span class="code-quote">"/content/*"</span>
method=<span class="code-quote">"POST"</span>&gt;</span>
  <span class="code-tag">&lt;input type=<span class="code-quote">"hidden"</span>
name=<span class="code-quote">":nameHint"</span>   value=<span class="code-quote">"myName"</span>&gt;</span>
  <span class="code-tag">&lt;input type=<span class="code-quote">"text"</span>
  name=<span class="code-quote">"oneProperty"</span> value=<span class="code-quote">"oneValue"</span>&gt;</span>
<span class="code-tag">&lt;/form&gt;</span>
</pre>
</div></div>

<p>Cross-posted on <a href="http://oslutions.com/blog/2008/09/driving-sling-with-jquery/"
class="external-link" rel="nofollow">my blog</a></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/SLING/Howto+use+jQuery+with+Sling">View
Online</a>
        |
        <a href="https://cwiki.apache.org/confluence/pages/diffpagesbyversion.action?pageId=96563&revisedVersion=4&originalVersion=3">View
Changes</a>
                |
        <a href="https://cwiki.apache.org/confluence/display/SLING/Howto+use+jQuery+with+Sling?showComments=true&amp;showCommentArea=true#addcomment">Add
Comment</a>
            </div>
</div>
</div>
</div>
</div>
</body>
</html>

Mime
View raw message