Ajax 跳过循环数据调用

Question

我的循环数据中有模态，在该模态中我将相关数据保存到每个项目，问题是它只为循环中的第一个项目和其他项目保存数据 returns ""

示例代码：

@section('content')
<div>
    <table class="table table-bordered dataex-html5-selectors">
        <thead>
          <tr>
            <th class="text-center">Name</th>
            <th class="text-center">Button</th>
          </tr>
        </thead>
        <tbody>
            @foreach($items as $item)
            <tr>
                <td>{{$item->name}}</td>
                <td>
                    <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#editModal-{{$item->id}}">Add Data</button>
                </td>
                <!-- item modal -->
                <div class="modal fade" id="editModal-{{$item->id}}" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="editModalLabel">Add Data To "{{$item->name}}"</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <form>
                            <div class="modal-body">
                                <div class="tab-content" id="myTabContent">
                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <label for="question">Question *</label>
                                        <input type="text" class="form-control" id="Qquestion" name="question">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="note">Note</label>
                                        <input type="text" class="form-control" id="Qnote" name="note">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="correctAnswer">Correct Answer</label>
                                        <input type="text" class="form-control" id="QcorrectAnswer" name="correctAnswer">
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                                <button type="button" class="saveQuestion btn btn-primary" data-id="{{$item->id}}">Save</button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- item modal -->
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection


@section('scripts')
<script>
    $(document).ready(function() {
        $('.saveQuestion').on('click', function(e) {
            e.preventDefault();
            $.ajaxSetup({
              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
            });
            var Qquiz_id = $(this).attr("data-id");
            var Qquestion = $('#Qquestion').val();
            var Qnote = $('#Qnote').val();
            var QcorrectAnswer = $('#QcorrectAnswer').val();

            console.log('1', Qquiz_id)
            console.log('2', Qquestion)
            console.log('3', Qnote)
            console.log('4', QcorrectAnswer)
            $.ajax({
                url: '{{ route('addQuestion') }}',
                type: 'POST',
                data: {
                    quiz_id: Qquiz_id,
                    question: Qquestion,
                    note: Qnote,
                    correctAnswer: QcorrectAnswer,
                },
                success:function(data) {
                  console.log('data', data);
                  $('#Qquestion').val('');
                  $('#Qnote').val('');
                  $('#QcorrectAnswer').val('');
                }
            });
        });
    });
</script>
@endsection

So if for instance I have 2 items with id 1 and 2, when i open modal for id 1 and i put data it saves the data. But when i open modal for item with id 2 and try to save data it return my input values as ""

控制台截图如下：

正在保存项目 ID 1

的数据

正在保存项目 ID 2

的数据

有什么想法吗？

Answer 1

您需要将 Item id 添加到问题、测验和正确答案中。

就像：

<div class="col-md-6">
  <label for="question">Question *</label>
  <input type="text" class="form-control" id="Qquestion_{{$item->id}}" name="question">
</div>

<div class="col-md-6">
  <label for="note">Note</label>
  <input type="text" class="form-control" id="Qnote_{{$item->id}}" name="note">
</div>

<div class="col-md-6">
  <label for="correctAnswer">Correct Answer</label>
  <input type="text" class="form-control" id="QcorrectAnswer_{{$item->id}}" name="correctAnswer">
</div>

并且在 jquery 中您需要添加 quiz_id

var Qquiz_id = $(this).attr("data-id");
var Qquestion = $('#Qquestion_'+Qquiz_id).val();
var Qnote = $('#Qnote_'+Qquiz_id).val();
var QcorrectAnswer = $('#QcorrectAnswer_'+Qquiz_id).val();

Ajax 跳过循环数据调用

Ajax call from looped data skips

javascript

ajax

jquery

laravel

laravel-blade