Question

I’m trying to use jQuery Form Plugin to handle file uploads in an ajax form.

Everything works as long as I don’t have an input[type=file] in the form.

When I add a file input type to the form, it will upload the file and work as it is supposed to in FireFox, but I get this error in Chrome:

Unsafe JavaScript attempt to access
frame with URL
http://swbdev.net:8888/inc/ajax/edit_page/
from frame with URL
http://swbdev.net:8888/site-pages-edit/19d8bb79c95e164f736f324d1b09a33e/1/#add_elements.
Domains, protocols and ports must
match.

It clearly states the Domain, protocols and ports must match. Am I missing something, in that same error it shows the two URLs and the domain, protocol and port all match?

Here is the JavaScript calling the plugin:

    <script type="text/javascript">
$(document).ready(function() { 
    var options = { 
        success:    function(data) { 
            alert(data); 
        },
        dataType: 'html',
        url: '/inc/ajax/edit_page/'
    }; 
    $('#add_elements_form').ajaxForm(options); 
 });
</script>

MORE INFO:

It’s now failing in FireFox as well, not sure why it worked earlier, but here is the error in FireFox:

Permission denied for
http://swbdev.net:8888 to get
property Location.href

It points to this area of code in the plugin:

            function cb() {
            if (xhr.aborted) {
                return;
            }
            var doc = io.contentWindow ? io.contentWindow.document : io.contentDocument ? io.contentDocument : io.document;
            if (!doc || doc.location.href == s.iframeSrc) {
                // response not received yet
                if (!timedOut) return;
            }
            io.detachEvent ? io.detachEvent('onload', cb) : io.removeEventListener('load', cb, false);
            var ok = true;

Specifically, this line:

 if (!doc || doc.location.href == s.iframeSrc

Answer 1

Definitely weird. I would try setting the whole thing to “POST” since the input[type=file] will require that. Of course it should work even mixed, but give this a try.

$(document).ready(function() { 
    var options = { 
        success:    function(data) { 
            alert(data); 
        },
        dataType: 'html',
        type: 'POST',   // <-- This was added
        url: '/inc/ajax/edit_page/'
    }; 
    $('#add_elements_form').ajaxForm(options); 
});