jQuery Modal Dialog, ie6 secure non-secure error, https ssl

(Please don't bother asking why we support ie6.)

We're creating custom Alert/Confirms using the jQuery Modal Dialog. I've created a div with xsl (In the examples, I took some of the xsl out and put in raw html to avoid confusion). The div is triggered using jQuery. I wrote a couple functions (that essentially open the dialog, pass a message, and a function) so we can implement the new alert/confirm using javascript (basically replacing alert(); with uiAlertError();).

Some of this information is not important. I can get more specific, but the main issue here is that in ie6 I get a "This page contains both secure and nonsecure items, Do you want to display the nonsecure items?" error. Everything works correctly in ie7, ie8, firefox, safari, and chrome.

From what I've read there are some common issues such as: http:// needing to be https:// (or http:// to //, change to relative oppo开发者_Go百科sed to absolute), src's that are empty, mixed content, etc. The underlying theme of all of this (from what I've gathered) is getting things to load secure, since we're on a secure page. But this is not my issue!

I've isolated the problem down to the something to do with jQuery (I tested the new code; got the error. Commented the new code out; error went away. I uncommented the xsl, but left the jQuery commented out; error was still gone. Commented the jQuery back in, the error came back).

Here is the javascript:

Here are the functions I wrote to replace the alert(); :

function uiAlertError(msg, ok_func){
    document.getElementById('alert_id_img').src="images/dialog_warning.png";
    uiAlert(msg, ok_func);
}
function uiAlertCheck(msg, ok_func){
    document.getElementById('alert_id_img').src="images/dialog_check.png";
    uiAlert(msg, ok_func);
}
function uiAlert(msg, ok_func){
    document.getElementById('alert_id_msg').innerHTML = msg;
    $("#alert_id").dialog("open");

    $("#alert_ok").click(function(){
        if(ok_func == undefined || ok_func == ''){
            $("#alert_id").dialog("close");
        }else{
            eval(ok_func);
            $("#alert_id").dialog("close");
        }
    });
}

Here is the jQuery:

$(function() {
    $("#alert_id").dialog( "destroy" );

    $("#alert_id").dialog({
        width: 325,
        modal: true,
        resizable: false,
        draggable: false,
        minHeight: 90,
        autoOpen: false
    });
});

I'm sure it has something to do with either my jQuery implementation or jQuery itself.

This page is not hosted publicly.

Thanks for the help! Tony

I have the same issue working with jquery and xslt + ajax on IE6.

The problem is the destroy. Put an alert(1) before the destroy and alert(2) after it, and you will see that the mixed security occurs between.

In my code it looks something like this:

    $("#box").dialog("close");
    alert(1);
    $("#box").dialog('destroy').remove();
    alert(2);

I'm still looking for a better way of disposing of the dialog, since I'm using ajax, the page keeps #box around and then you have 2 instances of #box if not properly disposed.

I think the problem is that same as my one in another question - there's a bug in the jQuery UI 1.8 CSS:

.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;
    /* http://bugs.jqueryui.com/ticket/7233
     - Resizable: resizable handles fail to work in IE if transparent and content overlaps
    */
    background-image:url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=);
}

Not only do IE6 and 7 not support data URIs, but any such base 64 strings are treated by IE as a nonsecure resource.

Replace this line with:

background-image:url(blank.gif);

Where blank.gif is a 1x1 transparent GIF and the error is fixed!

It looks like the jQuery UI guys are aware of the issue, and it's fixed in 1.9 and above.