0

I am currently working on a little project, that I cannot get to run properly. This is my page.html, which I use as a template. 

  <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title data-template="config:app-title">App Title</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <meta data-template="config:app-meta"/>
            <link rel="shortcut icon" href="$shared/resources/images/exist_icon_16x16.ico"/>
            <link rel="stylesheet" type="text/css" href="$app-root/resources/css/bootstrap.min.css"/>
            <link rel="stylesheet" type="text/css" href="$app-root/resources/css/style.css"/>
            <script type="text/javascript" src="$app-root/resources/scripts/jquery/jquery-3.4.1.js"/>
            <script type="text/javascript" src="$app-root/resources/scripts/bootstrap.min.js"/>
            <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
            <script type="text/javascript" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
        </head>
        <body id="body">
        <div class="container">    
            <div class="jumbotron">
                <h1>Title</h1>
                <hr/>
                <p>A Digital Edition</p>
            </div>
            <ul class="nav nav-tabs py-0 my-0" style="text-align:center;">
                <li class="nav-item">
                    <a class="nav-link" href="./index.html">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./around.html">Around the World</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./table.html">Content</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./methods.html">Methods?</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./aboutme.html">About Me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./#">What else?</a>
                </li>
            </ul>
        </div>    
            <div id="content" class="container"/>
            <hr class="hr-style"/>
            <footer style="text-align:center;">
                        <a href="#">Contact</a>
            </footer>
        </body>

              <script type="text/javascript">
        $(document).ready(function(){
          $('.slider').slick({
            setting-name: setting-value
          });
        });
      </script>
    </html>

My typical page looks a little like the following: 

<div xmlns="http://www.w3.org/1999/xhtml" data-template="templates:surround" data-template-with="templates/page.html" data-template-at="content">  

        <head>
            <title>How it is supposed to look</title>

        </head>
        <body>
      <div class="slider">
        <div data-template="app:XMLtoHTML-forAll"/>

      </div>
    </body>
    </div>

And I cannot get any javascript to run (as an example there is slick in it, which I copied from here). All my XML which is transformed to HTML, using xslt, is correctly transformed and displayed. However, I do not get a slider but only the <div> that are created using the xslt. This happens, no matter where I include the javascript for slick. I've tried it in the <head> (of page.html, as well as in the specific page), in the <body> at the end, and even after </body>.

When I use exemplary <div>test-content</div> and several similar files, the same happens to them, as there obviously is no JS running, no matter where I put the script!

Any hints for that? Here's the promised edit:

  Source-Map-Fehler: Error: request failed with status 404
    Ressourcen-Adresse: http://localhost:8080/exist/apps/BookOfOrders/pages/$app-root/resources/js/bootstrap.min.js
    Source-Map-Adresse: bootstrap.min.js.map

Here's the second edit, mentioned in comments:

my file structure: file Structure

the errors:error message

and my header

  • Use triple-backticks for multiple lines of code. For inlining code, use a single backtick. –  Jan 14 '20 at 18:49
  • Open the Console and Network tabs in Chrome DevTools (`F12` on Windows) when loading the page. Hopefully it'll give you better insight. – Sunny Patel Jan 14 '20 at 18:49
  • Where are you using `ExistDB` in the code? – Barmar Jan 14 '20 at 18:53
  • ExistDBs templating engine, else it is not too specific for ExistDB, your right. I'll edit my console errors in my post! –  Jan 14 '20 at 18:57
  • Looks like your $app-root is not being expanded. Do you need to place it between {} – adamretter Jan 15 '20 at 00:01
  • using {} results in more errors. I only just tried to use `../resources/...` but the error remains the same :-/ Maybe this is relevant: I started the project on 4.1 and am now using version 5.1.1 –  Jan 17 '20 at 07:16

0 Answers0