Results 1 to 6 of 6

Thread: [RESOLVED] Ajax upload confusion

  1. #1

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Resolved [RESOLVED] Ajax upload confusion

    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.

    Code:
    <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.

    Code:
            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...
    Attached Images Attached Images  

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  2. #2

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Ajax upload confusion

    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).

    Code:
    <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.

    Code:
            $("#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.

    Code:
    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!!!!!!!!!!!!
    Attached Images Attached Images  

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  3. #3
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,594

    Re: Ajax upload confusion

    Quote Originally Posted by szlamany View Post
    I love jQuery!!!!!!!!!!!!
    And i hate MVC!!!!!!!!!!!!
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  4. #4

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: [RESOLVED] Ajax upload confusion

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

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  5. #5
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: Ajax upload confusion

    Quote Originally Posted by sapator View Post
    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.

  6. #6
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,594

    Re: [RESOLVED] Ajax upload confusion

    Thanks but i was actually forced to use this thing so i don't want to go with MVC but i am forced to.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width