Page content doesn't render page layout components

JayP · February 2, 2021, 10:00am

Hi all,

With the system described below, I created a page layout called main and when I try to create a page content using the layout page, I just get a blank page. What can I be doing wrong? thanks for your help. I am attaching layout page code.

Best,

Jay

Wappler Version : 3.7.3
Operating System : Windows 10
Server Model: node js v 14.15 .1 says on the local system on docker says 12.20.1
Database Type: MySql v 8.0
Hosting Type: Docker on desktop

I was expected the content page to render the components of the main layout page

Actual behavior

What actually happens?
the content page renders blank, The components from the main layout page don’t appear

<!doctype html>

<html>

<head>

  <base href="/">

  <script src="dmxAppConnect/dmxAppConnect.js"></script>

  <meta charset="UTF-8">

  <title>Untitled Document</title>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="bootstrap/4/css/bootstrap.min.css" />

  <script src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>

  <script src="dmxAppConnect/dmxRouting/dmxRouting.js" defer=""></script>

</head>

<body is="dmx-app" id="main">

  <header class="bg-light wappler-block">

    <div class="container">

      <div class="row">

        <div class="col">

          <nav class="navbar navbar-expand-lg navbar-light bg-light">

            <a class="navbar-brand mr-auto" href="#"><img src="assets/images/logo4.png" wappler-command="updateImage"></a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">

              <span class="navbar-toggler-icon"></span>

            </button>

            <div class="collapse navbar-collapse justify-content-end" id="navbar1_collapse">

              <div class="navbar-nav">

                <a class="nav-item nav-link active" href="#">Home</a>

                <a class="nav-item nav-link" href="#">About</a>

                <a class="nav-item nav-link" href="#">Contact</a>

              </div>

              <a class="btn btn-dark btn-sm" href="#">Sign up</a>

            </div>

          </nav>

        </div>

      </div>

    </div>

  </header>

  <div is="dmx-view" id="content">

    <%- await include(content, locals); %>

  </div>

  <footer class="bg-light wappler-block">

    <div class="container">

      <div class="row align-items-top">

        <div class="col-6 col-md text-center">

          <h5>Features</h5>

          <ul class="list-unstyled text-small">

            <li><a class="text-muted" href="#">Cool stuff</a></li>

            <li><a class="text-muted" href="#">Random feature</a></li>

            <li><a class="text-muted" href="#">Team feature</a></li>

            <li><a class="text-muted" href="#">Stuff for developers</a></li>

            <li><a class="text-muted" href="#">Another one</a></li>

            <li><a class="text-muted" href="#">Last time</a></li>

          </ul>

        </div>

        <div class="col-6 col-md text-center">

          <h5>Resources</h5>

          <ul class="list-unstyled text-small">

            <li><a class="text-muted" href="#">Resource</a></li>

            <li><a class="text-muted" href="#">Resource name</a></li>

            <li><a class="text-muted" href="#">Another resource</a></li>

            <li><a class="text-muted" href="#">Final resource</a></li>

          </ul>

        </div>

        <div class="col-6 col-md text-center">

          <h5>About</h5>

          <ul class="list-unstyled text-small">

            <li><a class="text-muted" href="#">Team</a></li>

            <li><a class="text-muted" href="#">Locations</a></li>

            <li><a class="text-muted" href="#">Privacy</a></li>

            <li><a class="text-muted" href="#">Terms</a></li>

          </ul>

        </div>

      </div>

      <div class="row mt-3">

        <div class="col">

          <p class="text-secondary text-center small mb-0 p-1">© Copyright 2021. All Rights Reserved.</p>

        </div>

      </div>

    </div>

  </footer>

  <script src="bootstrap/4/js/popper.min.js"></script>

  <script src="bootstrap/4/js/bootstrap.min.js"></script>

</body>

</html>

Teodor · February 1, 2021, 10:39am

Hello,
Where do you see a blank page? Is this in Wappler design view or in your browser?

JayP · February 1, 2021, 1:07pm

Hi Teodor,
It is in the design view and in the toggled preview that I get the blank pages. I just opened the content page on the browser and it gets rendered! Still, I need the components in the design view of the content page to design the rest of the page.
Hope it helps.
Jay

Teodor · February 1, 2021, 1:08pm

Can you please post a screenshot of what you see in Wappler exactly?

JayP · February 1, 2021, 2:51pm

Here are two screenshots, one from the page layout and another from the page content:

Best.
Jay

JayP · February 1, 2021, 4:19pm

This may give some further clues, I just added some Nav items to the layout page and I get the error message at the bottom of the design area:

“Failed to load resource: the server responded with a status of 404”
I am attaching a screenshot
Best.
Jay

JayP · February 2, 2021, 9:16am

I started a new project from scratch and the problem persists. I guess it is a bug with the layout pages and I will have to find another way of templating my app…

Teodor · February 2, 2021, 10:00am

If there is an issue with that, then it will be fixed.
Can you share a screenshot of the content page code? Also on your screenshot i don’t see anything added in its body:

What do you expect to see?
Do you want to see what’s included on the layout page - if that’s what you expect, this is not how it works.
On layout pages you only see the content of the specific layout page you are working on, not the layout page content. That’s how it is supposed to work, an that’s not a bug.

JayP · February 2, 2021, 9:57am

Thank you Teodor,

Glad to hear it is not a bug. But you need to reflect this fact in the documentation as I was not expecting a blank page but one with the layout components as mentioned and shown in the screenshot01 on the section “Creating a Content Page” of the documentation as per link below:

Hope it helps.
Best.

Jay

Teodor · February 2, 2021, 10:00am

The screenshot actually shows the Layout page you just created, and it shows how to create a content page out of it. It doesn’t show a content page.

JayP · February 2, 2021, 10:18am

OK, I got it now. Thanks!

George · September 29, 2022, 10:38am