Question

I’m getting this error when trying to post a form through an iFrame. In IE 8. in FF and Opera it works fine.

The short version of the problem is: I’ve got a complex form, which i use JavaScript to turn into a complex json object, and then i turn that into a json string. i add a form into the page with a hidden field for the json string, and clones of the file controls and submit that form w/ a target of my iframe.

Here’s my testing code:

    <div id="testingFormHolder">
<form id="IFrameSubmitForm">
    <input type="text" id='testText' name='testText' />
    <input type="file" id='testFile23' name='testFile' cfid="23" />
    <input type="file" id='testFile24' name='testFile' cfid="24" />
    <input type="button" id='testSubmit' name='testSubmit' />
</form>

</div>

<div id="TempFormHolder">

</div>
<div id="IFrameHolder" class="">

</div>

<script type="text/javascript">
    $(function () {
        $('#testSubmit').click(function () {
            var fileControls = $('#testingFormHolder').find('input[type=file]');
            var otherDataObject = { "field1": 'blah blah field 1', "field2": "field2" };
            var iframe = $('<iframe name="theIFrame" id="theIFrame" class="" src="about:none" />');
            var theFileNames = new Array();
            var thefiles = $('#testingFormHolder').find('input[type=file]');
            thefiles.each(function () {
                theFileNames.push({ cfid: $(this).attr('cfid'), FileName: $(this).val() });
            });

            otherDataObject.fileNames = theFileNames;
            var otherData = JSON.stringify(otherDataObject);

            $('#IFrameHolder').empty().append(iframe);

            var theForm = $('<form id="TempForm" name="TempForm">');
            fileControls.each(function () {
                theForm.append($(this).clone().attr('name', 'files').attr('id', $(this).attr('customFieldId')));
            });
            // theForm.append(fileControl.clone().attr('name', 'files').attr('id', 'file1'));
            theForm.append($("<input type='text' id='model' name='model' value='" + otherData + "' />"));

            theForm.attr('action', '<%= Url.Action(MVC.Temp.Actions.TestingFormSubmitThroughIFrame)%>');
            theForm.attr('method', 'POST');
            theForm.attr('enctype', 'multipart/form-data');
            theForm.attr('encoding', 'multipart/form-data');
            theForm.attr('target', 'theIFrame');
            $('#TempFormHolder').empty().append(theForm);

            theForm.submit();
           // $('#theIFrame').load(function () {


           // });

            return false;

        });

    });

</script>

i’m using asp.net mvc. while i was searching for an answer i came across a page that said something about mixing http and https but i’m just running it w/ local host. the address of the test page is:
http://localhost:60819/Temp/Testing/
and the ‘<%=Url.Action(MVC.Temp.Actions.TestingFormSubmitThroughIFrame)%>’ = “/Temp/TestingFormSubmitThroughIFrame”

edit: and changing the action to be the full address instead of just “/Temp/TestingFormSubmitThroughIFrame” didn’t fix it.

Thanks for the help!

Edit: Sorry about that, i thought it copied the entire error message! the full error message is:

“Navigation to the webpage was canceled”
“What you can try:
Retype the address.

“

that comes up in my iframe when it tries to submit. it doesn’t even attempt to make the post.

Answer 1

Well, i switched to using the jquery.form plugin and it seems to work! I’m not sure what it’s doing differently. but i would suggest it to anyone, it’s pretty damn easy to use! I don’t know why i didn’t use it in the first place!

Here’s what the code looks like now:

<script type="text/javascript">

        $(function () {
            $('#testSubmit').click(function () {
                var fileControls = $('#testingFormHolder').find('input[type=file]');
                var otherDataObject = { "field1": 'blah blah field 1', "field2": "field2" };

                var theFileNames = new Array();

                fileControls.each(function () {
                    theFileNames.push({ CustomFieldId: $(this).attr('customFieldId'), FileName: $(this).val() });
                });

                otherDataObject.cfNames= theFileNames;
                var otherData = JSON.stringify(otherDataObject);
                $('#TempFormHolder').empty();
                var theForm = $('<form id="TempForm" name="TempForm" action="http://localhost:60819/Temp/TestingFormSubmitThroughIFrame" />').appendTo('#TempFormHolder');
                fileControls.each(function () {
                    theForm.append($(this).clone().attr('name', 'files'));
                });


                theForm.append($("<input type='text' id='model' name='model' value='" + otherData + "' />"));

                theForm.ajaxSubmit({ target: '#ResultTarget' });

                return false;

            });

        });

    </script>

Hopefully That helps someone out in the future.