JS .append от PHP Результат - FullCalendar - PullRequest
Новая
       40

JS .append от PHP Результат - FullCalendar

0 голосов
/ 20 июня 2020

Я учусь перемещаться по JS, и я реализую fullCalendar с PHP.

Пока все хорошо, у меня работают основные функции: извлечение / сохранение / обновление из PHP + MySQL ... все хорошо!

Проблема теперь в том, что я хочу заполнить раскрывающееся меню [Студенты] данными PHP, извлеченными из БД, которые JS создают модальный , Я предполагаю, что должно быть с AJAX, но я не могу понять, как.

Ниже текущего кода не добавлено ничего, кроме начальной точки раскрывающегося списка, и прикреплено pi c. Заранее благодарим: 

    /* on select */
CalendarApp.prototype.onSelect = function (start, end, allDay) {
    var $this = this;
        $this.$modal.modal({
            backdrop: 'static'
        });
        var form = $("<form></form>");
        form.append("<div class='row'></div>");
        form.find(".row")
            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Event Name</label><input class='form-control' placeholder='Insert Event Name' type='text' name='title'/></div></div>")
            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>")
            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Students</label><select class='form-control' name='students'></select></div></div>")
            .find("select[name='category']")
            .append("<option value='bg-danger'>Danger</option>")
            .append("<option value='bg-success'>Success</option>")
            .append("<option value='bg-purple'>Purple</option>")
            .append("<option value='bg-primary'>Primary</option>")
            .append("<option value='bg-pink'>Pink</option>")
            .append("<option value='bg-info'>Info</option>")
            .append("<option value='bg-warning'>Warning</option></div></div>");
        $this.$modal.find('.delete-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
            form.submit();
        });
        $this.$modal.find('form').on('submit', function () {
            var title = form.find("input[name='title']").val();
            var beginning = form.find("input[name='beginning']").val();
            var ending = form.find("input[name='ending']").val();
            var categoryClass = form.find("select[name='category'] option:checked").val();
            if (title !== null && title.length != 0) { 
                $this.$modal.modal('hide');
                var theStart = moment(start).format();
                var theEnd = moment(end).format();
                var theData = {
                    title, 
                    theStart, 
                    theEnd,
                    categoryClass
                };
                sendData('add', theData);
            }
            else{
                Swal.fire("Enter the Event Name!");
            }
            return false;
            
        });
        $this.$calendarObj.fullCalendar('unselect');
},

введите описание изображения здесь

1 Ответ

1 голос
/ 21 июня 2020

С jQuery вы используете функцию ajax. Эта функция заставляет HTTP-запрос вызывать обратный вызов по завершении. Есть несколько обратных вызовов и способов их установить, предлагаю вам посмотреть документацию. В этом случае мы используем done, он вызывается только при успешном запросе. Чтобы избежать интерполяции строк при добавлении параметров, я использую второй параметр attributes для установки значения и текста. 

var form = $("<form></form>");
$("body").append(form)
form.append("<div class='row'></div>");
form.find(".row")
  .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Students</label><select class='form-control' name='students'></select></div></div>");
  
$.ajax({
  url: "path/to/students/endpoint",
  dataType: "json", //assuming you return json from you php script
}).done(function (students){
  //assuming students is an array of names
  var select = form.find('select[name=students]');
  for(var name of students) {
    select.append($("<option></option>", {
      value: name,
      text: name
    }))
  }
})



//Since this is an example and I cant actually make an ajax call
function fakeAjaxResponse(students) {
  var select = form.find('select[name=students]');
  for(var name of students) {
    select.append($("<option></option>", {
      value: name,
      text: name
    }))
  }
}

fakeAjaxResponse([
  "StudentA",
  "StudentB"
])
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...