Las casillas de verificación no se verificarán, pero cada casilla de verificación está registrando primer clic y enviando datos al servidor -- javascript campo con python campo con flask campo con checkbox campo con getjson camp Relacionados El problema

checkboxes won't check but each checkbox is registering first click and sending data to server


1
vote

problema

Español

Tengo una función de JavaScript que recupera los valores de la casilla de verificación y envía datos a SERVER ON, haga clic en:

  text2  

En mi entorno de prueba, inicializo todas las casillas de verificación para no estar marcadas. Hago clic en la primera casilla de verificación y los datos se envían al servidor y se reportan como verdadero para la primera casilla de verificación y False para los demás. Esto funciona como se esperaba, sin embargo, la primera casilla de verificación permanece sin marcar. Además, si vuelvo a hacer clic en la primera casilla de verificación, no pasa nada. Esperaría que el servidor informara ahora Falso para la primera casilla de verificación y False para los demás. Si hago clic en la segunda casilla de verificación, el servidor informa verdadero para la segunda casilla de verificación y False para los demás, pero tiene el mismo problema que tuvo la primera casilla de verificación.

¿Alguna idea de por qué esto puede estar sucediendo?

Además, aquí está el lado del servidor (matraz):

  text3  

y aquí está el índice.html:

  text4  
Original en ingles

I have a javascript function that retrieves checkbox values and sends data to server on click:

$(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; }); }); 

In my test environment, I initialize all checkboxes to be unchecked. I click the first checkbox and data is sent to server and reported back as True for first checkbox and false for the others. This works as expected, however, the first checkbox remains unchecked. Also, if I click the first checkbox again, nothing happens. I would expect for the server to now report back false for the first checkbox and false for the others. If I click the second checkbox the server reports back true for the second checkbox and false for the others but has the same issue the first checkbox had.

Any ideas as to why this may be happening?

Also, here is the server side(flask):

@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) 

And here is the 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> 
              

Lista de respuestas

2
 
vote
vote
La mejor respuesta
 

Cuando hace clic en la casilla de verificación, la casilla de verificación se verifica, pero está utilizando Text2 que evita la actualización de DOM. Si desea deshacerse de la declaración de retorno.

  Text3  
  Text4  
 

when you click on checkbox the checkbox become checked, but you are using return false which prevent updation of dom. if you wish get rid of return statement.

$(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>
 
 

Relacionados problema

1  PHP a JQUERY: JSON_ENCODE NO TRABAJANDO  ( Php to jquery json encode not working ) 
He estado luchando para resolver esto de los últimos dos días. De hecho, como soy nuevo para todo esto, parece que estoy tratando constantemente de resolver a...

2  Mi código de getjson no funciona en jquery 1.4.2  ( My getjson code doesnt work in jquery 1 4 2 ) 
Esta es mi primera pregunta en StackOverflow. Me pregunto por qué mi código de GetJson no funciona con JQery 1.4.2, funcionó sin problemas con JQery 1.3.2 aun...

0  Cómo usar GetJson () para múltiples URL  ( How to use getjson for multiple urls ) 
Estoy tratando de recuperar algunos archivos JSON. No está seguro de qué URL funcionará, por lo tanto, estoy buscando una manera de probar todas las URL y si ...

2  jquery getjson multi matriz  ( Jquery getjson multi array ) 
Tengo problemas con getJSON y una matriz multidimensional. Si uso un dato: {"ID": "1", "Item1": 1, "Item2": "2", "Item3": "3"} $.getJSON(geturl, func...

30  ¿Cómo incluir datos JSON en JavaScript sincrónicamente sin análisis?  ( How to include json data in javascript synchronously without parsing ) 
Quiero cargar un archivo JSON de mi propio servidor que contiene una matriz en una variable de objeto JavaScript. Me gustaría hacerlo al principio de la car...

2  No se pueden recuperar datos JSON usando jQuery  ( Unable to retrieve json data using jquery ) 
Soy un novato y estoy atascado en la recuperación de datos de JSON. Siguiendo es mi índice.php: <script type="text/javascript" src="jquery-1.3.2.min_2.js...

2  jquery getjson llamó varias veces rompiendo  ( Jquery getjson called multiple times breaking ) 
Una sola llamada a getjson, funciona bien ... <div class="col-sm-3 col-xs-12" > <label for="pickers" >Picker</label> <select name="Picker" id="sele...

0  Función de jquery anidadas devuelve 'indefinido' o '[objeto de objeto]'  ( Nested jquery function returns undefined or object object ) 
Hola amigos en StackOverFlow: Estoy luchando para encontrar lo que está causando una función de jQuery anidados para devolver los valores de 'indefinido' o ...

0  PROBLEMA DE JQUERY GETJSON Cuando la solicitud no se devuelve como JSON  ( Jquery getjson problem when request is not returned as json ) 
Tengo el siguiente código jQuery.getJSON(encodeURI(strUrl), {address:address,state:state, zip:zip},function(data){ alert('HELLO World!'); }); Si po...

0  Getjson Access-Control-Permitir-Origen  ( Getjson access control allow origin ) 
Acabo de aprender que usar Getjson con una URL de otro dominio / puerto generalmente conducirá al problema de la política de dominio cruzado. Con este códig...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos