Asked Dec 8th, 2018 5:29 PM 163 0 1
  • 163 0 1
+1

$modal.modal is not a function

Share
  • 163 0 1

Em đang upload images với thư viện bootstrap-fileinput. Đến phần zoom ảnh thì ko thể zoom được và lỗi $modal.modal is not a function Đã vài lần phải bỏ luôn cái thư viện vì lỗi này, ai có cao kiến chỉ em với ạ. Đây là html:

 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
   {!! Form::label(null, trans('dish.dish_picture')) !!}(<span class="red">*</span>)
   <div class="main-section">
       <div class="form-group">
           <div class="file-loading">
               {!! Form::file('file', ['class' => 'file', 'multiple' => true, 'id' => 'file-1', 'name' => 'file']) !!}
           </div>
       </div>
   </div>
</div>

Thư viện và js upload:

   <script src="{{ asset('bower_components/bootstrap-fileinput/js/fileinput.js') }}" type="text/javascript"></script>
   <script src="{{ asset('bower_components/bootstrap-fileinput/themes/fa/theme.js') }}" type="text/javascript"></script>
   <script src="{{ asset('bower_components/popper.js/dist/umd/popper.min.js') }}" type="text/javascript"></script>

   <script type="text/javascript">
       $("#file-1").fileinput({
           theme: 'fa',
           uploadUrl: "http://127.0.0.1:8000/dishes/image-uploads",
           uploadExtraData: function() {
               return {
                   _token: $("input[name='_token']").val(),
               };
           },
           allowedFileExtensions: ['jpg', 'png', 'gif'],
           overwriteInitial: false,
           maxFileSize:200,
           maxFilesNum: 10,
           slugCallback: function (filename) {
               console.log(filename);                                                                                               
               return filename.replace('(', '_').replace(']', '_');
           }
       });
       $('#file-1').on('fileuploaded', function(event, data, previewId, index) {
           var response = data.response;
           console.log(response);
           var img = $('#img').val();
           $('#img').val(img + ',' + response.data.image);
       });
   </script>

Đoạn $modal.modal('show'); trong file fileinput.js báo lỗi $modal.modal is not a function

_zoomPreview: function ($btn) {
   var self = this, $frame, $modal = self.$modal;
   if (!$btn.length) {
       throw 'Cannot zoom to detailed preview!';
   }
   $h.initModal($modal);
   $modal.html(self._getModalContent());
   $frame = $btn.closest($h.FRAMES);
   self._setZoomContent($frame);
   $modal.modal('show');
   self._initZoomButtons();
},
Dao Thai Son @dao.thai.son
Dec 10th, 2018 3:22 AM

Bạn kiểm tra xem trong code đã có script của Jquery chưa?

0
| Reply
Share
I am @phuongyeol
Dec 10th, 2018 6:14 AM

@dao.thai.son Có rồi anh ạ

0
| Reply
Share

1 ANSWERS


Answered Dec 9th, 2018 1:44 AM
0

trong Javascript thì làm gì dùng dấu $ với tên biến hả em

Share
I am @phuongyeol
Dec 9th, 2018 7:25 AM

Cái này là thư viện tải sẵn về anh ơi.

0
| Reply
Share
Hoàng Đức Quân @devil_boom_129
Dec 9th, 2018 3:38 PM

@phuongyeol thư viện sẵn tải về và em đã test chưa? ko phải cứ tải thư viện xong vứt đấy là được đâu. lắm lúc phải biết cách mà tùy chỉnh

0
| Reply
Share
Hoàng Đức Quân @devil_boom_129
Dec 9th, 2018 3:39 PM

@phuongyeol

$modal = self.$modal;

chú ý ở đây xem

0
| Reply
Share