Модальная форма не запускается в jQuery

#jquery

#jquery ( jquery )

Вопрос:

У меня есть этот код в приложении Laravel-5.8. Я использую jQuery modal и некоторые другие функции.

 @foreach($goals as $key => $goal)
<tr>
  <td class="myRatingLimit">
    {{ $goal->goaltype->ratingLimit ? $goal->goaltype->ratingLimit->max_rating : '' }}
  </td>
  <td class="myWeightedScore">
    {{$goal->weighted_score ?? '' }}
  </td>
  <td>
    <a href="#" class="btn btn-xs btn-warning" data-target="#modal_add_comment_{{ $goal->id }}}" data-toggle="modal" data-id="{{ $goal->id }}" data-original-title="Comment">
      <i class="fas text-white">Add Comment</i>
    </a>
  </td>
</tr>
@endforeach 

Из приведенной выше таблицы я сгенерировал модальную форму, показанную здесь ниже:

 < script type = "text/javascript" >

  $(document).ready(function() {

    $('.modal_add_comment').on('show.bs.modal', function(e) {
      var $this = $(e.relatedTarget);
      var data_id = $this.data('id');
      var modal = $this;

      var parentTr = $this.closest('tr');
      var myRatingLimit = parentTr.find('.myRatingLimit').text();
      var myWeightedScore = parentTr.find('.myWeightedScore').text();

      // directly use .val() instead of .attr()
      var newRating = modal.find('.InputRatingLimit').val(myRatingLimit);
      var newScore = modal.find('.InputWeightedScore').val(myWeightedScore);

    });

  }); <
/script> 
 <div id="modal_add_comment_{{ $goal->id }}" class="modal fade modal_add_comment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form action="{{route('appraisal.appraisal_year_end_setups.employee_year_end_comment',['id'=>$goal->id])}}" method="post" enctype="multipart/form-data" id="review_comment-form">
        {{ csrf_field() }}
        <div class="modal-header">
          Self-Review Comment
        </div>
        <div class="col-md-12">
          <div class="form-group">
            <label class="control-label"> Rating:<span style="color:red;">*</span></label>
            <input type="hidden" class="InputRatingLimit">
            <input type="hidden" class="InputWeightedScore">
            <input type="text" name="employee_year_end_weighted_score" class="form-control myRating" placeholder="Enter Rating here e.g. 10" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" style="width: 100%;"
              maxlength="4" onkeypress="allowNumbersOnly(event)" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default close-modal-create" data-dismiss="modal">Cancel</button>
          <button type="submit" id="review_comment_btn-submit" class="btn btn-success btn-ok">Save</button>
        </div>
      </form>
    </div>
  </div>
</div> 

Когда я нажимаю на Добавить комментарий, я ожидал, что он запустит (покажет) модальную форму, но этого не происходит.

Что мне делать?

Ответ №1:

Похоже, это опечатка: ваша цель данных #modal_add_comment_{{ $goal->id }}} , идентификатор модели modal_add_comment_{{ $goal->id }} .

Возможно, удалите лишнее } из целевого объекта данных.