Я создаю приложение планировщика / реестра в инфраструктуре Symfony 5, с веб-пакетом позади него, вместе с Jquery для обработки (среди прочего) действий пользователя (например, щелчка по ячейке).
Когда пользователь щелкает ячейку, в модальной форме появляется модал с данными, связанными с этой ячейкой. Я хотел бы перехватить отправку формы, включенной в модальный режим, а затем запустить AJAX вызов бэкэнда, чтобы сохранить данные.
См. Ниже текущий код JQUERY, который у меня есть на данный момент. , Я в настоящее время ловлю показанное событие. После этого я хочу исключить действие отправки по умолчанию и заменить его своим собственным.
Однако, когда я пытаюсь это сделать, я получаю печально известную ошибку "$ is not function".
Я пробовал это несколькими способами (даже включая javascript внутри самого модала), но даже здесь это терпит неудачу. Я сейчас немного застрял.
Кто-нибудь знает, что я сделал неправильно?
Я даже попробовал метод jquery .noconflict () в функции, но это также с треском провалилось. .
require('../css/app.css');
require('../css/global.scss');
require('bootstrap-datepicker/dist/css/bootstrap-datepicker.css');
require('@fortawesome/fontawesome-free/css/all.min.css');
// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
const $ = require('jquery');
const routes = require('../../public/js/fos_js_routes.json');
require('bootstrap');
require('bootstrap-datepicker');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
import dt from 'datatables.net';
import dtbs4 from 'datatables.net-bs4';
import dtbs4fh from 'datatables.net-fixedheader-bs4';
import dtbs4sel from 'datatables.net-select-bs4';
var moment = require('moment');
moment().format();
Routing.setRoutingData(routes);
$( document ).ready(function() {
var table = $("#calendarSchedule").DataTable({
select: {
style: 'os',
items: 'cell',
info: false
}
});
jQuery.noConflict();
//table.on( 'select', function ( e, dt, type, indexes ) {
//e.preventDefault();
//if ( type === 'cell' ) {
var clickDate = undefined;
var dt = undefined;
var cell = undefined;
var colIndex = undefined;
$('.dataTable').on('click', 'tbody td div', function() {
var x = event.clientX;
var y = event.clientY;
var w = $(window).width();
dt = $('#YearMonth').text();
clickDate = this.id;
console.log(clickDate);
if(this.id.indexOf("-")== -1){
var url = Routing.generate('schedule_viewModal', { id: this.id });
$("#scheduleModal").load(url);
$("#scheduleModal").find('schedule_entry').trigger('reset');
var element = document.getElementById("scheduleModal");
if(x + 500 > w){
element.style.left = w - 500 + "px";
} else {
element.style.left = x + "px";
}
element.style.top = y + "px";
$("#scheduleModal").modal('show');
} else {
var dayType = $(this).attr("class").split(" ")[0];
console.log(dayType);
var url = Routing.generate('schedule_createModal', { dt: clickDate, type: dayType });
$("#scheduleModal").load(url);
$("#scheduleModal").find('schedule_entry').trigger('reset');
var element = document.getElementById("scheduleModal");
if(x + 500 > w){
element.style.left = w - 500 + "px";
} else {
element.style.left = x + "px";
}
element.width = 250 + "px";
element.height = 250 + "px";
element.style.top = y + "px";
$("#scheduleModal").modal('show');
if($(this).find("div").length == 0){
var x = event.clientX;
var y = event.clientY;
var w = $(window).width();
}
};
});
$('#scheduleModal').on('shown.bs.modal', function () {
$('.js-new-form').on('submit', function(e){
e.preventDefault();
route = '{{ path("schedule_jsonNew") }}';
var dt = document.getElementById('schedule_entry_ScheduleDate').value;
var tp = document.getElementById('schedule_entry_ScheduleType').value;
var cat = document.getElementById('schedule_entry_Category').value;
var emp = document.getElementById('schedule_entry_Employee').value;
var entry = {date: dt, type: tp, category: cat, employee: emp};
var data = JSON.stringify(entry);
console.log(data);
$.ajax({
url: route,
type: "POST",
dataType: "json",
data: data,
async: true,
success: function () {
console.log('succes');
location.reload();
},
error: function () {
console.log('fail');
location.reload();
},
})
});
var $=jQuery.noConflict();
$('#btnClose').on('click', function(e){
//location.reload();
});
$(".js-close-modal").click(function(){
console.log("bla");
$(".modal").removeClass("visible");
});
});
});
Ниже приведен шаблон ветки самого модала:
{# empty Twig template #}
{% trans_default_domain 'messages' %}
<div class="modal__header">
{% trans %}schedule.new{% endtrans %}
</div>
<div class="container-fluid">
{{ form_start(form, {
'attr': {
'class': 'js-new-form',
'id': 'js-new-form' }})}}
<div style="margin-bottom: 5px; margin-top: 5px" class="row">
<div class="col-md-6">
{{ form_label(form.ScheduleDate, 'schedule.ScheduleDate'|trans({}, 'messages')) }}
</div>
<div class="col-md-6">
{{ form_widget(form.ScheduleDate) }}
</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px" class="row">
<div class="col-md-6">
{{ form_label(form.ScheduleType, 'schedule.ScheduleType'|trans({}, 'messages')) }}
</div>
<div class="col-md-6">
{{ form_widget(form.ScheduleType) }}
</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px" class="row">
<div class="col-md-6">
{{ 'schedule.scheduleCategory'|trans({}, 'messages') }}
</div>
<div class="col-md-6">
{{ form_widget(form.scheduleCategory) }}
</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px" class="row">
<div class="col-md-6">
{{ 'schedule.scheduleEmployee'|trans({}, 'messages') }}
</div>
<div class="col-md-6">
{{ form_widget(form.scheduleEmployee) }}
</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px" class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
{{ form_errors ( form ) }}
</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px" class="row">
<div class="col-md-6">
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="btnClose">Close</button>
</div>
<div class="col-md-6">
{{ form_widget(form.schedulesave) }}
</div>
</div>
{{ form_end(form) }}
</div>