Not able to reload the div while using jQuery $.ajax()

Question

I am trying to reload a div with id #todos after the data is saved in the database.

I tried using .load() in $.ajax()

$('.todo--checkbox').change(function () {
    let value = $(this).data('value');
    $.ajax({
        url: `/todo/${value}`,
        type: 'PUT',
        data: { done: this.checked },
        success: function (data) {
            if (data.success) {
                $('#todos').load(location.href + ' #todos');
            }
        },
    });
});

The problem with this, that it is not reloading the page but it is updating the data in database correctly.

I also tried this

$('.todo--checkbox').change(function () {
    let value = $(this).data('value');
    $.ajax({
        url: `/todo/${value}`,
        type: 'PUT',
        data: { done: this.checked },
        success: $('#todos').load(location.href + ' #todos'),
    });
});

In this, it is reloading the page as well as updating the data in the database but the problem is that it only reload and update the data at the first request, and after that I need to reload the whole page to update next data.

I tried to check if I am getting any data or not

$('.todo--checkbox').change(function () {
    let value = $(this).data('value');
    $.ajax({
        url: `/todo/${value}`,
        type: 'PUT',
        data: { done: this.checked },
        success: function (data) {
            console.log(data);
        },
    });
});

It returned nothing, but my data in the mongoDB compass is changing.

I already read this articles so, please don't mark this question as duplicate.

`$('#todos').load(location.href)` doesn't make much sense to me. You're trying to load the current URL (`http://mywebsite.com`) inside a div? — Jeremy Thille, Mar 01 '21 at 14:42
I suppose with `$('#todos').load(location.href + ' #todos')` you are creating multiple elements with the same ID (because you are loading `#todos` _into_ `#todos`, and this method adds the specified element and all of its children to the target element.) — CBroe, Mar 01 '21 at 14:43
@JeremyThille I am trying to reload the ```#todos``` div without reloading the page. In those article they told to use ```$('#todos').load(location.href + " #todos")```. And it is also working but it is working only once. — Arpit Falcon, Mar 01 '21 at 14:46
@CBroe no it is not creating multiple element I searched in the dev tools there was only one id with ```todos``` name — Arpit Falcon, Mar 01 '21 at 14:47
Are your `.todo--checkbox` elements contained _in_ `#todos`? Then you would of course be throwing away all the existing `.todo--checkbox` elements at the point where you replace the content, and so your event handlers bound specifically to them, are also lost. The keyword to fix that, would be _event delegation_. (And if that also does not fix your problem, or is not the problem to begin with - then _properly_ explain the problem first of all, by providing a [mre].) — CBroe, Mar 01 '21 at 14:58
@CBroe yes, ```.todo--checkbox``` element deep inside ```#todos```. So how to do *event delegation*? — Arpit Falcon, Mar 01 '21 at 15:02
I wrote “keyword”, because that was supposed to be something for you to go and _read up on_, and not just go “so how to do that” immediately. — CBroe, Mar 01 '21 at 15:04
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/229351/discussion-between-arpit-falcon-and-cbroe). — Arpit Falcon, Mar 01 '21 at 15:05
I tried to ```console.log(data)``` but it returned nothing so the problem is something else. — Arpit Falcon, Mar 01 '21 at 15:27

score 0 · Answer 1 · edited Mar 01 '21 at 15:33

I suggest you checking requests between your page and the server in the Network tab of browser's Development Console (F12).

Make sure you see PUT request going out to the server to update todo
Make sure that response you receive looks like { success: true } otherwise the following piece of code won't be triggered

if (data.success) { $('#todos').load(location.href + ' #todos'); }
Make sure you see GET request going out to the server to pull '#todos' asynchronously.

If you don't see request #3 try the following:

replace location.href with window.location.href
try reloading it manually via console (for Chrome, F12 -> Console tab -> paste $('#todos').load(location.href + ' #todos') and hit Enter). That way you are going to skip first ajax request and just will check whether '#todo' section is loadable/reloadable.

score -1 · Answer 2 · answered Mar 01 '21 at 15:07

-1

I think it’s a cache problem. Try it like this

$('.todo--checkbox').change(function () {
    let value = $(this).data('value');
    $.ajax({
        url: '/todo/${value}?t=202103010001',
        type: 'PUT',
        data: { done: this.checked },
        success: $('#todos').load(location.href + ' #todos'),
    });
});

t=202103010001 Set to a random number

answered Mar 01 '21 at 15:07

ilovess

11
1

if i set it to something random then how i will able to fetch the data? – Arpit Falcon Mar 01 '21 at 15:26

Not able to reload the div while using jQuery $.ajax()

2 Answers2