Dialog Custom with OTP Form

[imiten]

https://htmx.org/examples/modal-custom/ mentions how to popup modal diaglog with some content and have it close but its not using javascript but hyperscript it seems. It says you can also use javascript for it but where is documentation for it or sample for it ?

I am looking into using example of custom modal dialog and want to have "OTP submit form" as its content. can one provide example ? i am unable to understand how to handle invalid otp response, on success how to close the dialog etc.

I may use pyotp on server side using fastapi to provide otp to client.

here is server side pseudo code:

@app.delete("/game/{id}", response_class=Response)
def delete_game(request: Request, id: int, otp: Optional[str] = None,
         db: Session = Depends(get_db)):
    """
      delete game from database
      return no content just status code 200 for success.
    """

    if not otp:
        return templates.TemplateResponse("otpmodal.html", {
            "request": request,
            "form": {
               "id": id
                }
            })

Below is row line of list where in delete button click will cause confirm box and then delete action on server.
row_ro.html

 <tr>                                                                           
      <td data-label="Game Name">{{ game.name }}</td>                           
      <td data-label="Date">{{ game.date_time }}</td>                           
      <td data-label="Json">{{ game.json }}</td>                                
      <td>                                                                      
        <button class="btn btn-danger"                                          
                hx-confirm="Are you sure ?" hx-delete="/game/{{ game.id }}">    
          <i class="trash icon"></i>                                            
        </button>                                                               
        <button class="btn btn-danger" hx-get="/game/{{ game.id }}/edit">       
          <i class="edit icon"></i>                                             
        </button>                                                               
      </td>                                                                     
 </tr>   

below is OTP form in custom dialog I also want to trigger OTP send call on server so how to do that also in below example ? basically on loading this below partial i want to trigger OTP generation on server which will be its own endpoint.

<div id="modal" _="on closeModal add .closing then wait for animationend then remove me">
	<div class="modal-underlay" _="on click trigger closeModal"></div>
	<div class="modal-content">
		<h1>Modal Dialog</h1>

<form id="otpform" class="ui form" 
                   hx-post="{{ request.url.path }}" hx-target="#otpstatus" 
                                     hx-swap="outerHTML">
  <div class="field">
    OTP: <input type="text" name="otp"> 
  </div>

  <button class="ui button primary" type="submit">Send</button>
  <div id="otpstatus"/>

</form>

		<br>
		<br>
		<button _="on click trigger closeModal">Close</button>
	</div>
</div>

[imiten]

Hi,

made some progress where in able to display modal and then on submit if proper otp it delete row but it does not remove the dialog. it just removed the close button of modal and then ui is blocked. Also if error (422 returned) ui is blocked. any ideas how to implement this correctly ?

fastapi endpoint

@app.delete("/game/{id}", response_class=Response)
def delete_game(request: Request, id: int, 
        otp: str = fastapi.Form(default=None),
         db: Session = Depends(get_db)):
    """
      delete game from database
      return no content just status code 200 for success.
    """

    if not otp:
        print(f'GENERATE OTP={get_otp()}')
        return templates.TemplateResponse("otpmodal.html", {
            "request": request,
            "form": {
               "id": id
                }
            }, status_code=422
            )
    else:
        print(f'Verify OTP={otp}')
        v=verify_otp(otp)
        print(f'verify={v}')
        if not v:
            return Response(status_code=422)

otpmodal.html

<div id="modal" _="on closeModal add .closing then wait for animationend then remove me">
  <div class="modal-underlay" _="on click trigger closeModal"></div>            
  <div class="modal-content">                                                   
    <h1>Modal Dialog</h1>                                                       
                                                                                
<form id="otpform" class="ui form"                                              
                   hx-delete="{{ request.url.path }}" hx-target="#otpstatus"    
                                     hx-swap="innerHTML">                       
  <div class="field">                                                           
    OTP: <input type="text" name="otp">                                         
  </div>                                                                        
                                                                                
  <button class="ui button primary" type="submit">Submit</button>               
  <div id="otpstatus">                                                          
  </div>                                                                        
                                                                                
</form>                                                                         
                                                                                
    <br>                                                                        
    <br>                                                                        
    <button _="on click trigger closeModal" type="button">Close</button>        
  </div>                                                                        
</div>  

event handler javascript:

if(evt.detail.xhr.status === 422){
        alert("Error: Form Error");
        // allow 422 responses to swap as we are using this as a signal that
        // a form was submitted with bad data and want to rerender with the
        // errors
        //
        // set isError to false to avoid error logging in console
        evt.detail.shouldSwap = true;
        evt.detail.isError = false;
        if(htmx.find("#gameform")) evt.detail.target = htmx.find("#gameform");
    } 

[benpate]

Hi, it looks like you’ve already made a lot of progress in this. Here are a couple of tips to help you out. When dealing with server responses, htmx works best if you use the event system. So, for a successful post from the modal, use the HX-Trigger Response header to return an event (like closeModal) that tells the client what to do next. If there’s an HTTP error, you can listen for the htmx:onLoadError event — although it’s probably easier to leave pure REST principles behind and return an HTTP 200 response that includes a human-readable error message.

I hope the hyperscript in the examples isn’t throwing you off too much. It can certainly be translated into JavaScript, but it’s a lot more clunky to set up event handlers in Javascript.

[imiten]

use case: I have list of games and for each row I have option to delete. we show confirm box for delete click and then if it succeeds the row gets deleted and on error it shows error. now I am adding OTP confirm for delete click.

If you have example of using events in specific manner please share. I am currently using beforeSwap on body for every thing pretty much.

I now added HX-Trigger header on success as in code below I still have things not quite as expected. The Close button part disappears on success of OTP match but dialog stays upto submit button. In case of OTP verify failure the same close button disappears and modal becomes unresponsive or never submits may be some target is invalid which causes it. I think you hinting to learn hyperscript and may be its time to take look.

1. on correct OTP I am now returning HX-Trigger: closeModal header but still its not removing the modal.
2. on incorrect OTP I now return content Invalid OTP its showing up in otpstatus div but Close button disappears and now UI becomes ineffective. It will not submit any more.
3. onLoadError is another option to htmx:beforeSwap I guess. currently I am trying to handle both success and error using status code in beforeSwap.
4. actually I have used Delete Row example htmx site when I click on delete button against row in List. It asks for confirmation and I choose yes then it shows OTP dialog where if I choose close button it still does not dimiss the OTP form. I have tried to explicitly set type to button on it since in debugger it shows submit by default.

@app.delete("/game/{id}", response_class=Response)                                 
def delete_game(request: Request, id: int,                                         
        otp: str = fastapi.Form(default=None),                                     
         db: Session = Depends(get_db)):                                           
    """                                                                            
      delete game from database                                                    
      return no content just status code 200 for success.                          
    """                                                                            
                                                                                   
    if not otp:                                                                    
        print(f'GENERATE OTP={get_otp()}')                                         
        return templates.TemplateResponse("otpmodal.html", {                       
            "request": request,                                                    
            "form": {                                                              
               "id": id                                                            
                }                                                                  
            }, status_code=422                                                     
            )                                                                      
    else:                                                                          
        print(f'Verify OTP={otp}')                                                 
        v=verify_otp(otp)                                                          
        print(f'verify={v}')                                                       
        if not v:                                                                  
            return Response(content='Invalid OTP', status_code=422)                
                                                                                   
    print(f"method={request.method} id={str(id)}")                                 
    if request.method == 'DELETE':                                                 
        try:                                                                       
                                                                                   
            db.query(Game).filter(Game.id == id).delete()                          
            db.commit()                                                            
                                                                                   
        except Exception as e:                                                     
            print(str(e))                                                       
            #keep only message and avoid details                                
            raise HTTPException(detail=str(e).splitlines()[0], status_code=500) 
    headers = { "HX-Trigger": "closeModal" }                                    
    return Response(headers=headers, status_code=200)

[imiten]

issue was that I did not include hyperscript so modal related close click was not working.

here is body beforeswap event handler updated:

 if(evt.detail.xhr.status === 422){                                      
        alert("Error: Form Error");                                                
        // allow 422 responses to swap as we are using this as a signal that       
        // a form was submitted with bad data and want to rerender with the        
        // errors                                                                  
        //                                                                         
        // set isError to false to avoid error logging in console                  
        evt.detail.isError = false;                                                
        evt.detail.shouldSwap = true;                                              
        console.log("422 target:" + evt.detail.target);                            
        console.log(evt);                                                          
        console.log(evt.detail.elt.tagName);                                       
        if (evt.detail.elt.tagName === 'TR') {                                     
          console.log("case TR");                                                  
          //evt.detail.shouldSwap = true;                                          
        } else if (evt.detail.elt.tagName === 'DIV') {                             
          //invalid OTP case we do not swap                                        
          console.log("case DIV");                                                 
          evt.detail.shouldSwap = false;                                           
        } else if(htmx.find("#gameform")) {                                        
          console.log("case #gameform");                                           
          evt.detail.target = htmx.find("#gameform");                              
        }                                                                          
    } 

fastapi endpoint:

@app.delete("/game/{id}", response_class=Response)                              
def delete_game(request: Request, id: int,                                      
        otp: str = fastapi.Form(default=None),                                  
         db: Session = Depends(get_db)):                                        
    """                                                                         
      delete game from database                                                 
      return no content just status code 200 for success.                       
    """                                                                         
                                                                                
    if not otp:                                                                 
        print(f'GENERATE OTP={get_otp()}')                                      
        return templates.TemplateResponse("otpmodal.html", {                    
            "request": request,                                                 
            "form": {                                                           
               "id": id                                                         
                }                                                               
            }, status_code=422,                                                 
            headers =  { "HX-Target": "body", "HX-Swap": "beforeend" }          
            )                                                                   
    else:                                                                       
        print(f'Verify OTP={otp}')                                              
        v=verify_otp(otp)                                                       
        print(f'verify={v}')                                                    
        if not v:                                                               
            return Response(content='Invalid OTP', status_code=422)             
                                                                                
    print(f"method={request.method} id={str(id)}")                              
    if request.method == 'DELETE':                                              
        try:                                                                    
                                                                                
            db.query(Game).filter(Game.id == id).delete()                       
            db.commit()                                                         
                                                                                
        except Exception as e:                                                  
            print(str(e))                                                       
            #keep only message and avoid details                                
            raise HTTPException(detail=str(e).splitlines()[0], status_code=500) 
    headers = { "HX-Trigger": "closeModal" }                                    
    return Response(headers=headers, status_code=200)    

issues:

1. for no otp case the row from front end is getting deleted even though I send headers for HX-Target and HX-Swap which I can see in response on browser.
2. eventhandler I am using things like checking what is the evt.detail.elt trying to decide on Swapping I guess there should be more elegant way to do it.

[benpate]

Take a look at the docs for response headers: https://htmx.org/reference/#response_headers

You need to use HX-Retarget and there is no support for HX-Swap from response headers. This confused me in the beginning, and I'm still lobbying for it to be added, but it probably won't be anytime soon.

The solution that worked for me was to choose a standard element (like an

or a #modal) to put the modal content into, then just send back HX-Retarget:aside.

Does this make sense?

[imiten]

thanks for correcting me on what are allowed response headers. I tried on on otp case to set header HX-Retarget:aside and it stopped showing modal. I guess that is where you meant I should be changing.

[benpate]

Yes. Retarget is just telling htmx where to put the new content. I have an empty

tag buried at the bottom of every page as a place to put modals when I need them.You could retarget anything, it doesn't have to be an aside, but you do need to make sure that the target exists in your pages.

[imiten]

I have now used #aside but the row deletion is not working. seems the confirmed event is not reaching TR element. without #aside had issue that on showing modal the row would delete beforehand.

after #aside change one thing though is that those TR and DIV case below seems not needed and I can delete them.

if(evt.detail.xhr.status === 422){                                   
        alert("Error: Form Error");                                             
        // allow 422 responses to swap as we are using this as a signal that       
        // a form was submitted with bad data and want to rerender with the        
        // errors                                                               
        //                                                                      
        // set isError to false to avoid error logging in console               
        evt.detail.isError = false;                                             
        evt.detail.shouldSwap = true;                                           
        console.log("422 target:" + evt.detail.target);                         
        console.log(evt);                                                       
        console.log(evt.detail.elt.tagName);                                    
        if (evt.detail.elt.tagName === 'TR') {                                  
          console.log("case TR");                                               
          //evt.detail.shouldSwap = true;                                       
        } else if (evt.detail.elt.tagName === 'DIV') {                          
          //invalid OTP case we do not swap                                     
          console.log("case DIV");                                              
          //evt.detail.shouldSwap = true;                                       
        } else if(htmx.find("#gameform")) {                                     
          console.log("case #gameform");                                        
          evt.detail.target = htmx.find("#gameform");                           
        }                                                                       
    } 

here is how now I send multiple events.

app.delete("/game/{id}", response_class=Response)                              
def delete_game(request: Request, id: int,                                      
        otp: str = fastapi.Form(default=None),                                  
         db: Session = Depends(get_db)):                                        
    """                                                                         
      delete game from database                                                 
      return no content just status code 200 for success.                       
    """                                                                         
                                                                                
    if not otp:                                                                 
        print(f'GENERATE OTP={get_otp()}')                                      
        return templates.TemplateResponse("otpmodal.html", {                    
            "request": request,                                                 
            "form": {                                                           
               "id": id                                                         
                }                                                               
            }, status_code=422,                                                 
            #headers =  { "HX-Target": "body", "HX-Swap": "beforeend" }         
            headers =  { "HX-Retarget": "#aside" }                              
            )                                                                   
    else:                                                                       
        print(f'Verify OTP={otp}')                                              
        v=verify_otp(otp)                                                       
        print(f'verify={v}')                                                    
        if not v:                                                               
            return Response(content='Invalid OTP', status_code=422)             
                                                                                
    print(f"method={request.method} id={str(id)}")                              
    if request.method == 'DELETE':                                              
        try:                                                                    
                                                                                
            db.query(Game).filter(Game.id == id).delete()                       
            db.commit()                                                         
                                                                                
        except Exception as e:                                                  
            print(str(e))                                                       
            #keep only message and avoid details                                
            raise HTTPException(detail=str(e).splitlines()[0], status_code=500) 
    headers = { "HX-Trigger": '{"closeModal" :"", "confirmed" : ""}' }          
    return Response(headers=headers, status_code=200)       

I had to add div#aside to modal though. we unable to specify like innerHTML swap behaviour so have to add this div.

<div id="modal" _="on closeModal add .closing then wait for animationend then remove me">
	<div class="modal-underlay" _="on click trigger closeModal"></div>
	<div class="modal-content">
		<h1>Modal Dialog</h1>

    <form id="otpform" class="ui form" 
                       hx-delete="{{ request.url.path }}" hx-target="#otpstatus" 
                                         hx-swap="innerHTML">
      <div class="field">
        OTP: <input type="text" name="otp" required="required"> 
      </div>

      <button class="ui button primary" type="submit">Submit</button>
      <div id="otpstatus">
      </div>

    </form>

		<br>
		<br>
		<button _="on click trigger closeModal" type="button">Close</button>
	</div>
</div>
<div id="aside"></div>

[benpate]

Hey @imiten,

A couple things: first, I should tell you that I'm not so familiar with Python, so it is probably easier for me if you can share what your server is sending back and forth, instead of the source code that generates the HTTP documents.

Also, it's really easy to miscommunicate over email threads like this, and I think we may have been miscommunicating about the order of events for your modal dialogs. To try to cut through this, I'm going to describe the process in my app step-by-step, and how I think it relates to your project. If I miss something, please forgive me :)

1. Your original page shows a table of records, including and edit/delete button. This page includes an <aside></aside> tag at the bottom of the page, where modals will eventually be populated.

2. The user clicks that button to see a modal dialog. The HTTP request goes to your server, something like https://myserver.com/people/:personID/delete. For this request, I use the HTTP "GET" method, because I'm not making a change to the database, I'm just getting the dialog that confirms the action with the user.

3. The server responds with the content of the modal dialog. This is where I use the HTTP response header HX-Retarget:aside to put the dialog into the little hidden tag instead of replacing the whole document.

4. The HTML for the modal includes a form that will actually do the action. In my case (and because of some idiosyncrasies in my server API) I do something like <form hx-post="https://myserver.com/people/:personID/delete">. A more "proper" way would be to use an HTTP "DELETE" method, but now we're getting too deep into religious arguments about REST architecture.

5. When the user submits this form, the server validates the transaction and deletes the record. So next, we'll need to send the response to the client. There are many ways to do this, but I decided on a more generic approach that allows modals to be used in many places. This means that I DON'T send back a specific set of HTML (for example, by returning a new table with the now-deleted record removed, or by sending code to delete that specific row from the table using Javascript/Hyperscript). Instead, I simply tell the client that "SOMETHING has changed, go figure it out yourself."

6. So to do this, I return a HTTP Response Header that's something like this: HX-Trigger:{'closeModal':true, 'refreshPage':true}. When the client receives this response, htmx will fire two events: 1) closeModal, which tells the modal to hide and remove itself. I believe you're already handling this well. And 2) refreshPage, which triggers an event that tells the page itself to load the newest version of its own content. That way, different pages can use the same modal -- for instance, the modal will now work on the "table view" and "cards view" of the dataset, along with the detail view of a specific record. This is accomplished by wrapping the page content with a <div hx-get="https://myserver.com/person/:personId/">...

7. NOTE: I know that this is less efficient, because it uses one more HTTP request and round trip than are absolutely required. And, I know that I could probably stuff more intelligence into this process to make it more efficient. However, the benefits of simplifying my back-end API, along with making these modal dialogs more reusable has been well worth the extra HTTP call. Your mileage may vary.

Here's some sample code for this whole thing. I'm typing it by hand, so there will probably be typos/bugs in the specifics. But, it should help you understand the pattern:

ORIGINAL PAGE

<!-- BEGIN "chrome" wrapper header, including global nav, CSS, scripts, etc (this is just a demo/placeholder)-->
<html>
<head>
<script src="https://unpkg.com/htmx.org"></script>
<script src="https://unpkg.com/hyperscript.org"></script>
<link rel="stylesheet" href="https://the.missing.style"/>
</head>
<body>
<nav>
  <a href="">Home</a>
  <a href="">About</a>
  etc ...
</nav>
<!-- END "chrome" wrapper header-->

<!-- BEGIN "inner" page.  This can be returned separately by the server, without the "chrome" wrapper above and below -->
<div hx-get="http://myserver.com/people?view=table" hx-trigger="refreshPage from:window">
  <table>
    <tr>
      <td>John Connor</td>
      <td>
        <button hx-get="https://myserver.com/people/john-connor/delete">Delete?</button>
      </td>
    </tr>
  </table>
</div>
<!-- END "inner" page -->

<!-- BEGIN "chrome" wrapper footer -->
<aside></aside>
</body>
</html>
<!-- END "chrome" wrapper footer -->

MODAL DIALOG
(Returned with response header: HX-Retarget:aside)

<div id="modal" _="on closeModal add .closing then wait for animationend then remove me">
  <div class="modal-underlay" _="on click trigger closeModal"></div>
  <div class="modal-content">
    <h1>Modal Dialog</h1>

    <form id="otpform" class="ui form" hx-post="https://myserver.com/people/john-connor/delete">
      Delete <b>John Connor</b>?
      <button class="ui button primary" type="submit">Delete</button>
      <button type="button" script="on click trigger closeModal">Cancel</button>
    </form>

  </div>
</div>

The server can now just return an empty document along with the response header HX-Trigger:{closeModal:true, refreshPage:true} which will begin the close animation on the modal and reload the inner part of the original page.

Does this make sense? I hope so. I'm sure you'll need to do some tweaking to this so that it better fits your specific app and API, but hopefully this helps you understand the pattern that I'm using, and is working out really great in my apps.

Best wishes!

[imiten]

Hi @benpate,

Thanks for sharing your pattern. I was thinking on similar lines that I will have to give up on existing pattern that I am using from examples.

1. https://htmx.org/examples/delete-row/ I show in the list using example. The hx-confirm I want alert user of action and grab his YES and show OTP modal.

<button class="btn btn-danger"                                          
                hx-confirm="Are you sure ?" hx-delete="/game/{{ game.id }}">

By original example it was all working fine when I did not have OTP modal in the flow. Now as I have added check as below and I return OTP modal I want to prevent the original case where in on response of success from that call it will delete row:

if not otp:                                                                 
        print(f'GENERATE OTP={get_otp()}')                                      
        return templates.TemplateResponse("otpmodal.html", {                    
            "request": request,                                                 
            "form": {                                                           
               "id": id                                                         
                }                                                               
            }, status_code=422,                                                 
            #headers =  { "HX-Target": "body", "HX-Swap": "beforeend" }         
            headers =  { "HX-Retarget": "#aside" }                              
            )                  

here see I try to prevent client to interpret it as success by returning 422 and so now row is not deleting as I am also using #aside and ReTarget.

Now when OTP modal is submiitted and entered otp maches I return 200 and two events closeModal and confirmed (assuming that confirmed will lead to row deletion from UI) but row is not getting deleted making me feel that that original setup of Delete Row is lost in the process of #aside and ReTarget.

So now I was thinking to add id to each TR and when I revert with confirmed event send it back. That id can be same as game.id. Thus then may be in javascript event handler for confirmed event I can intercept and remove that TR explicitly. Also I see you using refreshPage event that is some thing new I learned. I was not thinking about it to may be try to not have to reload most of page and use AJAX but refreshPage as such also is using AJAX seems on just that DIV though it will be sort of top level div of SPA.

I hope I gave you insight into where I am now. With #aside and ReTarget I am able to cleanup some javascript but am loosing that original framework of DeleteRow example which was working fine for me without OTP Modal.

If I do not use #aside and ReTarget I see that the row gets deleted when I show OTP Modal even for status of 422.

original event path without ReTarget was TR:
[object HTMLTableRowElement],[object HTMLTableSectionElement],[object HTMLTableElement],[object HTMLDivElement],[object HTMLBodyElement],[object HTMLHtmlElement],[object HTMLDocument],[object Window]

now its otpform which I want to point back to TR so it may act on it:
[object HTMLFormElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLBodyElement],[object HTMLHtmlElement],[object HTMLDocument],[object Window]

Regards !

[imiten]

Hi,

I gave some thought and first decided to try what you suggested instead of figuring out and debugging details of htmx and its events etc. I tried monitorEvent and htmx.logAll but could not make much sense.

what you suggested works for now.

here are changes I made to that otp related flow and confirm, modal and deletion (refresh games list) all work fine. that from:window trick is also new learning. thanks for sharing your time and knowledge.

main.py endpoint

@app.delete("/game/{id}", response_class=Response)                              
def delete_game(request: Request, id: int,                                      
        otp: str = fastapi.Form(default=None),                                  
         db: Session = Depends(get_db)):                                        
    """                                                                         
      delete game from database                                                 
      return no content just status code 200 for success.                       
    """                                                                         
                                                                                
    if not otp:                                                                 
        print(f'GENERATE OTP={get_otp()}')                                      
        return templates.TemplateResponse("otpmodal.html", {                    
            "request": request,                                                 
            "form": {                                                           
               "id": id                                                         
                }                                                               
            }, status_code=422,                                                 
            #headers =  { "HX-Target": "body", "HX-Swap": "beforeend" }         
            headers =  { "HX-Retarget": "#aside" }                              
            )                                                                   
    else:                                                                       
        print(f'Verify OTP={otp}')                                              
        v=verify_otp(otp)                                                       
        print(f'verify={v}')                                                    
        if not v:                                                               
            return Response(content='Invalid OTP', status_code=422)             
                                                                                
    print(f"method={request.method} id={str(id)}")                              
    if request.method == 'DELETE':                                              
        try:                                                                    
                                                                                
            db.query(Game).filter(Game.id == id).delete()                       
            db.commit()                                                         
                                                                                
        except Exception as e:                                                  
            print(str(e))                                                       
            #keep only message and avoid details                                
            raise HTTPException(detail=str(e).splitlines()[0], status_code=500) 
    headers = { "HX-Trigger": '{"closeModal" :"", "refresh_games" : ""}' }      
    return Response(headers=headers, status_code=200) 

gamelist.html partial

<table class="ui celled table delete-row-example" id="gamelist"                 
       hx-trigger="refresh_games from:window" hx-get="/games">                  
  <thead>                                                                       
    <tr><th class="four wide">Game Name</th>                                    
    <th class="four wide">Date</th>                                             
    <th class="seven wide">Json</th>                                            
    <th class="one wide"></th>                                                  
  </tr></thead>                                                                 
  <tbody                                                                        
         hx-target="closest tr" hx-swap="outerHTML swap:1s">                    
                                                                                
{% for game in result %}                                                        
{% include 'row_ro.html' %}                                                     
{% endfor %}                                                                    
  </tbody>                                                                      
</table>                                                                        
  <script>                                                                      
    {% if form and form.name.data %}                                            
      alert("Added:" + "{{ form.name.data }}");                                 
    {% endif %}                                                                 
  </script>             

I was now thinking since I am not really using DeleteRow example in true sense that delete animation is not shown how can I instead replace it with Confirm example instead. I see some confirmed event in that example may be I can try that. If clicked yes in that example it will fire /confirmed which I can replace with my delete url and assume it will all work.

[imiten]

I was now able to use HX-Reswap with new 1.8.0 release and so able to get rid of <div id="aside"></div> in otpmodal.html. Feature that you had suggested or pushed for is now available.

further i was able to use body and beforeend values instead of relying on aside.