(09-04-2021, 08:27 PM)kudzu Wrote: Please provide a simple ready to run demo showing this issue. There isnt enough information in this message for us to be able to determine what you are doing in the Javascript.
Create a new IW Application with 2 TIWForm (main form, and secondary form).
in the first one create 2 TIWText and a TIWButton, then connect the page to an html template like this:
MASTER TEMPLATE
Code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
-->
<div class="container-fluid">
$body
</div>
</body>
</html>
PAGE TEMPLATE
Code:
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{%EDIT1%}
{%EDIT2%}
{%BUTTON1%}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
The TIWButton click event creates and displays a new secondary TIWForm. Into the second TIWForm put a "close" TIWButton in order to release the page, so the web applicaton go back to the first page.
In the first html template, a <button> element shows a Bootstrap modal form. In this modal form (div element) are embedded the 2TIWText element generated by Intraweb and the TIWButton. In this modal form, the TIWButton call the new page.
When user click on "close" in this second web page, Intraweb render the first page again from scratch, and the modal form disappears because it was activated by a JavaScript command executed after the IntraWeb page rendering.
The only way I found to show the modal form, is adding this code in IWAppFormRender event (first page);
Code:
procedure TfEdiHome.IWAppFormRender(Sender: TObject);
begin
if openModal then
JavaScript.Text := 'showEditForm=1;'
openModal := false;
end;
The "openModal" boolean var is initialized to false and then assigned to "true" in Delphi code, when opening the second page.
Then create a <script> into the first page html template with this code:
Code:
<script>
var openModal;
$(document).ready(function() {
if (showEditForm) {
$("#modCant").removeClass("fade").modal("show").addClass("fade");
}
});
This way, Intraweb renders the basic page and JavaScript code activates previous html page status (displays the modal form again).
This is a very simple example, in real case I have a DataTables rendered by JavaScript code and others element.
I guess if exists a clever way to accomplish the goal to restore the first page status. Maybe this is only a JavaScript area, not Intaweb.
Alternatively, if it is possible to insert the rendering of a different TIWForm into the existing page. This way the second page can be injected into a <div> (modal form) of the main page, so not status restore is required at all.
