Question

I’m trying to create a simple JQuery UI modal dialog populated with a loaded URL. I have it working on IE (it even works on IE6!!), FF, Safari AND Chrome for Windows (version 4.1.249.1042 (42199)). For some reason is just doesn’t work in Chrome OS X. I’m using Chrome version 5.0.342.7 beta. The modal dialog pops up just as it does in every other browser, the title is populated correctly, but the content is blank. The response from the load function is always successful, but empty.

I suspect the OS X version of Chrome is just buggy, but is there anything particularly wrong with this code:

    jQuery(document).ready(function($) {

    $("#htmlDialog").dialog( 
            {   autoOpen: false,
                modal: true,
                height: 530, 
                width: 675, 
                maxHeight: 530, 
                maxWidth: 675
            });

    $("a.modal")
       .click(function(e) {
           e.preventDefault();
           $("#htmlDialog").load(this.href, function(response, status, xhr) {
               if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    $("#error").html(msg + xhr.status + " " + xhr.statusText);
                } else {
                    $(this).dialog("open");
                }
           });

       });

});

… and this is the link: (the page being loaded is a very simple html page)

<a class="modal" href="./default.html">whatever</a>

… and of course the htmlDialog div:

<div id="htmlDialog" title="Html dialog">Boo!</div>

Any help would be appreciated. Thanks!

Answer 1

Oops. I forgot to answer my own question. Apologies.

After much testing, I discovered that the problem with Chrome OS X was that it was unable to load a file directly from the file system like other Chrome versions. If, however, I ran the jQuery code from a web server, it worked as expected.