gsp view not working as expected when utilizing a layout

I have the following GSP page which accurately creates a data table as expected:

<html>

<head>

    <title></title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" charset="utf-8"/>
    <link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" charset="utf-8"/>
</head>

<body>


<div class="container">
    <div class="jumbotron">
        <h3>Test</h3>
    </div>

    <table id="test" class="table table-bordered">
        <thead>
        <tr>
            <th>Test</th>
            <th>Test</th>
            <th>Test</th>

        </tr>
        </thead>

        <tfoot>
        <tr>
            <th>Test</th>
            <th>Test</th>
            <th>Test</th>
        </tr>
        </tfoot>

        <tr>
            <td>T1</td>
            <td>T1</td>
            <td>T1</td>

        </tr>

        <tr>
            <td>T2</td>
            <td>T2</td>
            <td>T2</td>

        </tr>

    </table>


</div>

</body>
<!-- Jquery -->
<script charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Datatables -->
<script charset="utf-8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap -->
<script charset="utf-8" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
      $(document).ready(function() {
        $('#test').DataTable();
      });
    </script>
</html>

but as soon as I try to add a layout:

<meta name="layout" content="main" />

The datatable stops working, and it looks just like a regular table.

I was wondering if anyone had any advice or thoughts on why this is occurring.

This is my main layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Test</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <asset:link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <asset:stylesheet src="application.css"/>
    <g:layoutHead/>
    <script type="text/javascript">
        window.contextPath = "${request.contextPath}";
    </script>
</head>
<body>
    <div class="card-body">
        <g:layoutBody/>
    </div>


</body>
</html>

Please let me know if you have any advice, thank you!

gsp view not working as expected when utilizing a layout

0 Answers