Can Javascript be written in .edge file?

Question

I just started learning Adonis.js and I would like to know if it's possible to write Javascript in an .edge file? I've found this tutorial (here) on how to add table row dynamically and I want to implement this in my Adonis.js project. I've add the coding inside a <script> tag, yet there's nothing happen when I clicked the 'Add' button. Does anyone know how to work this out? Or even have another solution on this?

Thank you in advance for the help.

@layout('main')

@section('content')
    <a href="/">Go back</a>
    <hr>

    <h1>Create Club</h1>

    <form action="/clubs/create" method="POST">

        {{ csrfField() }}

        <div class="form-group">
            <label>Club Name</label>
            <input type="text" name="clubName" class="form-control" value="{{ old('clubName', '') }}">
            {{ elIf('<span class="text-danger">$self</span>', getErrorFor('clubName'), hasErrorFor('clubName')) }}
        </div>

        <div class="form-group">
                <label>Club Description</label>
                <textarea name="clubDesc" class="form-control">{{ old('clubDesc', '') }}</textarea>
                {{ elIf('<span class="text-danger">$self</span>', getErrorFor('clubDesc'), hasErrorFor('clubDesc')) }}
        </div>

        <br>

        <table class="table order-list">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Position</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" name="memberName" class="form-control"/>
                    </td>
                    <td>
                            <input type="text" name="position" class="form-control"/>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5" style="text-align: left;">
                        <input type="button" class="btn btn-sm btn-block" id="addrow" value="Add Member"/>
                    </td>
                </tr>
            </tfoot>
        </table>

        <button class="btn btn-primary" type="submit">Create!</button>

    </form>

    <script>
        $(document).ready(function () {
            var counter = 0;

            $("#addrow").on("click", function () {
                var newRow = $("<tr>");
                var cols = "";

                cols += '<td><input type="text" class="form-control" name="memberName' + counter + '"/></td>';
                cols += '<td><input type="text" class="form-control" name="position' + counter + '"/></td>';

                cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
                newRow.append(cols);
                $("table.order-list").append(newRow);
                counter++;
            });

            $("table.order-list").on("click", ".ibtnDel", function (event) {
                $(this).closest("tr").remove();       
                counter -= 1
            });

        });

        function calculateRow(row) {
            var price = +row.find('input[name^="price"]').val();
        }

        function calculateGrandTotal() {
            var grandTotal = 0;
            $("table.order-list").find('input[name^="price"]').each(function () {
                grandTotal += +$(this).val();
            });
            $("#grandtotal").text(grandTotal.toFixed(2));
        }
    </script>

@endsection

Yes, you can add **javascript code** you your **.edge** file. — Pepe, Jan 07 '19 at 16:22
@Pepe however, I'm curious with the 'price' variable in the tutorial given. Do you know what it represents in the code? — quratulhzm, Jan 08 '19 at 01:11
You're using jQuery, did you also included the jquery library? Please add a working HTML example and use console.log to find your errors ... — Christopher Dosin, Jan 08 '19 at 01:14
@ChristopherDosin I've added `{{ script('https://code.jquery.com/jquery-3.3.1.slim.min.js') }}` in my `main.edge` file. Since you mentioned about it, I tried to include `` in the code above. And it works! Does the library differ though? Btw, thank you for pointing it out. — quratulhzm, Jan 08 '19 at 01:29

score 1 · Answer 1 · answered Jan 08 '19 at 01:13

1

From the docs:

in order to write raw HTML, you must wrap it inside {{{ }}}

That suggests that you should be able to do*:

{{{
<script>
   // .. JavaScript here
</script>
}}}

*There may be other - potentially better, ways. I've never used the templating engine before, but the above seems to accomplish what you are looking for.

answered Jan 08 '19 at 01:13

Matthew Herbst

29,477
23
85
128

2

I've tried wrap the `{{{ }}}` with the code and it seems to be appear at the bottom of my page like this {{{ }}} and it still works without wrapping the code with `{{{ }}}`. Anyways, I've found out the problem. It is the library. The one I've included earlier doesn't seem to work with the code. Thank you for your response though, I appreciate it. – quratulhzm Jan 08 '19 at 01:36

Can Javascript be written in .edge file?

1 Answers1