通过 JS 填充的模式中的按钮不起作用

Question

我在我的 laravel 8 项目中通过单击 table 中的一行来动态填充模态，并且在模态的页脚中我有一个 <input type="submit">。但是当我点击按钮时没有任何反应，我无法确定问题是由于我创建表单的方式还是我的代码错误。有人有什么建议吗？我哪里错了？

这是我的代码：

<tbody>
    @foreach ($users as $u)
        <tr wire:click='openModal({{ $u->id }})'>
            <td>{{ $u->username }}</td>
            <td>{{ $u->nome }}</td>
            <td>{{ $u->cognome }}</td>
            <td>{{ $u->email }}</td>
            <td>{{ $u->codicefiscale }}</td>
            <td>{{ $u->ruolo == 0 ? 'Admin' : 'Collaboratore' }}</td>
            <td>
                <div class="d-flex">
                    <a href="{{ url('tenants/' . $idt . '/users/'.$u->id.'/update') }}" class="btn btn-primary shadow btn-xs sharp mr-1" >
                        <i class="fa fa-pencil"></i>
                    </a>
                    <form method="POST" action="{{ url('tenants/' . $idt . '/users/impersonate') }}">
                        @csrf
                        <input type="hidden" value="{{ $u->id }}" name="idu">
                        <button type="submit" class="btn btn-success shadow btn-xs sharp">
                            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                        </button>
                    </form>
                    <form method="POST" action="{{ url('tenants/' . $idt . '/users/delete') }}">
                        @csrf
                        @method('delete')
                        <input type="hidden" value="{{ $u->id }}" name="idu">
                        <button type="submit" class="btn btn-danger shadow btn-xs sharp">
                            <i class="fa fa-trash"></i>
                        </button>
                    </form>
                </div>
            <td>
        </tr>
    @endforeach
</tbody>
<div class="modal fade" id="UtenteLongModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Dettagli dell'utente</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- da aggiungere l'azione -->
                <div class="basic-form">
                    <!-- modal popolato dallo script -->
                </div>
            </div>
            <div class="modal-footer">
                
            </div>
        </div>
    </div>
</div>
<script>
    window.addEventListener('open', event => {
        var url = '{{ url("tenants/:idt/users/:idu/resetPassword") }}';
        url = url.replace(':idt', event.detail.idt);
        url = url.replace(':idu', event.detail.user.id);
        url = url.replace('%3Aidu', '');

        $(".modal-body").empty();
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Username</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.username+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Nome</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.nome+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Cognome</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.cognome+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Email</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.email+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Codice Fiscale</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.codicefiscale+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Abilitato</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.abilitato+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Qualifica</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.id_qualifica+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Ruolo</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.ruolo+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Ufficio</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.ufficio+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Indirizzo</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.indirizzo+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Comune</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.id_comune+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Provincia</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.id_provincia+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">CAP</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.cap+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Cellulare</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.cellulare+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Telefono</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.telefono+'" /></div></div>' );
        $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Fax</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.fax+'" /></div></div>' );
        // $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Scrittura</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.scrittura+'" /></div></div>' );
        $(".modal-footer").empty();
        $(".modal-footer").append('<form id="resetPasswordForm" method="POST" action="'+url+'">');
        $(".modal-footer").append('@csrf()');
        $(".modal-footer").append('<input type="text" hidden name="idu" value="'+event.detail.user.id+'"/>');
        $(".modal-footer").append('<input type="submit" class="btn btn-primary" value="Resetta la password" />');
        $(".modal-footer").append('</form>');
        // document.getElementById("resetPasswordForm").submit();
        $("#UtenteLongModal").modal('show');
    })
</script>

我用 console.log(url) 测试了生成的 url 是否正确，并且在我的脚本中取消注释 document.getElementById("resetPasswordForm").submit (); 我自动（因为它是正确的）在请求 url，错误 419。

Answer 1

而不是

$(".modal-footer").append('@csrf()');

尝试

$(".modal-footer").append('{{ csrf_field() }}');

我不确定 blade 指令是否正常工作。

Answer 2

您将表单的输入字段附加到实际表单之外。这就是为什么点击操作实际上什么也不会发生。

你必须像这样附加它们（当多个用户在 table 上时，我使用用户 ID 来区分不同形式和不同模式）

$(".modal-footer").append('<form id="resetPasswordForm' + event.detail.user.id + '" method="POST" action="'+url+'">');
$("#resetPasswordForm" + event.detail.user.id).append('@csrf()');
$("#resetPasswordForm" + event.detail.user.id).append('<input type="text" hidden name="idu" value="'+event.detail.user.id+'"/>');
$("#resetPasswordForm" + event.detail.user.id).append('<input type="submit" class="btn btn-primary" value="Resetta la password" />');

通过 JS 填充的模式中的按钮不起作用

Button in a modal populated via JS not works

javascript

laravel

bootstrap-modal