...
- create your sample application: create a folder "
helloJquery
" (e.g. with webDAV) - download jQuery and copy it in your "helloJquery" folder
- create a file helloJquery.html with the content below and copy it in your "helloJquery"
- point your browser to http://localhost:8888/helloJquery/helloJquery.html. the next steps are there...
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<html>
<head>
<title>Driving Sling with jQuery</title>
<script type="text/javascript" src="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="http://localhost:7402/content/myname.html">view your new node</a></p>
</body>
<html>
|
...
We used jQuery to create a node named "mynode
" below "content
", with a property "oneProperty
" and value "oneValue
".
Code Block | ||||
---|---|---|---|---|
| ||||
$.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:
Code Block | ||||
---|---|---|---|---|
| ||||
<form action="/content/*" method="POST">
<input type="hidden" name=":nameHint" value=""myName">
<input type="text" name="oneProperty" value="oneValue">
</form>
|
...