# Other Languages > jQuery >  [RESOLVED] Ajax upload confusion

## szlamany

Ok - I've got this HTML - and it's working - dumping the return results into *target="upload_target"*.  Originally it was causing my page to reload - or dump into a new tab of the browser - until I found the TARGET setting.



```
<form id="upload" action="Upload.ashx" method="post" enctype="multipart/form-data" target="upload_target">
    <div>
        <label>
            <input type="file" name="file" multiple>
        </label>
        <br /><br />
        <button type="submit" class="acs-upload-button ui-button ui-widget ui-state-highlight ui-corner-all ui-button-text-icon-acs-use ui-button-text-icon-primary" role="button" aria-disabled="false">Upload</button>
    </div>
    <iframe id="upload_targe" name="upload_target"></iframe>
</form>
```

I'm trying to switch it to this JavaScript.



```
        function initFileUploader(strId) {
            $("form").on("click", "button[type=submit]", function (evt) {
                $.ajax("Upload.ashx", {
                    files: $(this).parent().find(":file"),
                    iframe: true
                }).complete(function(data) {
                    var returnObj = $.parseJSON(data.responseText);
                    var updArr = returnObj.update || [];
                    var strData = "";
                    var wesAWC = [];
                    for (var i = 0; i < updArr.length; i = i + 2) {
                        strData = updArr[i + 1];
                        wesAWC = $("#" + strId + " .awc-" + updArr[i]).not(".acs-edit-view-hidden");
                        p_fillField(wesAWC, strData, strId, updArr[i], false);
                    }
                    if (returnObj.ok) {
                        errorMessage("Upload Complete", returnObj.message);
                    } else {
                        errorMessage("Upload DID NOT Complete", returnObj.message);
                    }
                });
            });
        }
```

This function does work - properly processing the return results instead of dumping them into a single target.  Problem is that this function tries to reload the page.  

I can't even find jQuery docs that talk about the FILES: and IFRAME: options.

Very confused here...

----------


## szlamany

Ok - I found that the *files:* and *iframe:* options are not part of the standard jQuery .ajax api - it's something I found on the internet that needs another library to support it - so I abandoned that.

I did get this working nicely with the submit on the form with a iframe as the target.  This is what I ended up with in case someone else wants to do an ajax-like upload (without refreshing the page).



```
<form id="form1" onsubmit="return false;" runat="server">
    <div id="acs-edit-processnamesprocess" style="padding-left: 10px; padding-top: 10px;">
        <div class="acs-edit-full">
            <div class="acs-div-p acs-edit-view-1">
                <span class="acs-span-large">Process Key</span>
                <label class="awc-ProcessKey awc-ctrlval2 acs-edit-small-text acs-edit-important"></label>
                <br /><br />
                Step #1 - Browse for file to upload and click Upload button
                <br />
                <br />
                <form id="upload" action="Upload.ashx" method="post" enctype="multipart/form-data" target="upload_target">
                    <div>
                        <label>
                            <input type="file" name="file" multiple>
                        </label>
                        <br /><br />
                        <button type="submit" class="ui-button ui-widget ui-state-highlight ui-corner-all ui-button-text-icon-acs-use ui-button-text-icon-primary" role="button" aria-disabled="false">Upload</button>
                    </div>
                <iframe id="upload_target" name="upload_target">
                    <html>
                        <head></head>
                        <body id="#upload_results"></body>
                    </html>
                </iframe>
                </form>
                <ul id="filelist">
                </ul>
                <br />
                Last File and Date Uploaded: 
                <label class="awc-LastDate awc-ctrlval1 acs-sproc-wait acs-edit-xlarge-text"></label>
                <br /><br />
                <span class="acs-span-xlarge">Latest Status: </span>
                <label class="awc-LatestStatus acs-sproc-wait acs-edit-xlarge-text"></label>
```

and I hooked onto the .LOAD event in JS (the LOAD does happen when the initial HTML gets into the browser - so I have more work to do with FLAGS and such.  Probably make this go into a jQuery DIALOG box so I can be in a modal state with more control over the situation.



```
        $("#upload_target").load(function() {
            var strResult = $("#upload_target").contents().find("body").html();
            uploadComplete(strEditPanel, strResult);
        });
    }
}
```

This function in JS handles the uploadComplete action and works up the screen.  I will be hiding the IFRAME so I can do all the processing myself.



```
function uploadComplete(strId, strResult) {
    var returnObj = $.parseJSON(strResult);
    var updArr = returnObj.update || [];
    var strData = "";
    var wesAWC = [];
    for (var i = 0; i < updArr.length; i = i + 2) {
        strData = updArr[i + 1];
        wesAWC = $(strId + " .awc-" + updArr[i]).not(".acs-edit-view-hidden");
        p_fillField(wesAWC, strData, strId, updArr[i], false);
    }
    if (returnObj.ok) {
        errorMessage("Upload Complete", returnObj.message);
    } else {
        errorMessage("Upload DID NOT Complete", returnObj.message);
    }
}
```

I love jQuery!!!!!!!!!!!!

----------


## sapator

> I love jQuery!!!!!!!!!!!!


And i hate MVC!!!!!!!!!!!!

----------


## szlamany

You doing ASP.NET with MVC?  And it's got you down??

----------


## kfcSmitty

> And i hate MVC!!!!!!!!!!!!


If you want to go with a MVC framework and you dislike MVC.NET (and don't need all of its bells and whistles), you could try NancyFX. 

My work has been using it for a little over a year, and using it with Razor views, it is like a dream. It handles everything we need so far, and is extremely easy to use. One downside, though, is that the only way it currently handles sessions is through a cookie.

----------


## sapator

Thanks but i was actually forced to use this thing so i don't want to go with MVC but i am forced to.

----------

