【发布时间】:2017-08-19 15:29:41
【问题描述】:
我是 jQuery 新手,目前正在尝试测试将数据传递给包含 bootstrap-select 的引导模式(由 Silvio Moreto 撰写)。我已阅读文档并尝试按照我从文档中理解的内容进行操作,但似乎我所做的一切都未能按照我的理解进行。
这是场景,我已经加载了通过 PHP Laravel 从数据库检索到的数据的页面。在该页面中,有一个用于编辑的编辑按钮。编辑按钮将加载一个包含输入文本的模式,并在单击时选择选项。
这是页面代码sn-p:-
@foreach ($cklist as $key=>$cklst)
@if (strtoupper($sort->sectionFK)==strtoupper($cklst->schSectionFK))
<?php $index++; ?>
<tr>
<!-- Task Name -->
<td class="table-text" width="10px">
<div>{{$index }}</div>
</td>
<td class="table-text">
<div>{{strtoupper($cklst->clQuestion)}}</div>
</td>
<td>
<!----- Edit Question Item Button ----->
<button type="button" data-toggle="modal" data-target=".qs-item-modal-lg" data-question="{{$cklst->clQuestion}}" data-question-id="{{$cklst->cklistPK}}" data-question-severity-id="{{$cklst->severityFK}}" @foreach ($svrity as $key=>$slct2)
@if ($slct2->severityPK == $cklst->severityFK)
data-question-severity-txt="{{$slct2->severityName}}"
@endif
@endforeach
class="btn btn-warning">Edit</button>
</td>
<td align="center" width="10px">
<form action="{{ url('addref/'.$cklst->cklistPK) }}" method="POST">
{{ csrf_field() }}
<input type="hidden" name="schemeID" value="{{$id}}">
<input type="hidden" name="cklistID" value="{{$cklst->cklistPK}}">
<button class="btn btn-info" type="submit">Get Reference</button>
</form>
</td>
<td align="center" width="10px">
<form action="{{ url('delcheck/'.$cklst->cklistPK) }}" method="POST" class="delete">
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button class="btn btn-danger" type="submit">Delete</button>
</form>
</td>
</tr>
@endif
@endforeach
编辑按钮将打开一个引导模式(位于同一页面中)以编辑该特定记录。模态代码sn-p:-
<!----- Edit Question Item Modal ----->
<div class="modal fade qs-item-modal-lg" id="editqstn" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myLargeModalLabel">Edit Question Item</h4>
</div>
<form action="{{url('editquestion')}}" method="POST">
{{ csrf_field() }}
{{ method_field('PUT') }}
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="text-left">
<div class="col-sm-8">
<h4>
<label>Question Name</label>
<input type="text" class="form-control" name="selectedquestion" value="">
<input type="hidden" name="selectedquestionID" value="">
</h4>
</div>
<div class="col-sm-4">
<h4>
<label>Severity</label>
<select class="selectpicker form-control" id="svrty" name="selectedquestionSvrty">
<option selected value=""></option>
@foreach ($svrity as $key=>$slct2)
<option value="{{$slct2->severityPK}}">{{strtoupper($slct2->severityName)}}</option>
@endforeach
</select>
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
以及用于向模态传递数据的 jQuery:-
$("#editqstn").on("show.bs.modal", function (e) {
//get data-question attributes of the clicked element
var slctqstn = $(e.relatedTarget).data('question');
var slctqstnid = $(e.relatedTarget).data('question-id');
var slctqstnsvrty = $(e.relatedTarget).data('question-severity');
var slctqstnsvrtytxt = $(e.relatedTarget).data('question-severity-txt');
//populate the input
$(e.currentTarget).find('input[name="selectedquestion"]').val(slctqstn);
$(e.currentTarget).find('input[name="selectedquestionID"]').val(slctqstnid);
$('.selectpicker').on('change', function(e){
//populate the bootstrap-select selected value
$(e.currentTarget).find('#svrty').selectpicker('val', slctqstnsvrty);
//populate the bootstrap-select selected string text
$(e.currentTarget).find('#svrty').text(slctqstnsvrtytxt).selectpicker('render');
});
});
我已经测试了代码,输入字段的数据成功传递,但选择字段的数据没有。因此,如果用户不打算编辑它们,我无法提供他们当前选择的数据。所以我想知道我的代码有什么问题,并希望这里有人能够监督它。
【问题讨论】:
标签: jquery twitter-bootstrap bootstrap-select