topic-41308

Posts: 6984

Joined: Fri Oct 07, 2005 07:07 PM

modal dialog
Posted: Sat Jan 15, 2022 05:28 AM

I write down what problems I faced with the modal dialog.

HTML 5 modal dialog on modal dialog is not supported

Autocomplete
Autocomplete Appearing behind the Modal popup

https://stackoverflow.com/questions/223 ... odal-popup

Thanks, I upvoted because this solved my problem within seconds of searching for a solution. You can use an element's ID in the appendTo option like so appendTo: "#your_element_id".

Code (fw): Select all Collapse

    <p>Modified Behavior<br>
    <input id="autocomplete2" type="text" placeholder="U.S. state name">
    <input id="autocomplete2-value" type="text" name="code"></p>
<script>
    /*
     * jQuery UI Autocomplete: Using Label-Value Pairs
     * <!-- m --><a class="postlink" href="https://salman-w.blogspot.com/2013/12/jquery-ui-autocomplete-examples.html">https://salman-w.blogspot.com/2013/12/j ... mples.html</a><!-- m -->
     */
    var data = [
        { value: "AL", label: "Alabama" },
        { value: "AK", label: "Alaska" },
        { value: "WI", label: "Wisconsin" },
        { value: "WY", label: "Wyoming" }
    ];
    $(function() {
        $("#autocomplete2").autocomplete({
            source: data,
            focus: function(event, ui) {
                // prevent autocomplete from updating the textbox
                event.preventDefault();
                // manually update the textbox
                $(this).val(ui.item.label);
            },
            select: function(event, ui) {
                // prevent autocomplete from updating the textbox
                event.preventDefault();
                // manually update the textbox and hidden field
                $(this).val(ui.item.label);
                $("#autocomplete2-value").val(ui.item.value);
            },
            appendTo: "#editModal"

        })
        
    });
</script>

Antonio Linares

Posts: 44162

Joined: Thu Oct 06, 2005 05:47 PM

Re: modal dialog
Posted: Sat Jan 15, 2022 09:57 AM

Dear Otto,

First solution here seems to work fine: (run the provided code snippet button in the solution)
https://stackoverflow.com/questions/19528173/bootstrap-open-another-modal-in-modal

regards, saludos

Antonio Linares
www.fivetechsoft.com

Otto

Posts: 6984

Joined: Fri Oct 07, 2005 07:07 PM

Re: modal dialog
Posted: Sat Jan 15, 2022 01:50 PM

Dear Antonio,

It seems that this example is with
Bootstrap 5 (beta). Here it is still working.

Ruth tested with the release, and she also found a link where they tell that it is not supported anymore.

For the new WINHOTEL online we changed all the LIBs to the latest one and try to start as clean as possible: your mod harbour - jquerry and bootstrap and all with the most updated versions.

Now she changed the modal dialog to a collapse which is working fine.

We are also trying an autocomplete input. This seems even better and more Fivewin like.

Best regards,
Otto

FiveTech Support Forums

Continue the discussion