javascript - 通过 JS 填充的模式中的按钮不起作用
问题描述
我在我的 laravel 8 项目中通过单击表格中的一行动态填充了一个模态,并且在模态的页脚中我有一个<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>×</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。
解决方案
代替
$(".modal-footer").append('@csrf()');
尝试
$(".modal-footer").append('{{ csrf_field() }}');
我不确定刀片指令是否正常工作。
推荐阅读
- html - 在页面居中的文本下居中引导按钮
- git - 如何使用父 SHA 创建一个 git 补丁,以便它可以用作存档?
- sql - 如何设置垂直查询的结果?
- appium - Appium 的 startActivity() 方法不起作用... throws WebDriverException: unknown error
- python - Boto3 - 如何保持会话活跃
- azure - 当我的 API 管理未传递 API URL 后缀时,如何强制执行 URL 重定向
- python - 在数字序列中查找丢失的数字
- algorithm - 在 Rust 中对 Vector 的 Vector 中的相似元素进行分组
- bash - Bash getopts 选项与另一个
- r - 用r中的奇怪字符解析数字