Question

I have a very strange problem using JQuery. I have a fileupload form where the user can click on 2 buttons: “Save file” or “No picture”. The two are calling the same controller that manage if there is a picture or not in the fileupload field.

What is weird is that the controller get’s called only in the cases when the fileupload field is empty. If someone has choosen a picture, it just doesnt go in the controller which let me think that the submit is just not working. But my jquery code get’s called and always returns true…

Here is the JQuery code which is in the document.ready:

$('#ImgForm').on('submit', function () {

        var fileUploader = document.getElementById("fileuploader");
        $(fileUploader).hide();

        var fileUploader = document.getElementById("informations");
        $(fileUploader).show();

        //Create a new image and insert it into the Images div.  Just to be fancy, 
        //we're going to use a "FadeIn" effect from jQuery
        var imgDiv = document.getElementById("Images");
        loadingImg = new Image();
        loadingImg.src = "../../Pictures/ajax-loader.gif";

        //Hide the image before adding to the DOM
        $(loadingImg).hide();
        imgDiv.appendChild(loadingImg);
        //Now fade the image in
        $(loadingImg).fadeIn(500, null);

        return true;
    });

Here is the MVC View code:

@using (Html.BeginForm("UploadImage", "Recipe", FormMethod.Post,
                new
                {
                    enctype = "multipart/form-data",
                    id = "ImgForm",
                    name = "ImgForm",
                    target = "UploadTarget"
                }))
            {
                <div id="fileuploader">
                    <h4>Étape 1: Choisir une photo</h4>
                    <input id="lefile" type="file" style="display:none" name="imageFile" accept="image/x-png, image/jpeg" />
                    <div class="input-append">
                       <input id="photoCover" class="input-large" type="text" />
                       <a class="btn" onclick="$('input[id=lefile]').click();">Parcourir...</a>
                    </div>

                    <script type="text/javascript">
                        $('input[id=lefile]').change(function () {
                            $('#photoCover').val($(this).val());
                        }); 
                    </script>

                    <input id="SaveImage" type="submit" class="btn btn-success" value="Sauvegarder l'image" />
                    <input id="SaveNoImage" type="submit" class="btn btn-danger" value="Aucune photo" />
                </div>  
            }

I will not post the controller code since it just get inside in the cases where the file upload is empty.

Any idea what is going wrong?
Thanks

VERY IMPORTANT EDIT

Today I decided to go back in my SVN history and try to see what happend. I discovered something very weird. If I want it to work, I NEED to include the jquery in the view itself (Create.cshtml). I always though that to include the jquery .js file in the _layout.cshtml was enougth but it isn’t! So only by doing this, it works in Chrome.

I still have a bug in Internet Explorer that prevent the image from displaying because the event on the “load” of the iframe launch this: “Runtime Error Microsoft JScript: Access denied”. It works perfectly in Chrome. Any idea???

EDIT 2

It was asked in the comments to add the code in jsfiddle. I’m not too sure how it work so I copy the rendered html, cut the javascript and put it in the javascript windows. It doesn’t do anything right now, I’m not sure why but at least you can see the whole picture. Hope it helps. (Note that I did some modification compare to the code in the question but the problem is the same). here!

Answer 1

Lots of issues here:

1. js ref in _layout is sufficient, however, you are referencing $ inline before jQuery is loaded. Move all your script to the end and wrap in $(document).ready(function ({ }); then you can remove the duplicate js reference
2. you declare var fileUploader twice in the same block – dangerous, rename one of them
3. you never declare loadingImg, so the line loadingImg = new Image(); is using an implicitly declared global – again dangerous if it doesn’t exist (can’t tell without complete code)
4. Once you fix these, you’ll see that your form should never post back to the server because you are handling the submit client-side (in jQuery).

With these issues fixed, I get the same behavior in Chrome, FF, IE9 and IE10. Here’s the view I used:

@{
    ViewBag.Title = "Test";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Test</h2>

@using (Html.BeginForm("Test", "Home", FormMethod.Post,
                new
                {
                    enctype = "multipart/form-data",
                    id = "ImgForm",
                    name = "ImgForm",
                    target = "UploadTarget"
                }))
            {
                <div id="fileuploader">
                    <h4>Étape 1: Choisir une photo</h4>
                    <input id="lefile" type="file" style="display:none" name="imageFile" accept="image/x-png, image/jpeg" />
                    <div class="input-append">
                       <input id="photoCover" class="input-large" type="text" />
                       <a class="btn" onclick="$('input[id=lefile]').click();">Parcourir...</a>
                    </div>
                    <input id="SaveImage" type="submit" class="btn btn-success" value="Sauvegarder l'image" />
                    <input id="SaveNoImage" type="submit" class="btn btn-danger" value="Aucune photo" />
                </div>  
            }

<div id ="UploadTarget">upload target</div>
<div id="Images"></div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('input[id=lefile]').change(function () {
                debugger;
                $('#photoCover').val($(this).val());
            });

            $('#ImgForm').on('submit', function () {
                alert('in js submit');
                var fileUploader = document.getElementById("fileuploader");
                $(fileUploader).hide();

                var fileUploader1 = document.getElementById("informations");
                $(fileUploader1).show();

                //Create a new image and insert it into the Images div.  Just to be fancy, 
                //we're going to use a "FadeIn" effect from jQuery
                var imgDiv = document.getElementById("Images");
                var loadingImg = new Image();
                loadingImg.src = "/content/335.gif";

                //Hide the image before adding to the DOM
                $(loadingImg).hide();
                imgDiv.appendChild(loadingImg);
                //Now fade the image in
                $(loadingImg).fadeIn(500, null);
                debugger;
                return true;
            });
        });
    </script>