У меня требуют не определена ошибка - PullRequest
Новая
       9

У меня требуют не определена ошибка

0 голосов
/ 03 июня 2018

Пытаясь реализовать функциональность деталей строк данных (https://datatables.yajrabox.com/eloquent/row-details) в моем шаблоне laravel 5.5.40 / Voyager ("tcg / voyager": "^ 1.0") / Bootstrap 3.3.7, я обнаружил ошибку:

app.js:24 Uncaught ReferenceError: Handlebars is not defined

Гуглил, я нашел решение: 

var Handlebars = require('handlebars');

Но я получил ошибку: 

articles:915 Uncaught ReferenceError: require is not defined

Я нашел, какие файлы вложены в конфигурацию файла/voyager.php:

   ...
    // Here you can specify additional assets you would like to be included in the master.blade
    'additional_css' => [
        'css/bootstrap-tagsinput-typeahead.css',
        'css/bootstrap-tagsinput.css',
        'css/bootstrap-treeview.css',
        'css/customisation.css',
        'css/spectrum.css',
    ],

    'additional_js' => [
        'js/bootstrap-tagsinput.js',
        'js/spectrum.js',
    ],
   ...

Можете ли вы дать подсказку, какой файл / плагин я должен прикрепить к списку выше? В проекте я нашел файл /node_modules/webpack/lib/RequireJsStuffPlugin.js Это то, что мне нужно и какприкрепить и как?

Спасибо!

ИЗМЕНЕНО: после googlingI я установил 

npm install requirejs

с выводом 

+ requirejs@2.3.5
added 1 package from 1 contributor in 26.245s

Но это не такпомогите, я все еще получаю сообщение об ошибке: 

ReferenceError: require is not

Нужно включить requirejs в некоторые файлы конфигурации или в мой скрипт и как, если да?

MODIFIED 2:

С ресурсом Как включить файл JavaScript в другой файл JavaScript? Я пытаюсь исправить ошибку на примере:

Я только что написалэтот код JavaScript (с использованием Prototype для манипулирования DOM):

Для этого я скопировал файл /public/js/require.js (инфраструктура Prototype JavaScript, версия 1.7.2) и файл public / js / require.js по URL https://gist.github.com/nornagon/284442

и в моем шаблоне блейда: 

<script src="/js/prototype.js"></script>
<script src="/js/require.js"></script>
@section('javascript')

и получил ошибку: 

Uncaught TypeError: element.attachEvent is not a function
    at observeStandardEvent (prototype.js:6950)
    at observe (prototype.js:6940)
    at HTMLScriptElement._methodized [as observe] (prototype.js:456)
    at require.js:21
    at showArticleListing (articles:1021)
    at HTMLDocument.<anonymous> (articles:896)
    at c (app.js:24)
    at u (app.js:24)

в строке: 

    var Handlebars = require('handlebars');

По ссылке выше было несколько примеров прикрепления файлов js.Но мой случай отличается от ошибки: 

Uncaught ReferenceError: Handlebars is not defined

Я пытался включить Handlebars, но в моем проекте нет файла, подобного Handlebars.js ...?

MODIFIED 3:

В комментариях к примеру была проблема с использованием Mustache.js: https://github.com/yajra/laravel-datatables/issues/1511 Я следую, как: 

@extends('layouts.master')

@section('content')


    <table class="table table-bordered" id="users-table">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Created At</th>
            <th>Updated At</th>
        </tr>
        </thead>
    </table>

@stop

@push('scripts')

    <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

    <script id="details-template" type="mustache/x-tmpl">
    <table class="table">
        <tr>
            <td>Full name:</td>
            <td><%name%></td>
        </tr>
        <tr>
            <td>Email:</td>
            <td><%email%></td>
        </tr>
        <tr>
            <td>Extra info:</td>
            <td>And any further details here (images etc)...</td>
        </tr>
    </table>
    </script>

    <script  >

        $(function() {

            Mustache.tags = ["<%", "%>"];
            var template = $('#details-template').html();

            console.log("template::")
            console.log( template )

            var table= $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{!! route('get_users') !!}',
                columns: [
                    {
                        "className":      'details-control',
                        "orderable":      false,
                        "searchable":     false,
                        "data":           null,
                        "defaultContent": ''
                    },

                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'updated_at', name: 'updated_at' }
                ]
            });


            // Add event listener for opening and closing details
            $('#users-table tbody').on('click', 'td.details-control', function () {
                console.log( '-1' )
                var tr = $(this).closest('tr');
                console.log("-2 tr::")
                console.log( tr )

                var row = table.row( tr );
                console.log("-3 row::")
                console.log( row )


                if ( row.child.isShown() ) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
//                    row.child( template(row.data()) ).show();
                    row.child( Mustache.render(template, row.data()) ).show();
                    console.log("row::")
                    console.log( row )


                    tr.addClass('shown');
                }
            });
        });
    </script>

@endpush

И я получил ошибку: 

jquery.dataTables.min.js:59 Uncaught TypeError: Cannot read property 'style' of undefined
    at Ga (jquery.dataTables.min.js:59)
    at ga (jquery.dataTables.min.js:45)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:93)
    at Function.each (jquery.js:383)
    at jQuery.fn.init.each (jquery.js:136)
    at jQuery.fn.init.m [as dataTable] (jquery.dataTables.min.js:83)
    at jQuery.fn.init.P.h.fn.DataTable (jquery.dataTables.min.js:159)
    at HTMLDocument.<anonymous> (index:89)
    at fire (jquery.js:3119)
    at Object.fireWith [as resolveWith] (jquery.js:3231)

Глядя на консоль, код шаблона был найден: https://imgur.com/a/WOJPsUw
, так как возникло непонимание, куда поместить шаблон 

I have no error if to remove the definition of the first column:
                    {
                        "className":      'details-control',
                    ...

Есть ли способ исправить это?

...