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 Thu, 11 Mar 2010 07:36:00 GMT
<html>
<head>
    <base href="http://cwiki.apache.org/confluence">
            <link rel="stylesheet" href="/confluence/s/1519/1/1/_/styles/combined.css?spaceKey=SLING&amp;forWysiwyg=true"
type="text/css">
    </head>
<body style="background-color: white" bgcolor="white">
<div id="pageContent">
<div id="notificationFormat">
<div class="wiki-content">
<div class="email">
     <h2><a href="http://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="http://cwiki.apache.org/confluence/display/~cronier.jy@gmail.com">Jean-Yves
Cronier</a>
    </h4>
     Formating, code correction
          <div id="versionComment" class="noteMacro" style="display:none; padding: 5px;">
     Formating, code correction<br />
     </div>
          <br/>
     <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"
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"
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': 'myName',
    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 mynode</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/"
rel="nofollow">my blog</a></p>
     </div>
     <div id="commentsSection" class="wiki-content pageSection">
       <div style="float: right;">
            <a href="http://cwiki.apache.org/confluence/users/viewnotifications.action"
class="grey">Change Notification Preferences</a>
       </div>

       <a href="http://cwiki.apache.org/confluence/display/SLING/Howto+use+jQuery+with+Sling">View
Online</a>
       |
       <a href="http://cwiki.apache.org/confluence/pages/diffpagesbyversion.action?pageId=96563&revisedVersion=3&originalVersion=2">View
Change</a>
              |
       <a href="http://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