[英]Clicking on table row returning the incorrect data
感谢您抽出宝贵的时间来研究我的问题。
我有一个视图,该数据从我的数据库返回通过控制器的数据:
public function index()
{
$members = Member::orderBy('id', 'desc')->paginate(5);
return view('home', compact('members'));
}
我对此观点感到满意: 在此处输入图片描述
我通过一个foreach循环将其传递给视图:
@foreach ($members as $member)
@include('partials.tableRow')
@endforeach
我的tableRow看起来像这样:
<a class="panel-block" onclick="refs.show.open()">
<span class="panel-icon">
<i class="fas fa-user" aria-hidden="true"></i>
</span>
<span class="column is-4">
{{ $member->name }}
</span>
<span class="panel-icon">
<i class="fas fa-at" aria-hidden="true"></i>
</span>
<span class="column is-5">
{{ $member->email }}
</span>
<span class="panel-icon">
<i class="fas fa-tshirt" aria-hidden="true"></i>
</span>
<span class="panel-button column is-1">
{{ $member->size }}
</span>
<span class="panel-icon">
<i class="fas fa-coins" aria-hidden="true"></i>
</span>
<span class="panel-button column is-2">
{{ $member->points}}
</span>
</a>
当我单击单个表格行时出现问题。 我希望它在各个表行上显示与信息相关的数据。 在下面的图片中,我单击了第一行(我自己的名字),然后显示 : 错误的数据显示
您可能会看到,它显示的是最后一行的信息,并且每次我单击一行时都会这样做。 当我深入分页时,同样的问题。
我已经检查过是否将数据传递给视图,并且我做了:将数据传递给视图
我的showMember模态如下所示:
<div class="modal" id="show">
<div class="modal-background" onclick="refs.show.close()"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ $member->name }}</p>
<button class="delete" onclick="refs.show.close()" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- Content -->
<li class="panel-block">
<label class="column is-2"><b>E-mail</b></label>{{ $member->email }}
</li>
<li class="panel-block">
<label class="column is-2"><b>T-shirt</b></label>{{ $member->size }}
</li>
<li class="panel-block">
<label class="column is-2"><b>Points</b></label>{{ $member->points }}
</li>
<!-- Content -->
</section>
<footer class="modal-card-foot">
<button class="button is-outline" onclick="refs.show.close()">Luk</button>
</footer>
</div>
</div>
我可能会缺少指向id的链接或某些东西,以便将特定数据传递给模态,或者javascript函数是否无法获取除最后一个传递的数据之外的问题?
先感谢您
根据Boostrap 4.1文档,您需要在单击后传递变量。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
然后在您的js中:
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
// Extract info from data-* attributes
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
数据源是data- *属性,您无需其他任何操作即可关闭模式。
不能确切地说出laravel,但是在(Yii2,Symfony)中执行了返回的视图,并导致了死亡。 您只能使用javascript动态更改模态的内容,这将通过AJAX加载数据或从隐藏元素获取并加载到模态。
请显示您的refs.show.open()。
2018年8月13日更新
因此,您可以在显示模式之前执行类似的操作。
document.getElementById('modal-email').innerText = this.getElementsByClassName('member-email').item(0).innerText;
document.getElementById('modal-size').innerText = this.getElementsByClassName('member-size').item(0).innerText;
document.getElementById('modal-points').innerText = this.getElementsByClassName('member-points').item(0).innerText;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.