How to do a simple ajax request

Neos / Flow FAQ
1

Do your typical ajax request with your javascript library you like. For example with jquery:

In this example we call the url with some get parameters and append the returned html to some HTML element.

your-domain.com/?ajax=true&nodeId=some-node-id

$.get("/", {ajax: true, nodeId: 'some-node-id') .done(function( html ) {
    $('#some-html-element).append(html);
});

Now we have to do some TypoScript work.

Catch the ajax requests.
We create a new array element root.ajax which gets activated if the get parameter “ajax” which you get out of request.arguments.ajax is true.

root.ajax {
    condition = ${request.arguments.ajax == 'true' ? true : false}
type = 'YourCompany.YourPackage:AjaxType'
    position = '10'
}

This prototype renders all the child elements of a specific node with the given nodeId

prototype(YourCompany.YourPackage:AjaxType) < prototype(TYPO3.TypoScript:Collection) {
    collection = ${q(node).find('#' + request.arguments.nodeId).children()}
    itemRenderer = TYPO3.Neos:ContentCase
    itemName = 'node'
}

You also have to set a new cache entry identifier

root.@cache.entryIdentifier.projects = ${'ajax' + request.arguments.nodeId}

I got some help on the neos slack channel to create that code so i was requested to share that with the community. If there is an error or something should be done in an other way please let me know :slight_smile:

8 Likes
2

How and where would I have put this code?

3

In your site packages Root.fusion file :+1:

4

OK, Thx!

So I put it there in my sitepackage root.fusion:

prototype(my.SitePackage:DefaultPage) < prototype(Neos.Neos:Page) {
    ...
}

prototype(my.SitePackasge:AjaxType) < prototype(Neos.Fusion:Loop) {
    items = ${q(site).find('#' + request.arguments.nodeId).get()}
    itemRenderer = my.SitePackage:Calendar.Element
    itemName = 'node'
}

root.ajax {
    condition = ${request.arguments.ajax == 'true' ? true : false}
    type = 'my.SitePackasge:AjaxType'
    @position = 'before default'
}

root.@cache.entryIdentifier.projects = ${'ajax' + request.arguments.nodeId}

include: NodTypes/**/*

BUT: The call returns the full startpage of the domain, as if there is no ajax parameter passed. But the parameter is there. I also checked it with the DefaultFusion.fusion (as statet in documentation: Rendering a Page - Rendering - Manual - Guide - Neos Docs).

As far as I can see, there is no typo and it should fit my neos 5.3.1 installation.

Any further hint for me?

5

Hey,
found my problem. I had to change the position from ‘before default’ to ‘start’.

root.ajax {
  condition = ${request.arguments.ajax == 'true' ? true : false}
  type = 'my.SitePackasge:AjaxType'
  @position = 'start'
}
1 Like