0

Is there a way I could change the default ajax alert box? I currently have the code below, that deletes a user and reloads the current page. It works, but I would like to add some styling to the alert box that it triggers before the user is actually deleted.

  function deleteUser(id) {
      var action = confirm("Are you sure you want to delete this student?");

      if (action != false) {
        $.ajax({
           url: '{% url "student-delete" %}',
           data: {
            'id': id,
        },
        dataType: 'json',
        success: function (data) {
            if (data.deleted) {
              $("#userTable #user-" + id).remove();
              window.location.reload()
            }
        }
    });
  }
}

I tried changing the confirm to

    function deleteUser(id) {
      var action = bootstrap.confirm("Are you sure you want to delete this student?");
  if (action != false) {
    $.ajax({
       url: '{% url "student-delete" %}',
       data: {
        'id': id,
    },
    dataType: 'json',
    success: function (data) {
        if (data.deleted) {
          $("#userTable #user-" + id).remove();
          window.location.reload()
        }
    }
});

} }

This displayed nothing.

Sajere Kells
  • 113
  • 10

1 Answers1

0

You cannot style the custom confirmation box. It varies from browser to browser. If you want something custom you can build out one yourself using HTML and CSS. For example attach click events for yes button and for a no button and based on that you can make the delete

Nsoseka
  • 223
  • 2
  • 9
  • I know I would have to build something custom. I just wanted some input on how I could do that. – Sajere Kells May 18 '20 at 13:06
  • I can help you with that. Are you sing any framework, or you are working with plain CSS? – Nsoseka May 18 '20 at 13:06
  • I am using bootstrap. – Sajere Kells May 18 '20 at 13:09
  • Okay i see you are also using jquery. Here is a good example that can help you out with both bootstrap and jquery. https://stackoverflow.com/questions/22636819/confirm-deletion-using-bootstrap-3-modal-box – Nsoseka May 18 '20 at 13:13
  • If it does help you let me know so that we can update the question and the answer to help others reading this later. Thanks – Nsoseka May 18 '20 at 13:14
  • I am having trouble implementing some of the answers there. I am actually a backend Django developer who occasionally dabbles into front-end. I just want something that wouldn't require me to change the whole of my code implementation, cos then, I might have to change the way the back-end is written. – Sajere Kells May 18 '20 at 13:35
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/214111/discussion-between-nsoseka-and-sajere-kells). – Nsoseka May 18 '20 at 13:59