1. Zuhause
  2. Frage und Antwort
  3. Warum kommt Thymeleaf Vorlage nicht das Layout verwenden

Warum kommt Thymeleaf Vorlage nicht das Layout verwenden

2017-09-16 2 views
0

Meine Seite ist wie folgt:Warum kommt Thymeleaf Vorlage nicht das Layout verwenden

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:th="http://www.thymeleaf.org" 
     xmlns:sec="http://www.springframework.org/security/tags" 
     xmlns:layout="http://www.ultraq.net/thymeleaf/layout" 
     layout:decorate="~{layout}"> 
     <head> 
     </head> 
     <body> 
      <div layout:fragment="content"> 
       <div th:with="rowW='row col-md-9',userNameW='col-md-1',deviceIdW='col-md-4',timestampW='col-md-4',reasonW='col-md-2'"> 
        <div><span th:text="'function='+${function}"></span></div> 
        <div th:unless="${function} != null and ${function} == 'save'"> 
         <div class="col-md-3 btn btn-primary" th:classappend="rowW"><a href="localhost:8080/server-admin/card/new" class="btn-primary">New Card</a></div> 
        </div> 
        <div th:if="${function} != null and ${function} == 'save'"> 
         <div class="col-md-3 btn btn-primary" th:classappend="rowW"><a href="localhost:8080/server-admin/card/new" class="btn-primary">New Card</a></div> 
        </div> 
       </div> 
      </div> 
     </body> 
    </html> 

If function is null, the layout is displayed. If function is card the layout is not displayed: 

For function=null: 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 
     <meta charset="UTF-8"> 
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" /> 
     <link rel="stylesheet" href="css/navbar.css" /> 
     <link rel="stylesheet" href="css/body.css" /> 
     <link rel="stylesheet" href="css/footer.css" /> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <script src="/resources/pwstrength.js"></script> 
     <script src='https://www.google.com/recaptcha/api.js'></script> 
    </head> 
    <body> 
     <div class="navigation"> 

     <div id="navbar-examle" class="navbar navbar-static"> 
      <div class="navbar-inner"> 
       <div id="a" class="container" style="width: auto;"> 
        <a class="brand" href="#" style="float:left;"><img 
         src="/images/Dadavatar.png"><span>My Project</span></a> 
        <ul id="b" class="nav" role="navigation"> 
         <li id="c" class="dropdown" style="float:left;"> 
          <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><span>Login</span><b class="caret"></b></a> 
          <ul id="d" class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
           <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/login">Login</a></li> 
           <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="/login?logout">Logout</a></li> 
           <li role="presentation" class="divider"></li> 
           <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/forgetPassword.html">Reset Password</a></li> 
           <li role="presentation" class="divider"></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html">Sign up</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?captcha">Sign up with Captcha</a></li> 
           <li role="presentation" class="divider"></li> 
           <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="enable2FA()">Enable 2FA</a></li> 
           <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="disable2FA()">Disable 2FA</a></li> 
          </ul> 
         </li> 
         <li class="dropdown" style="float:left;"> 
          <a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> 
           <span>English</span> 

           <b class="caret"></b></a> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=en">English</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=es_ES">Spanish</a></li> 
          </ul> 
         </li> 

          <li class="dropdown" style="float:left;"> 
           <a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> 
            <span>Administration</span> 
            <b class="caret"></b></a> 
           <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?loggedlist">Logged On Users</a></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?userlist">User List</a></li> 
           <li role="presentation" class="divider"></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?useraccount">User Accounts</a></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?role">Roles</a></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?privilege">Privileges</a></li> 
           <li role="presentation" class="divider"></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?card">Cards</a></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?cardtype">Card Types</a></li> 
           <li role="presentation" class="divider"></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?piprocessor">PiProcessors</a></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?node">Nodes</a></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?nodefunction">Node Functions</a></li> 
           </ul> 
          </li> 

        </ul> 
       </div> 
      </div> 
     </div> 

    </div> 










     <div class="content"> 
      <div> 
       <div><span>function=null</span></div> 
       <div> 
        <div class="col-md-3 btn btn-primary rowW"><a href="localhost:8080/server-admin/card/new" class="btn-primary">New Card</a></div> 
       </div> 

      </div> 
     </div> 
     <br> 
     <br /> 
     <div id="qr"> 
      <p> 
       <span>Scan this Barcode using Google Authenticator app on your phone</span> 
       <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android</a> 
       <span>and</span> 
       <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605">iPhone</a> 
      </p> 
     </div> 
     <div> 
      <footer class="footer"> 
       <div class="container"> 
        <span class="text-muted">&copy; 2017 - Field Server</span> 
       </div> 
      </footer> 
     </div> 
    </body> 
</html>

function=null

Für Funktion = speichern:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 
     <meta charset="UTF-8"> 
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" /> 
     <link rel="stylesheet" href="css/navbar.css" /> 
     <link rel="stylesheet" href="css/body.css" /> 
     <link rel="stylesheet" href="css/footer.css" /> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <script src="/resources/pwstrength.js"></script> 
     <script src='https://www.google.com/recaptcha/api.js'></script> 
    </head> 
    <body> 
     <div class="navigation"> 

     <div id="navbar-examle" class="navbar navbar-static"> 
      <div class="navbar-inner"> 
       <div id="a" class="container" style="width: auto;"> 
        <a class="brand" href="#" style="float:left;"><img 
         src="/images/Dadavatar.png"><span>My Project</span></a> 
        <ul id="b" class="nav" role="navigation"> 
         <li id="c" class="dropdown" style="float:left;"> 
          <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><span>Login</span><b class="caret"></b></a> 
          <ul id="d" class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
           <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/login">Login</a></li> 
           <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="/login?logout">Logout</a></li> 
           <li role="presentation" class="divider"></li> 
           <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/forgetPassword.html">Reset Password</a></li> 
           <li role="presentation" class="divider"></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html">Sign up</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?captcha">Sign up with Captcha</a></li> 
           <li role="presentation" class="divider"></li> 
           <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="enable2FA()">Enable 2FA</a></li> 
           <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="disable2FA()">Disable 2FA</a></li> 
          </ul> 
         </li> 
         <li class="dropdown" style="float:left;"> 
          <a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> 
           <span>English</span> 

           <b class="caret"></b></a> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=en">English</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=es_ES">Spanish</a></li> 
          </ul> 
         </li> 

          <li class="dropdown" style="float:left;"> 
           <a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> 
            <span>Administration</span> 
            <b class="caret"></b></a> 
           <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?loggedlist">Logged On Users</a></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?userlist">User List</a></li> 
           <li role="presentation" class="divider"></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?useraccount">User Accounts</a></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?role">Roles</a></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?privilege">Privileges</a></li> 
           <li role="presentation" class="divider"></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?card">Cards</a></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?cardtype">Card Types</a></li> 
           <li role="presentation" class="divider"></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?piprocessor">PiProcessors</a></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?node">Nodes</a></li> 
            <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?nodefunction">Node Functions</a></li> 
           </ul> 
          </li> 

        </ul> 
       </div> 
      </div> 
     </div> 

    </div> 










     <div class="content"> 
      <div> 
       <div><span>function=save</span></div> 

       <div> 
        <div class="col-md-3 btn btn-primary rowW"><a href="localhost:8080/server-admin/card/new" class="btn-primary">New Card</a></div> 
       </div> 
      </div> 
     </div> 
     <br> 
     <br /> 
     <div id="qr"> 
      <p> 
       <span>Scan this Barcode using Google Authenticator app on your phone</span> 
       <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android</a> 
       <span>and</span> 
       <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605">iPhone</a> 
      </p> 
     </div> 
     <div> 
      <footer class="footer"> 
       <div class="container"> 
        <span class="text-muted">&copy; 2017 - Field Server</span> 
       </div> 
      </footer> 
     </div> 
    </body> 
</html>

function=save

Das Folgende ist die diff-Ausgabe für die zwei Dateien:

$ diff thymeleaf* 
91c91,92 
<    <div><span>function=null</span></div> 
--- 
>    <div><span>function=save</span></div> 
> 
95d95 
< 
$

Es sieht tatsächlich aus wie der Fehler ist nicht in Thymeleaf, sondern der Chrome-Browser. Hat jemand eine Idee, wie man vorgeht?

Ich habe eine Reihe von Dingen ausprobiert, aber soweit ich sagen kann, der einzige Unterschied in der tatsächlichen HTML ist Leerzeilen.

Quelle

2017-09-16 AixNPanes

+0

Funktioniert gleich auf Firefox. Hmmm – AixNPanes

Antwort

0

Ich habe die Seite mit Chrom inspect ausgecheckt und es sieht aus wie ich ein Problem mit dem CSS-Pfad habe. Die relativen Pfade für die statischen Dateien schlagen fehl, wenn die URL zusätzliche Elemente im Pfad enthält. Na sicher.

Quelle

2017-09-18 13:18:00 AixNPanes

Verwandte Themen

 Verwandte Themen