Can't find an example for implementation of jquery

1

In older apps I used the JS-Helper.
What is the right way in 3.3 for the sortable jquery example?
I’m searching for hours now, but the ‘how to include the javascript - jquery code in cakephp 3.3’ I can’t find :frowning:

2

to include for all pages

copy jquery.min.js to webroot/js/jquery.min.js

edit

src/Template/Layout/default.ctp

<?php
echo $this->Html->script([
                'jquery.min',
                'jquery-ui.custom.min',
            ]);
?>
3

That’s like before. But how can I write the $( “my.button” ).html( “Next Step…” ) in files?

4

https://book.cakephp.org/3.0/en/views/helpers/html.html#Cake\View\Helper\HtmlHelper::scriptBlock
in model template:

<?php
$this->Html->scriptBlock('
            
   $(document).ready(function() {
        $( "my.button" ).html( "Next Step..." );
   });

    ', ['block' => true]);
?>
5

That’s it! Many Thanks.

6

I prefer to move the JavaScript into an Html-helper-element. So I don’t mess up my template with large JavaScript-Codeblocks and can reuse the JavaScript-code in other templates.

For example:
In your template-file:

<?php $this->append('script'); echo $this->element('js/typeaheadUsers'); $this->end(); ?>

in /src/Template/Element/js/typeaheadUsers.ctp:
< script>
$(document).ready(function () {
$.typeahead({
…
});
})
< / script>

Another advantage is that the code-highlighting and code-formating of your IDE (if you use one) is working.