Modal in not teleported on "html reload"

[mvorisek]

Steps to reproduce:

1. open https://dev.agiletoolkit.org/demos/interactive/tabs.php
2. click "Modal popup" tab
3. click "Load Lorem" button
4. click on the dimmer background to close the modal
5. click "Static Tab" tab
6. click "Modal popup" tab again
7. click "Load Lorem" button
8. click on the dimmer background to close the modal
9. repeat step 7 - and notice, the modal is empty! (the modal load AJAX is not even sent)

[mvorisek]

This issue is kind of #2151.

When the subcontent is loaded using html (as Tab view is - https://github.com/atk4/ui/blob/48213c1836/src/TabsTab.php#L37), then the (previously loaded) modal div is not removed as this is code only when loaded using json - https://github.com/atk4/ui/blob/48213c1836/js/src/Service/apiService.js#L89

Repro code:

<?php

declare(strict_types=1);

namespace Atk4\Ui\Demos;

use Atk4\Ui\App;
use Atk4\Ui\Button;
use Atk4\Ui\Js\JsExpression;
use Atk4\Ui\Modal;
use Atk4\Ui\View;
use Atk4\Ui\VirtualPage;

/** @var App $app */
require_once __DIR__ . '/../init-app.php';

$v = View::addTo($app);
$v->setStyle('margin', '10px');

$vp = VirtualPage::addTo($v, ['ui' => '']);
$vp->set(static function (VirtualPage $vp) {
    $modal = Modal::addTo($vp, ['name' => 'mmm'])->set(static function (View $p) {
        View::addTo($p, ['modal text...']);
    });

    Button::addTo($vp, ['Show modal'])->on('click', $modal->jsShow());
});

$vpTargetView = View::addTo($v);
/* Button::addTo($v, ['Reload wrapping'])->on('click', new JsExpression(<<<'JS'
        const $elem = $([elem]);
        let apiSettings = {
            dataType: 'html',
            on: 'now',
            cache: false,
            onSuccess: function (response) {
                $elem.html(response);
            },
            url: [url],
            data: { __atk_tab: 1 },
        };
        $elem.api(apiSettings);
        JS, ['elem' => $vpTargetView, 'url' => $vp->getUrl('cut')])); */

$app->layout->js(true, new JsExpression(<<<'JS'
        atk.repro_script = function () {
            $('#mmm').modal([ ]);
            $('#mmm').data({
                'type': 'json',
                'loadingLabel': 'Loading...',
                'url': '?__atk_cb_atk_layout_view_virtualpage=cut&__atk_m=mmm&__atk_cb_mmm_view_callbacklater=ajax&__atk_cbtarget=mmm_view_callbacklater&__atk_json=1',
            });
            $('#atk_layout_view_virtualpage_button').on('click', function (event) {
                event.preventDefault();
                event.stopPropagation();
                $('#mmm').modal('show');
            });
        };
        JS));

Button::addTo($v, ['Reload wrapping from str'])->on('click', new JsExpression(<<<'JS'
        const $elem = $([elem]);
        $elem.html([response]);
        JS, ['elem' => $vpTargetView, 'response' => <<<'HTML'
        <script>
        'use strict';
        $(function () {
            atk.repro_script();
        });
        </script>
        <div id="atk_layout_view_virtualpage" class="ui ">
            <div id="mmm" class="ui modal">
                <i class="close icon"></i>
                <div class="img content atk-dialog-content">
                    <div id="mmm_view"></div>
                </div>
            </div>
            <div id="atk_layout_view_virtualpage_button" class="ui button">Show modal</div>
        </div>
        HTML]));