CODEWITHSUNDEEP
jqueryjquery-uimodal-dialog

Reputation:

jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs

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.

Upvotes: 58

Views: 128784

Answers (8)

skvp
skvp

Reputation: 2000

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"

Upvotes: 0

Andreas
Andreas

Reputation: 715

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>

Upvotes: 11

jek
jek

Reputation: 2396

Nothing easier than that man. Try this one:

<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <style>
        .loading { background: url(/img/spinner.gif) center no-repeat !important}
    </style>
</head>
<body>
    <a class="ajax" href="http://www.google.com">
      Open as dialog
    </a>

    <script type="text/javascript">
    $(function (){
        $('a.ajax').click(function() {
            var url = this.href;
            // 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>

Note that you can't load remote from local, so you'll have to upload this to a server or whatever. Also note that you can't load from foreign domains, so you should replace href of the link to a document hosted on the same domain (and here's the workaround).

Cheers

Upvotes: 120

Cory
Cory

Reputation: 24260

Neither of the first two answers worked for me with multiple elements that can open dialogs that point to different pages.

This feels like the cleanest solution, only creates the dialog object once on load and then uses the events to open/close/display appropriately:

$(function () {
      var ajaxDialog = $('<div id="ajax-dialog" style="display:hidden"></div>').appendTo('body');
      ajaxDialog.dialog({autoOpen: false});
      $('a.ajax-dialog-opener').live('click', function() {
          // load remote content
          ajaxDialog.load(this.href);
          ajaxDialog.dialog("open");
          //prevent the browser from following the link
          return false;
      });
});

Upvotes: 5

nicktea
nicktea

Reputation: 251

//Properly Formatted 

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

Upvotes: 25

user656530
user656530

Reputation:

curious - why doesn't the 'nothing easier than this' answer (above) not work? it looks logical? http://206.251.38.181/jquery-learn/ajax/iframe.html

Upvotes: 0

CGK
CGK

Reputation: 2662

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;
});`

Upvotes: 34

cgp
cgp

Reputation: 41381

<a href="javascript:void(0)" onclick="$('#myDialog').dialog();">
  Open as dialog
</a>

<div id="myDialog">
I have a dialog!
</div>

See the example I posted on jsbin.com.

Upvotes: -1

Related Questions