Espero que alguien pueda aconsejar.
Me enfrento a un pequeño problema al intentar agregar ciertos datos en un menú desplegable de select que son elementos de <option> que estoy obteniendo con Ajax después de hacer clic en la casilla de verificación en el mismo td en una tabla.
HTML:
<td class="col-lg-4"><select name="name[]" class="form-control name"></select>Ahora el JS:
$(document).on('click', '.check_box', function(){ var name = $(this).data('name'); $.ajax({ type: 'POST', url: '/someactionhere/', data:{name:name}, success: function(data){ $(this).closest('tr').find('.name').html(data); } }); });Sé que debería ser muy simple, pero me parece correcto. Así que no sé si algo anda mal o no.
¿Algunas ideas?
Gracias por adelantado.
En su función ajax, $(this) se refiere al objeto de la función ajax, no al elemento en el que se hizo clic. Para hacer referencia a ese elemento, primero debe almacenarlo en una variable, como sugieren los comentarios.
$(document).on('click', '.check_box', function() { var name = $(this).data('name'); let elem = $(this) $.ajax({ method: 'GET', url: 'https://jsonplaceholder.typicode.com/todos/1', data: { name: name }, success: function(data) { elem.closest('tr').find('.name').html("<option>here is the html</option>"); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td class="col-lg-4"> <input type='checkbox' data-name='test' class='check_box' /> <select name="name[]" class="form-control name"> </select> </td> </tr> </table>