Как инициализировать модуль?

Question

[Руслан Абсалямов]

У меня такой вопрос, у меня модальное окно открывается через динамично, то есть примерно так

<div class="block-lesson" style="width: 43.5%; height: {{ ((strtotime($lesson->time_end) - strtotime($lesson->time_start))/60/30 + 1) * 33}}px;" data-href="{{ route('shedule.edit', $lesson->id) }}">
                                                <strong>{{ $lesson->directions->name }}</strong>
                                                <div>{{ $lesson->type == 1 ? 'Групповое занятие' : 'Индивидуальное занятие' }}</div>
                                                <div>Преподаватель: {{ $lesson->executes->fullName }}</div>
                                                <div>
                                                    <div>Клиенты:</div>
                                                    @foreach($lesson->clients as $client)
                                                        {{ $client->fullName }}
                                                    @endforeach
                                                </div>
                                            </div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="editShedule" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            </div>
        </div>
    </div>

И js

$('body').on('click', '.block-lesson', function (e) {
               $(modal).modal('show').find('.modal-content').load($(this).data('href'));
    })

Только допустим внутри этого модального окна у меня перестал работать модель datetimepicker bootstrap
и select 2
Допустим как включается модуль у меня

$('.datetimepicker').datetimepicker({
        format: 'DD MMMM YYYY',
        pickTime: false,
        locale: 'ru',
        language: 'ru-RU',
    });

Может кто-то сталкивался с такой проблемой

Answer 1

[Andrew]

Баян©

$('body').on('click', '.block-lesson', function (e) {
               $(modal).modal('show').find('.modal-content').load($(this).data('href'));
//здесь инициализируйте нужные дэйтпикеры и селекты2 для вашей модалки или чего-то там
$('.datetimepicker').datetimepicker({
        format: 'DD MMMM YYYY',
        pickTime: false,
        locale: 'ru',
        language: 'ru-RU',
    });
$('.select2').select2();

    })

Это потому что у вас еще формально нет элемента, того где должны быть селекты с дэйтпикерами, после клика - они появляются.

Comments

[Руслан Абсалямов]

Не помогло, я внутри модального окна это поставил через аттрибут <script></script>
Только select 2 не инициализировался конечно

[Руслан Абсалямов]

Я думаю проще не jquery использовать а js framework для таких задач и проще будет

[Andrew]

Руслан Абсалямов, весь свой .js покажите. Как вы вызываете и где.
А че за модалка? бутстрап?

[Руслан Абсалямов]

Andrew, обновленный код или который был?

[Andrew]

Руслан Абсалямов, весь .js, не библиотеки скриптов, а именно то, что вы писали. Модалка вызывается?
Еще можно html модалки.

[Руслан Абсалямов]

Andrew, Модалка вызывается.
Сейчас это выглядит так
форма редактирование

<form id="form-create_shedule" action="{{ route('shedule.update', $shedule->id) }}" method="post">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Создание занятие</h4>
    </div>
    <div class="modal-body">
        {{ csrf_field() }}
        <div class="form-group">
            <input type="text" class="form-control datetimepicker" name="date" placeholder="Время занятие" required>
        </div>
        <div class="form-group">
            <div class="col-lg-6">
                <input type="text" class="form-control time" name="time_start" placeholder="Начало занятии" required value="{{ $shedule->time_start }}">
            </div>
            <div class="col-lg-6">
                <input type="text" class="form-control time" name="time_end" placeholder="Конец занятии" required value="{{ $shedule->time_end }}">
            </div>
        </div>
        <div class="form-group">
            <select name="direction_id" class="form-control" required>
                <option value="" disabled selected>Выберите напраление</option>
                @foreach($directions as $direction)
                    <option value="{{ $direction->id }}">{{ $direction->name }}
                        @if($direction->id == $shedule->direction_id)
                            selected
                        @endif
                    </option>
                @endforeach
            </select>
        </div>
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default active">
                <input type="radio" name="type" autocomplete="off" value="1"
                @if($shedule->type == 1)
                    checked
                @endif>Групповое занятие
            </label>
            <label class="btn btn-default">
                <input type="radio" name="type" autocomplete="off" value="2"
                @if($shedule->type == 2)
                    checked
                @endif>Индивидуальное занятие
            </label>
        </div>
        <div class="form-group">
            <select name="execute_id" class="form-control" required>
                <option value="" disabled selected>Выберите исполнителя</option>
                @foreach($executes as $execute)
                    <option value="{{ $execute->id }}"
                    @if($execute->id == $shedule->execute_id)
                        selected
                    @endif
                    >{{ $execute->fullName }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group">
            <select name="branch_id" class="form-control" id="select-branch" required>
                <option value="" disabled selected>Выберите Филиал</option>
                @foreach($branchs as $branch)
                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group">
            <select name="room_id" class="form-control select-room" required>
            </select>
        </div>
        <div class="form-group">
            <select name="client[]" class="form-control js-select-client addClient" multiple="multiple" title="Клиенты" required>
                @foreach($clients as $client)
                    <option value="{{ $client->id }}">{{ $client->fullName }}</option>
                @endforeach
            </select>
        </div>
        <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">
    </div>
    <div class="modal-footer">
        <button type="button" class="button-error" data-dismiss="modal">Отменить</button>
        <button type="submit" class="button-success">Создать</button>
    </div>
</form>
<script>
    $(document).ready(function(){
        $('.datetimepicker').datetimepicker({
            format: 'DD MMMM YYYY',
            pickTime: false,
            locale: 'ru',
            language: 'ru-RU',
        });
        $('.time').datetimepicker({
            format: 'HH:mm',
            minuteStepping: 30,
            pickDate: false,
            locale: 'ru',
            language: 'ru-RU',
        });
    })
</script>

Еще можно html модалки.

А это уже я показывал идет нажатие и на отсылка на контроллер

public function edit($id)
    {
        $user = Auth::user()->id;
        $branchs = Branch::where('user_id', $user)->get();
        $directions = Direction::where('user_id', $user)->get();
        $executes = Execute::where('user_id', $user)->get();
        $clients = Client::where('user_id', $user)->get();
        $shedule = Shedule::find($id);
        return view('shedule.update', compact('branchs', 'directions', 'executes', 'clients', 'shedule'));
    }

А раньше было что я подключал к html app.js. там я подключал все файлы и модули

require('./bootstrap');
require('./send-form');
require('./form');
require('./index');
require('./modal');
require('./panel');
require('bootstrap-datetimepicker-sass/src/js/bootstrap-datetimepicker');
require('select2');
require('moment');

в modal.js я уже показал код и в form.js

$(document).ready(function () {
$('.datetimepicker').datetimepicker({
        format: 'DD MMMM YYYY',
        pickTime: false,
        locale: 'ru',
        language: 'ru-RU',
    });
    $('.time').datetimepicker({
        format: 'HH:mm',
        minuteStepping: 30,
        pickDate: false,
        locale: 'ru',
        language: 'ru-RU',
    });
$('.js-select-client').select({
        width: '300px',
        placeholder: 'Выберите клиента'
    });
});

[Andrew]

Руслан Абсалямов, как у вас модалка вызывается?(по клику куда?) то, что в самом начале?
Попробуйте это

$('.block-lesson').click(function () {
$('.datetimepicker').datetimepicker({
        format: 'DD MMMM YYYY',
        pickTime: false,
        locale: 'ru',
        language: 'ru-RU',
    });
    $('.time').datetimepicker({
        format: 'HH:mm',
        minuteStepping: 30,
        pickDate: false,
        locale: 'ru',
        language: 'ru-RU',
    });
$('.js-select-client').select({
        width: '300px',
        placeholder: 'Выберите клиента'
    });
});

[Руслан Абсалямов]

Andrew, Модальное окно вызывается при клике на этот блок

<div class="block-lesson" style="width: 43.5%; height: {{ ((strtotime($lesson->time_end) - strtotime($lesson->time_start))/60/30 + 1) * 33}}px;" data-href="{{ route('shedule.edit', $lesson->id) }}">

В самом начале вопроса я его указал уже этот блок
Я так пробовал, только там внутри вызывается отображение модального окна

$(modal).modal('show').find('.modal-content').load($(this).data('href'));

[Руслан Абсалямов]

Andrew, Но так не работает, конечно я не пробовал вначале его засунуть перед отображением модального окна

[Andrew]

Руслан Абсалямов, ну так попробуйте