Integrate jquery

Using Neos & Flow Frontend & Integration
1

Good morning,

in my Default.html I integrated jquery and my own js named “Scroll.js” this way:

<f:section name="headScripts">
        <!-- Put your scripts inclusions for the head here, they will be included in your website by TypoScript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="Ressources/Public/JavaScript/Scroll.js"></script>
</f:section>

As I can see in frontend, both scripts where integrated. But: If I test this (in Scroll.js), no alert appears:

$(document).ready(function() {
    alert("Test");
}

Without $(document).ready(function() {...} it’s working, so if I only write alert("Test");, the alert appears in frontend.
Can anybody explain, why? Maybe it’s a stupid question, but I’m wondering about this behavior.

2

Hi Andre,

maybe i guess right… the document ready event is only triggered once. If you navigate to a document in your Neos backend you will need to add an event listener.

Please have a look at the part “Interaction with the neos backend” in the Neos documenation:
http://neos.readthedocs.org/en/stable/ExtendingNeos/InteractionWithTheNeosBackend.html

I hope this will help you:

if (typeof document.addEventListener === 'function') {
      document.addEventListener('Neos.PageLoaded', function(event) {
              alert('test');
      }, false);
}

Greetings
Mirko

3

Good morning Mirko,
that doen’t work for me, no alert appears(tested with different browsers). Thank you for your hint to the docs. There especially this passage for me is logical:

…backend will however often reload the page via Ajax whenever a node
property is changed…

So if I understand it right, because of the backend reloading by Ajax the document-ready-function is only triggered once in backend. But if backend is closed so if I’m only working in frontend the backend would’nt have any influence on this behavior, would it?

4

Correct. In the front-end there is not really anything influencing it. It sounds more like a simple mistake. Check the source output and make sure the code is there. Copy the output to a new document and open it separately if you have to.

5

Hallo Aske,
I did - the code is definitively linked in the source code of the frontend. If I click on the link in the head of the source code, I can see the code, so url is valid and source code is there. :smirk:

In backend now I get the alert! But only in the Editing Modes “In-Place” and “Desktop” and not in “Raw Content”. If I switch from “Raw Content” to “In-Place” at the first load the alert doesn’t apper - I have to reload the site then. After reload the alert appears.

But the alert still does not appear in frontend.

6

Hey,
the following code works for me just fine:

$(window).load(function () {
}

Maybe give it a try. :slight_smile:

7

@dbuecker: I tried with same result. :confused: