How to add JS Snippet

Kirby 2 Solved ✅
1

Hello and thank you for developing Kirby.
I need to call a JS in a page. I have done the following but its not working. Please help.

  1. Added the js/css files to assets/js/

  2. Created a snippet called json.php: (this is a sample usage from the script developers docs)

     <link href="assets/js/jsoneditor.min.css" rel="stylesheet" type="text/css">
 <script src="assets/js/jsoneditor.min.js"></script>

     <script>
     // create the editor
     var container = document.getElementById("jsoneditor");
     var editor = new JSONEditor(container);

     // set json
     var json = {
         "Array": [1, 2, 3],
         "Boolean": true,
         "Null": null,
         "Number": 123,
         "Object": {"a": "b", "c": "d"},
         "String": "Hello World"
     };
     editor.set(json);

     // get json
     var json = editor.get();
 </script>

  3. Created a template called json.php

    <?php snippet('header') ?> <?php snippet('menu') ?> <?php echo $page->text()->kirbytext() ?> <?php snippet('json') ?> <?php snippet('footer') ?>

  4. Created a page and then renamed the default txt file in that folder to json.txt

2

Do you get any errors on console? (alt+cmd+J)
Maybe there’s a clue.

3

Is the code you posted above your son.php snippet? Then that just does not make sense, because you add footer and header in your template again … The references to the js and css file should go into the header, the script into your footer right before the closing body tag.

4

Additionally to what has been written before, you should use the css() and js() helpers to make sure the URLs to the files are absolute and always correct:

<?php echo css('assets/js/jsoneditor.min.css') ?>

And before the closing </body> tag:

<?php echo js('assets/js/jsoneditor.min.js') ?>
1 Like
5

No errors but good point. I needed to check that.

6

I added the helpers but that did not help. I tried changing my link references for the css and js to the full url instead of absolute which is not something I like to do but for some reason that seemed to fix it. The JS is now showing but it’s not positioned correctly. It’s all the way to the left instead of being in the body center where my kirby-text is.

I also took the suggestion from “texnixe” and removed the header from the snippet and then added the references to the js and css file to the header that the template is using.

I suspect the positioning issue I am having is coming from the css that the JS is using so I will look at that. Let me know if you think its something else.

Thanks again for your help.

7

At a glance it looks like your files are not linked correctly.
Also you don’t have the right content in the right files.
It’s more a problem with structure than the code itself.

8

I think you are pretty close. You might need to reorder you content:

<!-- snippets/header.php -->
<?php echo css('assets/js/jsoneditor.min.css') ?>
<?php echo js('assets/js/jsoneditor.min.js') ?>

<!-- snippets/json.php -->
<div id="jsoneditor"></div>
<script>
  // create the editor… … …
</script>

<!-- templates/json.php  -->
<?php snippet('header') ?>
<?php snippet('menu') ?>
<?php echo $page->text()->kirbytext() ?>
<?php snippet('json') ?>
<?php snippet('footer') ?>

Everything else seems close to the normal.

Also:

  • You have 2 files named json.php, that could lead to confusion. Try to avoid that.
  • If the jsoneditor.min.js file needs to be loaded before creating: new JSONEditor(), you might need to keep that JS link in the header, not in the footer
1 Like
9

Thank you heyallan. That works much better,

1 Like