ASP.NET MVC 3 message while file is uploading with jQuery, jQueryUI or Ajax

Question

When I click on the submit button "input type="submit" id="submit" value="Save"". it starts uploading a file that I selected from my hard disk. this all doesnt matter though, because I made a div with the text "uploading" and the style of that div is visibility:hidden; now what I want is that when I click on the submit button (the time when the file starts uploading) that the div becomes visible, I've tried several things including " How can I display a status message while a file is uploading? " but no luck, could be just me but I am fairly new to jQuery so I would appreciate some help.

Thanks

EDIT: I tried the all the codes below, but nothing worked, I also tried

$('#editform').submit(function() {
        $('#loadingdiv').show();
        return true;
    });

(editform being the form ID that I'm working in) but no luck, does anyone know why this is happening?

My whole edit page below

@using (Html.BeginForm("Edit", "Admin",FormMethod.Post, new { enctype = multipart/form-data", id = "editform" })){
@Html.EditorForModel()
<div class="editor-field">
    @if (Model.ImageData == null)
    {
        @:None
    }
    else
    {
        <img width="150" height="150"
             src="@Url.Action("GetImage", "Product", new { Model.ProductID })" alt="bic boii" />
    }
    <div>
        Upload nieuw image: &nbsp; &nbsp; &nbsp;
        <input type="file" name="Image" />
    </div>
</div>

<div>
    Upload nieuw document:
    <input type="file" name="Pdf" />
</div>

<script type="text/javascript">
    $('#editform').submit(function() {
        $('#loadingdiv').show();
        return true;
    });

</script>
<input type="submit" id="submit" value="Opslaan" />
@Html.ActionLink("Ga terug", "Index")
<div id="loadingdiv">
    Bezig met uploaden.
</div>}

hmm, after putting a breakpoint on my form, it just skips my script completely, I'm not sure what that is about

Put your script outside of the form, ensure the elements are loaded before executing anything enclosing your js code inside $("document").ready(function () { //your js code here }); — Bardo
– Bardo, Commented Dec 4, 2012 at 12:12
Check also that your form have the expected id on source code. — Bardo
– Bardo, Commented Dec 4, 2012 at 12:12
btw, you should also post the css applying to your page. You may try display:none; instead of visibility:hidden; for your div — jbl
– jbl, Commented Dec 4, 2012 at 12:16
Thanks jbl ^^ display:none; worked! hahah I never thought of that, I'm stupid! — Conceptual
– Conceptual, Commented Dec 4, 2012 at 12:39

Bardo · Accepted Answer · 2012-12-04 11:06:26Z

1

$("#submit").click(function () { $("#yourContainerId").show(); });

This says: When submit button is clicked launch a function where you select the div where the message is contained (whose id I've called here yourContainerId) and show it.

If it doesn't work it should return an error that might help us to know what is happening. Also it could be easier if you post your client code on the question. Maybe there's some error on your code that's stopping the execution from reaching the code where you try to show your message.

answered Dec 4, 2012 at 11:06

Bardo

2,5233 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Conceptual Over a year ago

I posted my whole cshtml page

CR41G14 · Accepted Answer · 2012-12-04 10:40:57Z

0

You could use Ajax to upload the File? Then you can call the showing of the Div before the ajax call and when it has completed then hide the div.

$.ajax({

    type: "POST",
    url: "/SomeController/SomeAction",
    data: $('form').serialize(),
    timeout: 3000,
    async: false,
    beforeSend: function() {
        $("loading").show();

    },

    complete: function() {
        $("loading").hide();

    },        
    cache: false,
    success: function(result) {

         return result;

    },
    error: function(error) {
        $("laoding").hide();
        alert("Some problems have occured. Please try again later: " + error);

    }

});

answered Dec 4, 2012 at 10:40

CR41G14

5,6245 gold badges46 silver badges67 bronze badges

2 Comments

Conceptual Over a year ago

I dont know if I'm just dumb, but I don't know how I would let Ajax upload my file, right now I'm saving it to the database as a binary file (and also saving a mimetype), but I just want to show a message when the button is clicked, actually has little to do with the file uploading, but when you click on the button, your page starts loading, and that's when I want the message to show.

jbl Over a year ago

I'm afraid $("loading") won't return anything. $("#loading") or $(".loading") might, assuming and id or class ="loading"

Collectives™ on Stack Overflow

ASP.NET MVC 3 message while file is uploading with jQuery, jQueryUI or Ajax

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related