Ничто не стреляет в изменения SELECT

Question

Я не знаю, вижу ли я, что проблема в том, что я слишком долго не вижу проблемы, или я просто тупой, но у меня есть страница, на которой будет много (20-30) полей выбора и вводаи я пытаюсь сделать так, чтобы при изменении пользователем поля SELECT или INPUT он отправлял данные в базу данных в режиме реального времени.

Я испробовал почти все решения иПример, который я искал здесь, и я потратил более нескольких часов на десятки перестановок. Понятно, что я что-то упускаю (и ради себя, надеюсь, это не супер очевидно).

Я использую Bootstrap 4 с jQuery (Current)

    <div class=" row align-items-start" id="row-field-36">
        <div class="col-sm-4" style="padding-top:.25em;padding-bottom:.25em;">Incident</div>
        <div class="col-sm-1 text-center" style="padding-top:.25em;padding-bottom:.25em;">
            <select name="t1-field-36" class="form-control form-control-sm text-center" id="t1-field-36"1>
            <option value="0" selected>N/A</option>
            <option value="1"">1</option>
            <option value="2"">2</option>
            <option value="3"">3</option>
        </select>
<!-- begin script t1-field-36 -->
<script>
    $(document).ready(function() {
        $('#t1-field-36').on("changed.bs.select", function () {
            var field = "t1-field-36";
            var value = $(this).val();
            var arg = "1"
            var person = "12345678"
            $.ajax({
                url: "echo.php",
                type: "post",
                success: function(result){
                    $("#contentbody").html(result);
                },
                data: {
                    "person": person,
                    "field": field,
                    "value": value,
                    "arg": arg }
                });
            });
        });
</script>
<!-- end script t1-field-36 -->

Что предполагаетсяслучиться - это направление идентификатора поля, значения, персоны и любых аргументов обратно в другой скрипт на сервере для выполнения реальной работы. Прямо сейчас для диагностических целей echo.php просто распечатывает любые значения, отправленные ему. У меня нет ошибок в консоли JS, и кажется, что ничего не слушает события в этих полях SELECT.

РЕДАКТИРОВАТЬ - 1: Я также пытался

$(document).ready(function() {
    $('#t1-field-36').change(function(){...

Заранее спасибо.

Answer 1

Ваш HTML был искажен, и вы оборачивали части своих опционных тегов в строки. Вы также не предоставили contentbody div. В качестве примечания, даже при предоставлении кода для вопроса, пожалуйста, убедитесь, что вы закрыли обертки элементов. Ваши divs также не были закрыты.

Я не знаю, стоит ли связывать эти вещи с тем, что вы удаляете код для вопроса, или являются ли они фактическими ошибками в вашей разметке. В этом и заключается проблема :)

Что касается changed.bs.select, то есть несколько заявок и запросов, в которых говорится, что это не сработало так, как должно. Просто используйте событие change. Это можно сделать через .change(function() { ... }) или .on("change", function() { ... }). Оба работают в коде, который я предоставил.

Наконец, поскольку вы ожидаете ответа AJAX, вы можете не получить ожидаемых немедленных результатов. Следующий пример покажет, что вещи запускаются при такой настройке, хотя при вызове AJAX результаты могут отображаться в вашем contentbody div ( при условии, что он существует :))

$(document).ready(function() {
  console.log("ready");
  $('#t1-field-36').on("change", function() {
  console.log("change event fired");
    var field = "t1-field-36";
    var value = $(this).val();
    var arg = "1"
    var person = "12345678"

    var result = value;
    $("#contentbody").html(result);

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=" row align-items-start" id="row-field-36">
  <div class="col-sm-4" style="padding-top:.25em;padding-bottom:.25em;">Incident</div>
  <div class="col-sm-1 text-center" style="padding-top:.25em;padding-bottom:.25em;">
    <select name="t1-field-36" class="form-control form-control-sm text-center" id="t1-field-36" 1>
      <option value="0" selected>N/A</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <div id="contentbody"></div>
  </div>
</div>

---

Возможное полезное примечание:

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

Это может хорошо работать в одиночном, игрушечном проекте, но во всем остальном вы будете вызывать множество запросов, на которые ваш сервер должен будет ответить / обработать - не говоря уже о каких-либо обновлениях представления. Если это больше, чем проект для домашних животных, вы, скорее всего, настроитесь на… ну, нерешительно DDOS, говоря ха-ха.

Я бы предложил, в качестве альтернативы, чтобы обновления былиагрегированная клиентская сторона до обработки обновлений. То есть объединение как можно большего количества изменений в одном запросе перед его отправкой (если это похоже на ситуацию с типом дерева решений, храните столько же логики на стороне клиента), или если это «живое» обновление информации (например, профили или что-то еще), попробуйте периодически сохранятьв локальном хранилище и через меньший промежуток времени / когда пользователь указывает, что он выходит или находился в режиме ожидания, отправьте обновления. Это похоже на сохранение в Word временных изменений в кеше.

Это зависит от вашей модели и от вас самих / в зависимости от того, что вы делаете - но я видел много попыток мгновенных обновлений. Это никогда не эффективно, когда вы пытаетесь согласовать все входные события DOM с обновлениями, и иногда это вызывает огромные проблемы.