closest tr selection in JQuery select dropdown

Question

Hope someone can advise.

I'm facing small issue trying to add certain data into a select dropdown which is <option> elements that I'm fetching it with Ajax after clicking the check box in same td in a table.

Html:

<td class="col-lg-4"><select name="name[]" class="form-control name"></select>

Now the 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);
                }
            });

});

I know it's should be real simple but and looks like right to me. So I don't no if something wrong or not.

Any ideas?

Thanks in advance.

Answer 1

In your ajax function, $(this) refers to the ajax function object, not the element that was clicked. To refer to that element, you need to first store it in a variable, like the comments suggest.

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