jquery dialog versus iframe

The below code is set up with jquery 1.4.2 and UI 1.8.4, plus the jquery iframe plugin.

The insides of the iframe disappear when I call .dialog(...). If I comment out the call to .dialog, the content is there in the iframe: visible in the window and also in the Chrome inspector. If I put the dialog back, the dialog appears just fine, but the iframe is empty.

I tried to put the squirt call in a dialog open handler, but that had no effect.

Note in passing that without the appendTo the iframe plugin defererences null on the call to squirt.

    var horizontalPadding = 30;
    var verticalPadding = 30;
    var iframe = $('<iframe id="update_iframe"></iframe>').appendTo("body");
    var iframe_html = '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;';
    iframe_html = iframe_html + "\n<html><head><title></title></head><body>";
    iframe_html = iframe_html
            + "<form action='/rex-ws/service/jape/update_file/";
    iframe_html = iframe_html + file;
    iframe_html = iframe_html + "' ";
    iframe_html = iframe_html + "method='POST' enctype='multipart/form-data'>";
    iframe_html = iframe_html + "<div>";
    iframe_html = iframe_html
            + "<label for='update_data'>Select new file content:</label>";
    iframe_html = iframe_html
            + "<input type='file' name='data' id='update_data' />";
    iframe_html = iframe_html + "</div>";
    iframe_html = iframe_html + "</form>";
    iframe_html = iframe_html + "</body></html>";
    iframe.squirt(iframe_html, function() {});

    iframe.dialog({
        title: 'Select new file content',
    autoOpen: true,
    width: 800,
    height: 500,
    modal: true,
    resizable: false,
    autoResize: true,
    overlay: {
    opacity: 0.5,
    background: "black",

    }
    }).width(800 - horizontalPadding).height(500 - verticalPadding);

ansaurus

tags:

views:

answers:

jquery dialog versus iframe

related questions