Yêu cầu thg 12 8, 2018 5:29 CH 230 0 1
  • 230 0 1
+1

$modal.modal is not a function

Chia sẻ
  • 230 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();
},
Avatar Dao Thai Son @dao.thai.son
thg 12 10, 2018 3:22 SA

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

Avatar Minh Phuong @phuongyeol
thg 12 10, 2018 6:14 SA

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

1 CÂU TRẢ LỜI


Đã trả lời thg 12 9, 2018 1:44 SA
0

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

Chia sẻ
Avatar Minh Phuong @phuongyeol
thg 12 9, 2018 7:25 SA

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

Avatar Hoàng Đức Quân @devil_boom_129
thg 12 9, 2018 3:38 CH

@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

Avatar Hoàng Đức Quân @devil_boom_129
thg 12 9, 2018 3:39 CH

@phuongyeol

$modal = self.$modal;

chú ý ở đây xem

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí