在 HTML 中使用模态弹出窗口并返回上一页

Question

I'm learning HTML, CSS, JavaScript and SQL.

The following info is "context"

The scenario is a website where I can add information about dogs, information about owners of the dogs and link the dogs to the owners. The data is stored in an SQL database.

I can successfully add a record about a dog and an owner and link them by having the OwnerTable primary key as a foreign key in the DogTable. All good.

It is required to be able to create a dog record with initially no owner then add the owner later. OR as I add a dog record I might assign it to an existing owner in the database.

Say I am adding a dog record then realise I want to link to an owner not in the database.

Now the problem/ question.

I can add a button to the add dog page which will allow me to add a new owner, while "in the middle" of adding a new dog record. It seems to me from what I have read there are two approaches:

1. Just switch to the existing "add owner" page using href
2. Create a modal pop-up (correct term?) when I click the add owner button

Now 1. seems less desirable because I would have to navigate back to the add dog page after adding a new owner.

2. Seems more attractive because the workflow isn't interrupted, it is like the user experience is "I need to add a dog but I need to add an owner. I will quickly add an owner and then continue with adding the dog without losing the information I have already typed about the dog"

However, the problem I anticipate with 2 is I will have two instances of code that do the same thing - a "standalone" web page for adding an owner and a modal popup for adding an owner. My concern is there will be duplicated code across the page and the modal - which will lead to a maintenance issue later should I need to change the "add owner" code in some way.

Is there a way round this duplication - or other HTML/JS facilities I could use - but still retain the ability to (1) add an owner "standalone" or (2) add an owner while adding a new dog record?

Answer 1

You can use the same request end point for both the add owner page and the modal version. The only thing you'd need to maintain is the add owner page. If you aren't using any server side tech, I think the easiest way would be to place an iframe inside the modal so that you can use the same html file for both the modal and the add owner page. This post has some more information on doing what Asp.Net calls a partial view with just vanilla javascript - Partial render in HTML/JavaScript

Be warned that using the pure javascript method is prone to failure if someone has javascript disabled in their browser.