Why ajax call enter success and error block on every call?

Question

I want to upload picture in database and every time i make ajax call it enters both success and error block. This is my html:

    <div>
        <form  id="test-form" enctype="multipart/form-data">
            <div>
                <label>Photos: </label>
                <input type="file" id="file"/>
            </div>
            <input type="button" value="Add" id="add-movie-tvShow-btn">
        </form> 
    </div>

This my ajax call

let insertButton = $("#add-movie-tvShow-btn");
insertButton.on('click', function () {

let formData = new FormData();
let file = $("#file")[0].files[0];
formData.append("file", file);

        $.ajax({
            url: "http://localhost:8080/upload",
            method: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function(){
            alert("Enter success block");
                },
            error: function(){
              alert("Enter error block")  
              }
        });

   });

And this is method that process ajax request:

@PostMapping(value = "/upload", consumes = "multipart/form-data")
public void uploadFile(@RequestParam("file") MultipartFile file, Movie movie) throws 
IOException {
    File convertFile = new File("C:\\Users\\myName\\Desktop\\" + file.getOriginalFilename());
    convertFile.createNewFile();
    FileOutputStream fout = new FileOutputStream(convertFile);
    fout.write(file.getBytes());
    movie.setImage(file.getBytes());    
    movieRepo.save(movie);
    fout.close();
}

It creates data in database but i don't understand why enters error block? What did i do wrong?

Please see if this helps you https://stackoverflow.com/questions/14475853/jquery-ajax-call-doesnt-call-success-or-error — JCompetence, Jul 08 '21 at 13:10
That should not be possible. In this case your `sucess` function should never be called at all, since "success" is with two C's. Does the console of your browser show any errors? — Ivar, Jul 08 '21 at 13:11
@Ivar Yes, that's weird, it was not showig any erros, but even when i put two C's it's behaving the same. — Nem Jov, Jul 08 '21 at 13:16

score 0 · Answer 1 · answered Jul 08 '21 at 13:16

0

Can you try preventDefault()? Something like the below.

insertButton.on('click', function (e) {
  e.preventDefault();

answered Jul 08 '21 at 13:16

Ragu

31
1
4

Hey that actually works, but is that best way to solve this? I still don't know why it enters both blocks – Nem Jov Jul 08 '21 at 13:24
@NemJov If this works, I find it hard to believe that your `add-movie-tvShow-btn` is actually of `type="button"`. A button with `type="button"` should _not_ submit the form, unless you have some other JS interfering. Anyway, if you are submitting your form via AJAX, you might as well remove the `
` tags to prevent the form from submitting.
– Ivar Jul 08 '21 at 13:31
I guess somehow your click function triggered twice. May be put a console log before prevent default to confirm this. You can check this https://stackoverflow.com/questions/3070400/jquery-button-click-event-is-triggered-twice – Ragu Jul 08 '21 at 13:31
@Ivar I removed form and i also removed ` e.preventDefault();` and code works as it should, i thought a form is necessary to submit multimedia type. – Nem Jov Jul 08 '21 at 14:21

Why ajax call enter success and error block on every call?

1 Answers1