Ручная инициализация фоторамки в вызове AJAX не работает - PullRequest
Новая
       20

Ручная инициализация фоторамки в вызове AJAX не работает

0 голосов
/ 23 апреля 2019

Я использую фоторамку, чтобы показывать изображения для некоторых постов в блоге. Он отлично работает при загрузке на стороне сервера, однако я хочу загружать посты в блоге с использованием AJAX для динамической загрузки - вот где я столкнулся с проблемой.

Это проект Laravel.

Я исследовал проблему и обнаружил, что многие люди предлагают инициализировать фотораму в функции успеха AJAX:

$ ( 'fotorama.) Fotorama ().

Как видно из этих двух вопросов о Stackowerflow: Инициализация фоторамки с изображениями, загруженными JSON / ajax и: фоторамка как работать с ajax

Однако это не работает для меня, и вместо этого я получаю следующую ошибку в консоли:

TypeError: $ (...). Fotorama не является функцией

script.js 

jQuery(document).ready(function () {
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name=_token]').attr('content') }
    });

    var pageNumber = 1;

    $.ajax({
        type: 'GET',
        url: "/posts?page=" + pageNumber,
        success: function (data) {
            pageNumber += 1; // To be implemented...
            $('#posts-container').append(data.html);
            $('.fotorama').fotorama(); 
        }, error: function (data) {

        }
    });

});

Что в итоге вызывает этот метод контроллера: 

public function getPosts(Request $request)
    {
        $posts = Blog::with('images', 'skill')->orderBy('created_at', 'DESC')->limit(4)->get();

        if ($request->ajax()) {
           $view = view('load.posts-load', compact('posts'))->render();
           return response()->json(['html'=>$view]);
        }
    }

и пост-загрузка содержит: 

@foreach($posts as $post)
    <div class="blog-post-container">
        <a href="/posts/{{ $post->slug }}">
            <h2 class="blog-title">{{ $post->title }}</h2>
        </a>
        <span class="date">{{ date('d. M Y', strtotime($post->created_at)) }}</span>
        <span class="skill" style="background-color:{{ $post->skill->color }};">{{ $post->skill->title }}</span>
        <div class="blog-text">{!! $post->text !!}</div>
        <div class="fotorama-container">
            <div class="fotorama" data-nav="thumbs" data-auto="false">
                @foreach($post->images as $image)
                    <img src="{{ Storage::url("{$image->filename}") }}" alt="{{ $image->filename }}" />
                @endforeach
            </div>
        </div>
    </div>
    <hr class="blog-horizontal-ruler"/>
@endforeach

Это порядок загрузки скриптов в app.blade.php: 

    <script src="{{ asset('js/jquery-3.3.1.min.js') }}"></script>
    <script src="{{ asset('js/trumbowyg.min.js') }}"></script>
    <script src="{{ asset('js/fotorama.js') }}"></script>
    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/script.js') }}"></script>

Я ожидаю, что фоторамка будет инициализирована, но она не работает. Кто-то может объяснить, что я здесь делаю неправильно?

...