Question posted in
You can find the official documentation here.

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

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.

  1. Refresh/reload the content in Div using jquery/ajax

  2. Refresh Part of Page (div)

  3. refresh div with jquery

  4. reload div after ajax request

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

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

    1. Make sure you see PUT request going out to the server to update todo

    2. 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’);
      }

    3. 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.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search