Question

I’m using uploadify fileupload control in my MVC3 application.

I saw very strange behaviour of jQuery Dialog.

I’m using a flash Browse button in my view. When the button is clicked, it shows all the directories to browse and upload the selected file and gets uploaded.

At first, i’ve tried without jQuery Dialog box. It works perfect and upload the files and able to cancel the files in all the browsers.

When i used container to render in jQuery Dialog box, the Browse button showing in Firefox,but i’m unable to click the button and it works in IE and in Chrome it works but it is unable to cancel the upload in Chrome.

Here is my code:

HTML Code in my view :

<input type="button" id="btnImg"/>
    <div id="fileupload">
        <div style="clear: none;">
            File to Upload:
            <input type="file" name="file_upload" id="file_upload" style="padding-left: 50px;"/><hr />
        </div>
        <p style="text-align: right;">
            <input type="submit" id="selectimage" value="Ok" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
            <input type="submit" id="cancelimage" value="Cancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="cancelupload();" />
        </p>
    </div>

Javascript code :

$("#btnImg").click(function () {
    $("#fileupload").dialog({
        width: '511',
        height: '200',
        show: "blind",
        position: [300, 500]
    });
});

When btnImg is clicked, the popup is raised.

How to fix this? How did this happen ?

Answer 1

I could solve my problem.

Here is the solution to it.

$("#btnImg").click(function () {
            $("#fileupload").css("visibility", "visible");
            $("#fileupload").dialog({
                width: '511',
                height: '200',
                modal:true,
                //show: "blind",
                position: [300, 500],
                open: function (type, data) {
                    $(this).parent().appendTo("form");
                }
            });
        });

The problem is that my div is not within the form tag. So, jQuery ignores the window upload if it is not nested within the form tag.