-1

So i have an admin page to handle status of items in the inventory. It is running on Node, using ejs template and mongoDb.

I was having a post action, and it is running fine when using a redirect link to reload the whole page.

Now i am changing to use ajax to handle a partial view update instead of reloading.

This is my url post action using res.json() to send the updated result to client side:

router.post("/change-status/:id/:status", (req, res, next) => {
  let currentStatus = ParamsHelpers.getParam(req.params, "status", "active");
  let id = ParamsHelpers.getParam(req.params, "id", "");

  console.log("This is being called");

  ArticleModel.changeStatus(id, currentStatus, { task: "update-one" }).then(
    result => {
      //res.redirect(linkIndex); // this is how it works with redirect which reload the whole page
      res.json(result);
    }
  );
});

The result above is sent to client and handle after an ajax called. It is inside an action click on a tag.

$("a[href*='change-status']").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();

    console.log("ajax is called");

    var thisElement = $(this);
    var parent = $(this).parent();   

    $.ajax({
      url: this.href, // current href of a tag
      type: "POST",
      dataType: "json",
      success: function(data) {
        $(thisElement).remove();
        $(parent).append(
          statusHelper("admin123/article/", data.status, data._id)
        );
      },
      error: function(jqXHR, textStatus, err) {
        alert("text status " + textStatus + ", err " + err);
      }
    });
  });

On successful, it replaces current a tag with another one, with a different link (the two links are below).

On the first click, the action is posted correctly, the data is sent correctly and the html is replaced / updated correctly by statusHelper method.

I double checked and the link before the first clicked and after the first clicked is similar.

a href 1st click: 

http://localhost:6969/admin123/article/change-status/5e7cafc29d6d971b00cb5459/inactive

a href 2nd click:

http://localhost:6969/admin123/article/change-status/5e7cafc29d6d971b00cb5459/active

But when i clicked again to update the status the 2nd time, it routes me to that route instead of doing an ajax post.

May I know where i did thing wrong? If more codes needed pls let me know.

Quan Huynh
  • 15
  • 2

1 Answers1

0

It can be done by using event delegation:

Make a function to handle status change

function handleStatusChange(e) {
  e.preventDefault();
  e.stopPropagation();

  console.log("ajax is called");

  var thisElement = $(this);
  var parent = $(this).parent();
  // console.log("parent element", parent);

  $.ajax({
    url: this.href, // current href of a tag
    type: "POST",
    dataType: "json",
    success: function(data) {
      $(thisElement).remove();
      var currentElement = statusHelper(
        "admin123/article/",
        data.status,
        data._id
      );
      $(parent).append(currentElement);
    },
    error: function(jqXHR, textStatus, err) {
      alert("text status " + textStatus + ", err " + err);
    }
  });
}

Then attach this function to anchor tag:

$(document).on("click", "a", handleStatusChange);
Quan Huynh
  • 15
  • 2