jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs

Admin 1
Viewed 128412

The AJAX tabs work perfectly well. It's pretty straightforward with that part. However, getting the AJAX UI Dialog modal window to trigger off of a link has been unsuccessful.

Any help in this would be appreciated.

modal-dialog jquery-ui jquery
8 Answers

To avoid adding extra divs when clicking on the link multiple times, and avoid problems when using the script to display forms, you could try a variation of @jek's code. 

$('a.ajax').live('click', function() {
    var url = this.href;
    var dialog = $("#dialog");
    if ($("#dialog").length == 0) {
        dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
    } 

    // load remote content
    dialog.load(
            url,
            {},
            function(responseText, textStatus, XMLHttpRequest) {
                dialog.dialog();
            }
        );
    //prevent the browser to follow the link
    return false;
});`
user_5254990

//Properly Formatted 

<script type="text/Javascript">
  $(function ()    
{
    $('<div>').dialog({
        modal: true,
        open: function ()
        {
            $(this).load('mypage.html');
        },         
        height: 400,
        width: 600,
        title: 'Ajax Page'
    });
});

user_1860620

Just an addition to nicktea's answer. This code loads the content of a remote page (without redirecting there), and also cleans up when closing it.

<script type="text/javascript">
    function showDialog() {
        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load('AccessRightsConfig.htm');
            },
            close: function(event, ui) {
                    $(this).remove();
                },
            height: 400,
            width: 600,
            title: 'Ajax Page'
        });

        return false;
    }
</script>
user_12225170

I have combinded few of the answer and came up with below is JQuery code to open the external url in modal dialog box.

<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js" integrity="sha256-PsB+5ZEsBlDx9Fi/GXc1bZmC7wEQzZK4bM/VwNm1L6c=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<body>
    <a href="https://wikipedia.com/" class="test">comment #1</a>
    <br>
    <a href="https://ebay.com/" class="test">comment #2</a>
    <br>
    <a href="https://ask.com/" class="test">comment #3</a>
    <br>
    <a class="ajax" href="https://api.github.com">Open github</a>
    <br>
    <a class="ajax" href="https://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity">Open code google</a>
    <br>
    <a class="ajax" href="https://enable-cors.org/">Open enable-cors</a>
    <br>
    <div id="somediv" title="this is a dialog" style="display:none;">
        <iframe id="thedialog" width="350" height="350"></iframe>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
        $(".test").click(function () 
        {
            var url = $(this).attr("href");
            return openDialogwithiFrame(url);
        });
        });
    </script>
    <script type="text/javascript">
        $(function (){
            $('a.ajax').click(function() {
                var url = this.href;
                return openDialogwithiFrame(url);
            });
        });
        
        function openDialogwithiFrame(url)
        {
            $("#thedialog").attr('src', url);
            $("#somediv").dialog({
            width: 400,
            height: 450,
            modal: true,
            close: function () {
            $("#thedialog").attr('src', "about:blank");
            }
            });
            return false;
        }
        
        function openDialogwithoutiFrame(url)
        {
                // show a spinner or something via css
                var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
                // open the dialog
                dialog.dialog({
        // add a close listener to prevent adding multiple divs to the document
                    close: function(event, ui) {
                        // remove div with all data and events
                        dialog.remove();
                    },
                    modal: true
                });
                // load remote content
                dialog.load(
                    url, 
                    //{},  omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                    function (responseText, textStatus, XMLHttpRequest) {
                        // remove the loading class
                        dialog.removeClass('loading');
                    }
                );
                //prevent the browser to follow the link
                return false;
        }
    </script>
</body>
</html>

The code has two function.

  1. openDialogwithiFrame(url) :- This can open any external url in the model dialog. But it uses iframe.
  2. openDialogwithoutiFrame(url):-This also open the external urls in the model dialog but one which has header “Access-Control-Allow-Origin” to correct value. I have put such url in the code for samples. This setting needs to be done at web server. Ref https://medium.com/pareture/simple-local-cors-test-tool-544f108311c5. For setting header “Access-Control-Allow-Origin” at Apache web server following below should de added in .htaccess of Apache server.

    Header set Access-Control-Allow-Origin “*” //Replace domain of host sites separated by comma for *
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS"
    Header always set Access-Control-Allow-Headers "content-type "
    Header always set Access-Control-Allow-Credentials "true"
user_36679670
altCognito_389710
Related