0
jQueryで新しくなった&は現在、ブートストラップ選択（Silvio Moreto製）を含むブートストラップモーダルにデータを渡してテストします。私はドキュメントを読んで、私がドキュメントから理解していることをしようとしましたが、私が理解したように動作しなかったものはすべてそうです。クリック時にブートストラップを含むブートストラップモーダルにデータを渡す
ここでは、PHP Laravelを介してデータベースから取得したデータを読み込んだページがあります。そのページには編集用の編集ボタンがあります。編集ボタンは、入力テキストを含むモーダルをロードし、クリック時にオプションを選択します。ここで
は、ページのコードスニペットです： -
@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
編集ボタンは、その特定のレコードを編集するために（同じページ内に位置することを）ブートストラップモーダルを開きます。モーダルコードスニペット： - モーダルにデータを渡すための
<!----- 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');
});
});
私は、コードをテストしていると、入力フィールドのデータが正常のデータを渡されていないが、フィールドを選択します。したがって、ユーザーが編集を計画していない場合、現在選択されているデータを提供することはできません。だから私は自分のコードで何が間違っているのだろうと思って、ここで誰かがそれを監督することができたと思った。
あなたがコメントしたコードを削除した場合、ボタンはモーダルを開きません。なぜか分かりませんが、あなたの方法はとにかくうまくいくと思いますが、それはしませんでした。だから、ネットでチェックしたところ、イベントリスナーが必要です。 – Kaydarin
htmlだけでjsfiddleを置くことはできますか？ – maksbd19
ここでは[fiddle]（https://jsfiddle.net/fm503fh9/6/）ですが、ここでは両方のデータが渡されませんでした...私のページでは、入力テキストにデータがあります... – Kaydarin