Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 50 down vote favorite
35

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 un-succesful.

Any help in this would be appreciated.

share|improve this question

6 Answers

up vote 112 down vote

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

share|improve this answer
1  
Thanks, this helped me! – Preston Marshall Aug 16 '10 at 1:40
this example doesn't work for me.. uploaded to my server. – FFish Sep 30 '10 at 16:20
@FFish updated answer with a note about cross domain ajax. You cannot just copy'n'paste the source unless you can upload files to google.com ;) – jek Oct 1 '10 at 12:41
2  
jquery.load does not seem to ejecute the javascript contained in the remote content – Guido García Jan 9 '11 at 20:53
1  
regarding embedded <script></script> tags i've never got any problems to get those executed. even multiple occurences worked fine. nevertheless debugging those script chunks is indeed a hazzle, e.g. a syntax error won't show as js error in the browsers console but just avoids the script execution. – jek Jan 18 '11 at 9:17
show 10 more comments
up vote 31 down vote

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;
});`
share|improve this answer
2  
Good point indeed.. would you mind if I include this tweak in my original answer? – jek Feb 18 '11 at 9:08
2  
@jek no problem! – CGK Feb 18 '11 at 15:56
The following page diggs nicely into such issues and uses jQuery's one() function to accomplish the same functionality: blog.nemikor.com/category/jquery-ui/jquery-ui-dialog Since it uses dialog('open') it does not need special close() treatment. – Richard Kiefer Mar 20 '12 at 14:43
up vote 22 down vote

//Properly Formatted 

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

share|improve this answer
This is definitely the best and cleanest answer. – Zaptree Jan 26 '12 at 17:31
a couple of things missing; you should "return false", and jQuery recommend explicitly closing tags $("<div></div>") – Matthew Rudy May 4 '12 at 8:30
up vote 5 down vote

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;
      });
});
share|improve this answer
1  
You can actually prevent the default action in the function by using: $('..').live('click', function(event) { event.preventDefault(); ... }); This way you can omit the return false; and prevent accidental triggery of the default click event. – plaes Dec 13 '11 at 9:29
As stated in response to CGK's answer, you may also be interested in this solution: blog.nemikor.com/2009/08/07/creating-dialogs-on-demand/… especially for multiple dialog elements – Richard Kiefer Mar 20 '12 at 14:51
up vote 5 down vote

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>
share|improve this answer
up vote 0 down vote 
<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.

share|improve this answer
1  
Actually, I'm not sure this is what you're looking for, I'll come back and update unless someone else picked it up. Can you clarify what is causing the issue? – altCognito Apr 30 '09 at 21:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.