2

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.

Hazem Behairy
  • 89
  • 1
  • 7
  • 1
    Is there any `$(this)` inside `success`? Try to write it into console. In my view, there is another scope and `$(this)` isn't the same as on line 2. – pavel Nov 28 '21 at 21:03
  • it says: `context: undefined` – Hazem Behairy Nov 28 '21 at 21:08
  • So, it's answer to your question. I'm so good in jQuery, maybe st. like `var elem = $(this)` on line 3? Maybe add any element identicator to called URL? – pavel Nov 28 '21 at 21:10
  • I think you can just change `success: function(data){` to `success: (data) => {`. – Rocky Sims Nov 28 '21 at 21:14
  • I tried before to print the data using `id` and this is worked actually but I don't want to print the data with id cause it may cause a conflict. – Hazem Behairy Nov 28 '21 at 21:16
  • @Rocky Sims there is nothing wrong in my ajax code it's completely right the issue here on calling the closest tr with class `name` to print the `data` there. – Hazem Behairy Nov 28 '21 at 21:18
  • You want to use an arrow function so that `$(this)` in `$(this).closest('tr')` still refers to the same element as when you use `$(this)` above in `var name = $(this).data('name');`. – Rocky Sims Nov 28 '21 at 21:21
  • Alternately you could do `const self = this;` just above `$.ajax({` and then instead of `$(this).closest('tr').find('.name').html(data);` do `$(self).closest('tr').find('.name').html(data);`. – Rocky Sims Nov 28 '21 at 21:23
  • 1
    @Rocky Sims I tried to use `var ref = $(this)` then `ref.closest....` inside the success but still nothing happen. – Hazem Behairy Nov 28 '21 at 21:23
  • Still not working! – Hazem Behairy Nov 28 '21 at 21:25

1 Answers1

3

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>
Rocky Sims
  • 3,523
  • 1
  • 14
  • 19
Kinglish
  • 23,358
  • 3
  • 22
  • 43