флажки не проверяются, но каждый флажок регистрирует первый щелчок и отправляет данные на сервер - PullRequest
Новая
       39

флажки не проверяются, но каждый флажок регистрирует первый щелчок и отправляет данные на сервер

1 голос
/ 05 ноября 2019

У меня есть функция javascript, которая извлекает значения флажков и отправляет данные на сервер по щелчку: 

$(function() {
$("[name=check]").on("click", function() {
var res = {};
var vals = $("[name=" + this.name + "]").each(function()
{
res[this.value] = this.checked;
}).get();
$.getJSON('/_filter', {
        b: JSON.stringify(res),
      }, function(data) {
        $('.results').html(data.results)
      });
    return false;
});
});

В моей тестовой среде я инициализирую все флажки для снятия флажка. Я нажимаю первый флажок, и данные отправляются на сервер и возвращаются как True для первого флажка и false для остальных. Это работает, как и ожидалось, однако первый флажок остается непроверенным. Кроме того, если я снова нажму первый флажок, ничего не произойдет. Я ожидал бы, что сервер теперь сообщит ложное для первого флажка и ложное для остальных. Если я нажму второй флажок, сервер сообщит true для второго флажка и false для остальных, но имеет ту же проблему, что и первый флажок.

Любые идеи относительно того, почему это может происходить?

Кроме того, вот серверная часть (фляга): 

@app.route('/_filter')
def filterthis():
  checkbox = request.args.get('b')
  checkbox_dict = json.loads(checkbox)

  first = checkbox_dict['first']
  second = checkbox_dict['second']
  third = checkbox_dict['third']
  fourth = checkbox_dict['fourth']

  output= str(first) + str(second) + str(third) + str(fourth)

  return jsonify(results=output)

А вот index.html:

<ul class="filterSection">
    <li>
        <strong>Show:</strong>
        <input type="checkbox" name="check" value="first"/>
        <label>First</label>
    </li>
    <li>
        <input type="checkbox" name="check" value="second"/>
        <label>Second</label>
    </li>

     <li>
        <input type="checkbox" name="check" value="third"/>
        <label>Third</label>
    </li>
     <li>
        <input type="checkbox" name="check" value="fourth"/>
        <label>Fourth</label>
    </li>
</ul>

<div class="results">{{ results|safe }}</div>

1 Ответ

2 голосов
/ 05 ноября 2019

когда вы нажимаете на флажок, флажок становится установленным, но вы используете return false, которые предотвращают обновление домена. если вы хотите избавиться от возврата заявления. 

$(function () {
  $("[name=check]").on("click", function (event) {
    var res = {};
    var vals = $("[name=" + this.name + "]").each(function () {
      res[this.value] = this.checked;
    }).get();
    $.getJSON('/_filter', {
      b: JSON.stringify(res),
    }, function (data) {
      $('.results').html(data.results)
    });
  });
});
<ul class="filterSection">
    <li>
        <strong>Show:</strong>
        <input type="checkbox" name="check" value="first"/>
        <label>First</label>
    </li>
    <li>
        <input type="checkbox" name="check" value="second"/>
        <label>Second</label>
    </li>

     <li>
        <input type="checkbox" name="check" value="third"/>
        <label>Third</label>
    </li>
     <li>
        <input type="checkbox" name="check" value="fourth"/>
        <label>Fourth</label>
    </li>
</ul>
...