3

I am building a page in MVC, with a download button and an upload button. When the user clicks upload, I am using JQuery UI Dialog to show a popup to show a warning message. When clicking the 'Ok' button on this popup, I then use Jquery to submit the form. This works fine in Firefox but the form doesn't submit in IE.

The view

<form id="form1" enctype="multipart/form-data" method="post">
    <div style="clear:both; margin-top:10px">      
        <fieldset>
            <legend>Legend</legend>

            <div style="float:right">
                <input type="file" name="file" id="file" style="display:none" onchange="SetFakeText();"/>
                <input id="txtFakeText" readonly="readonly" onclick="HandleFileButtonClick();" style="width:280px"/>

                <input type="button" id="cmdFakeButton" value="Browse" onclick="HandleFileButtonClick();"/>                
                <input type="button" id="ReUploadButton" value="Upload"/>  
            </div>

            <input type="submit" name="submitButton" value="Download" />

        </fieldset>
    </div>

    <div id="dialog">
        <label style="font-weight:bolder; color:red;">Warning!</label>
        <br />
        <label>Uploading will overwrite old data</label>
        <br />
        <img id="loading" src="<%= ResolveUrl("~/Images/LoadingSpinner.gif")%>" alt="" style="display:none; margin-left:120px;"/>  
    </div> 
</form>

The Script

<script type="text/javascript">
    function HandleFileButtonClick() {
        document.getElementById('file').click();
    };

    function SetFakeText() {
        document.getElementById('txtFakeText').value = document.getElementById('file').value;
    };

    $('#ReUploadButton').click(function() {
        $('#dialog').dialog('open');
    });

    $(function(){                       
    $('#dialog').dialog({
    autoOpen: false,
    width: 300,
    position: 'center',
    title: 'Uploading',
    modal: true,
    buttons: {
        'Ok': 
        function () {
            document.getElementById('loading').style.display = 'block';
        $('#form1').submit();
                }, 
        'Cancel': 
        function() { 
        $(this).dialog("close"); 
        } 
    }
    });             
});    
</script>

I have read around and the common fixes didn't work. Does anyone have any tips?

EDIT:

Also, if I click the 'Ok' button of the dialog 3 times, it triggers the controller action, but doesn't pass in the file.

Resolved

After making the 'real' input visible. Using the real input browse button will allow the form to submit. But using the fake Browse button which calls:-

function HandleFileButtonClick() {
        document.getElementById('csvFile').click();
    };

Causes the problem. I will use a different method to style my input field.

4
  • Any debug info? Is the function getting called in IE? Does the loading div appear?
    – Dave
    Jun 20, 2011 at 14:42
  • The dialog pops up fine, and the loading div appears. I've got a break point on my controller action but the code doesn't reach it.
    – Joe
    Jun 20, 2011 at 14:45
  • What's $("#form1").size() in IE?
    – Dave
    Jun 20, 2011 at 14:48
  • I added alert($("#form1").size()); to the 'Ok' button code and it pops up a '1'.
    – Joe
    Jun 20, 2011 at 14:52

2 Answers 2

2

If you append the dialog to the form element does it fix your problem? (By default jQuery appends the dialogs to the body tag)

$(function(){                       
    $('#dialog').dialog({
      autoOpen: false,
      width: 300,
      position: 'center',
      title: 'Uploading',
      modal: true,
      buttons: {
        'Ok': 
        function () {
            document.getElementById('loading').style.display = 'block';
        $('#form1').submit();
                }, 
        'Cancel': 
        function() { 
        $(this).dialog("close"); 
        } 
      }, 
      open: function(){
         $('.ui-dialog').appendTo('form');
      }
    }); 

If this is .NET, I've seen .NET do some whacky things when the elements aren't inside the form tag

Edit: try targeting the .ui-dialog instead of $(this)

3
  • Thanks for the answer, this seems to pull the elements from my dialog out of the dialog popup into the form underneath it. And the Form still won't submit. The dialog div is inside the form to begin with so I don't think this is the problem. Thanks again though.
    – Joe
    Jun 20, 2011 at 15:24
  • @Joe the HTML jQuery uses to create the dialog will be inside the form, but the dialog that's actually created will be appended to the body tag. Use firebug or Chrome tools to see this. Anyway I updated my answer, try targeting the .ui-dialog element instead of $(this)
    – Mutt
    Jun 20, 2011 at 15:31
  • Your right, I hadn't realized that it's added at the end of the body. I added your new code but the form still doesn't submit. There are no script errors, everything gets called but the controller action isn't triggered.
    – Joe
    Jun 20, 2011 at 15:41
0

Maybe you should add an action to the form, even if it's an empty one?

Not sure if there is maybe something else in your code causing the problem as I can't replicate a problem

see my fiddle

1
  • Thanks for the suggestion, I've tried adding an action but the form still doesn't submit. I started stripping down my page and found that the fake input with styling is causing the problem. I'll post the answer when I know exactly what it is.
    – Joe
    Jun 20, 2011 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.