Child pages
  • Howto use jQuery with Sling
Skip to end of metadata
Go to start of metadata

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" (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...
helloJquery.html

What just happened?

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

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:

Cross-posted on my blog

  • No labels

1 Comment

  1. Anonymous

    Can you explain why the jQuery code uses <i>':nameHint': 'myName'</i> while the paragraph underneath uses <i>:nameHint: mynode</i>?