[CONF] Apache Sling: Howto use jQuery with Sling (page created)

Fri, 05 Sep 2008 01:19:03 -0700

Page Created : SLING : Howto use jQuery with Sling

Howto use jQuery with Sling has been created by Renaud Richardet (Sep 05, 2008).

Content:

What's the point?

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

How do we get started?

  • create your sample application: create a folder "helloJquery" inside "apps"
  • download jQuery and copy it in your "helloJquery" folder (e.g. with curl)
  • create a file helloJquery.html with the content below and copy it in your "helloJquery"
  • point your browser to http://localhost:8888/apps/helloJquery/helloJquery.html. the next steps are there...
<html>
  <head>
    <title>Driving Sling with jQuery</title>
    <script type="text/_javascript_" src="" class="code-quote">"jquery-1.2.6.js"></script>
  </head>
<body>

<h3>Driving Sling with jQuery</h3>
<p>Start firebug, click on Console, then go multiline (click the little red arrow on the bottom bottom right)</p>
<p>enter the code below, click on 'run'</p>

<pre>
$.post(
  "/content/*",
  { ':nameHint': 'myName', oneProperty: 'oneValue' }, 
  function(data){ alert(data); }
);
</pre>

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

</body>
<html>

What just happened?

We used jQuery to create a node named "mynode" below "content", with a property "oneProperty" and value "oneValue".

$.post(
"/content/*",
{ ':nameHint': 'myName', oneProperty: 'oneValue' },
function(data){ alert(data); }
);

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:

  • "/content/*" as url, using SlingPostServlet to create a new jcr node under the /content node
  • ':nameHint': "mynode", oneProperty: 'oneValue' is a key:pair list of request parameters.
    • ':nameHint' is a command (starts with ':') that tells Sling to use "mynode" for the node name.
    • oneProperty: sets one property under mynode
  • the third (optional) parameter is a callback

It's the ajax equivalent of using this html form:

<form action="" class="code-quote">"/content/*" method="POST">
  <input type="hidden" name=":nameHint"   value=""myName">
  <input type="text"   name="oneProperty" value="oneValue">
</form>

Cross-posted on my blog

Powered by Atlassian Confluence (Version: 2.2.9 Build:#527 Sep 07, 2006) - Bug/feature request

Unsubscribe or edit your notifications preferences

Reply via email to