Informing the IBM Community

A NodeJS Website on IBM i – Deleting Records

0
(0)



Continuing with my Node.js Express website on IBM i series, in this article I’ll show you how easy it is to delete employee records from our database.

In this article, we will develop some quick scripts to remove these records. 

Once again, it really is very simple in node.

The stages we need to go through to develop this functionality is as follows:

  1. Allow user to select an employee to delete
  2. Show a confirmation popup window to ask the user to confirm the delete
  3. If the user confirms the delete, then delete the record from the database
  4. Send a status message back to the user, letting them know if the delete was successful
  5. Refresh the browser window, showing the current list of employees.

In pictorial form, it will look like this.

The user will select an employee.

This image has an empty alt attribute; its file name is Picture2-3.png

A popup window will ask for confirmation of the delete.

This image has an empty alt attribute; its file name is Picture3-3.png

A status message will show the user the results of the delete request.

This image has an empty alt attribute; its file name is pic4.png



Ah, all very neat, even if I say so myself 😊

AJAX

Before we move onto the coding, let me explain that we will be using an AJAX call to delete our employee record.

AJAX (Asynchronous JavaScript and XML), is a great tool for us developers.

It allows us to, amongst other things:

  • Read data from a web server – after a web page has loaded
  • Update a web page without reloading the page
  • Send data to a web server – in the background

In our example, we will make an AJAX call once the user has confirmed the delete in the popup window.  This call will route to a new page that has the sole purpose of performing database access.

Coding

The first step we have to do, is to modify our employee.pug file to show a delete icon in the employee table.

We add another column, with the font-awesome icon for delete.  We have to make this an HTML link.

This can be seen in the coding below.

This image has an empty alt attribute; its file name is Picture5-2.png

This image has an empty alt attribute; its file name is Picture6-1.png

Popup Window

Also, in the same file, the employee.pug, we need to add the confirmation popup window. 

We use Bootstrap’s JavaScript modal plugin.

This image has an empty alt attribute; its file name is Picture7-1.png

This image has an empty alt attribute; its file name is picture8-1.png

The next part of the coding is to add the JavaScript functions to display the popup window. 

This is also added to the same employee.pug file.

This image has an empty alt attribute; its file name is Picture9-1.png

This image has an empty alt attribute; its file name is Picture10-1.png

Next, we need to add the delete JavaScript function (submitDeleteForm), this is also coded within the employee.pug file.

This image has an empty alt attribute; its file name is Picture11.png
This image has an empty alt attribute; its file name is Picture12.png

AJAX Script

Once we have all the above in place, we need the AJAX script that is going to perform the employee delete.  I called this script ajax_employee.js (this was the name I defined in step 3 of the above figure).

This is a new script in the /Routes folder and can be seen in the figure below.

This image has an empty alt attribute; its file name is Picture13.png

This image has an empty alt attribute; its file name is Picture14.png

Main Driver

As we had to do with the previous articles in this series, we have to include the AJAX_employee route to our main driver app.js.

These additions are highlighted in the figure below.

This image has an empty alt attribute; its file name is Picture15.png

Testing

Let me show you what happens when the SQL delete fails, for whatever reason.

I’m going to change the name of the library within my ajax_employee.js script to one that doesn’t exist.

Now the popup window, after the AJAX call, will display a standard error message.

This image has an empty alt attribute; its file name is Picture16.png

No great clues there as to what went wrong, but if we look at the console log, we see the SQL error messages that are returned from our server.

This image has an empty alt attribute; its file name is Picture17.png



GitHub

As with all my previous articles on this topic, these changes have now been published to my GitHub repository, which can be found at this link.  Hopefully, this will provide you with a template to experiment with Node.js on IBM i.

Conclusion

Hopefully in this article I’ve shown how easy it is to select an employee record, display a confirmation pop-up window and then delete the employee from our IBM i DB2 database.

We will further enhance our application in my next article.  I’m sure you can guess what’s coming next!

If you have any questions, either on this article, or any other open source, use the comments below, or send me a message on twitter @AndyYouens

Andy Youens is an IBM i consultant/instructor at Milton Keynes, UK-based FormaServe Systems with over 40 years IBM midrange experience.



How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *