ajaxForm plugin continua a reindirizzare alla pagina delle azioni ignorando il ritorno false;

Question

Ciao ragazzi Ho un semplice modulo che viene inviato quando un utente fa clic su nella finestra di ricerca del file quando ha completato la selezione di un'immagine.

Il mio codice HTML si presenta come qualcosa di seguito.

<form id="imgForm" action="action.php" method="post" enctype="multipart/form-data"> 
     <div class="fileUpload btn btn-lg btn-primary"> 
      <span>Choose File</span> 
      <input id="imageToBeUploaded" type="file" class="upload" name="image"/> 
     </div> 
</form> 

JavaScript

$("body").on('submit', '#imgForm', function(){ 
    $(this).ajaxForm({target:'#uploadStatus'}); 
    console.log("submitting..."); 
    return false; 
}); 

/* Uploading Profile BackGround Image */ 
$('body').on('change','#imageToBeUploaded', function() { 
    //submit the form 
    $("#imgForm").submit(); 
}); 

Il mio problema è che la forma viene presentato, ma reindirizza alla pagina action.php con la risposta. Speravo di impedire che il reindirizzamento si verificasse mentre ricevevo una risposta sulla pagina corrente. restituisce falso; non sembra funzionare come da documentazione a http://malsup.com/jquery/form/#ajaxSubmit

Qualsiasi aiuto sarebbe molto apprezzato!

Si noti che devo supportare IE8/9 che significa che formData è fuori questione!

Grazie.

Answer 1

È necessario utilizzare event.preventDefault(); invece di return false con jQuery

$("body").on('submit', '#imgForm', function(event){ 

    event.preventDefault(); 

    $(this).ajaxForm({target:'#uploadStatus'}); 
    console.log("submitting..."); 
    return false; 
}); 

Un sacco di persone potrebbero non essere d'accordo con me, ma il ritorno falso è di solito dire qualcosa fallito, mentre i vostri ajax presentare potrebbe effettivamente aver funzionato bene, in modo che possa portare risultati misti per l'originale chiamante. In questo caso non importa, ma restituirò false solo se qualcosa è effettivamente fallito o è andato storto o quando è richiesto un booleano. Se risultato vuoto, restituirei null, piuttosto che false. A soli convinzioni suppongo ..

non so perché si dispone di 2 funzioni js, ma è possibile combinare entrambe le funzioni come:

$(document).ready(function() { 
    /* Uploading Profile BackGround Image */ 
    $('body').on('change','#imageToBeUploaded', function() { 
     //submit the form 
     $('#imgForm').ajaxForm({target:'#uploadStatus'}); 
     console.log("submitting..."); 
    }); 
}); 

Answer 2

Basta provare questo codice JavaScript/jQuery e gestire con lo script del server.

$(document).ready(function (e) { 
      /* Uploading Profile BackGround Image */ 
      $('#imageToBeUploaded').on('change', function() { 
       //submit the form 
       $("#imgForm").submit(); 
       alert('Form submitted'); 
      }); 
      $('#imgForm').ajaxForm({ 
       target:'#uploadStatus', 
       beforeSubmit:function(){ 
        alert('File uploading...'); 
       }, 
       success:function(){ 
        alert('File uploaded'); 
       }, 
      }); 
     }); 

Good Luck [ '}

Answer 3

provare l'attuazione di questo codice:

window.location.href si tratta di una proprietà che vi dirà la posizione URL corrente del browser. La modifica del valore della proprietà reindirizzerà la pagina.

$("body").on('submit', '#imgForm', function(){ 
var a; 
var b; 
window.location.href = "../currenturl.htm?parameter1="+a+"&parameter2="+b; 
or 
window.location.href = "../currenturl.htm"; 
//where your browser need to stay(current) url should be mentioned here. 
}); 

Answer 4

La pagina che hai fatto riferimento è di circa $(this).ajaxSubmit(options); e non $(this).ajaxForm(options);. Hai provato $(this).ajaxSubmit(options);? I due non sono sinonimi. Sembra che tu stia confondendo le loro implementazioni.

Per la documentazione, ecco come utilizzare ajaxSubmit():

$(document).ready(function() { 
    $('#imgForm').on('submit', function(){ 
     $(this).ajaxSubmit({target:'#uploadStatus'}); 
     console.log("submitting..."); 
     return false; 
    }); 

    $('#imageToBeUploaded').on('change', function() { 
     //trigger submit event 
     $("#imgForm").submit(); 
    }); 
}); 

E ajaxForm():

$(document).ready(function() { 
    $('#imgForm').ajaxForm({target:'#uploadStatus'}); 

    $('#imageToBeUploaded').on('change', function() { 
     //trigger submit event 
     $("#imgForm").submit(); 
    }); 
}); 

Se non si desidera utilizzare gli eventi delegati a meno che non si hanno veramente a. Se il modulo viene caricato dopo l'evento pronto per DOM, non utilizzare in alcun modo eventi delegati.

Answer 5

da: Prevent page reload and redirect on form submit ajax/jquery

$("body").on('submit', '#imgForm', function(event){ 
    $(this).ajaxForm({target:'#uploadStatus'}); 
    console.log("submitting..."); 
    event.preventDefault(); 
    return false; 
}); 

/* Uploading Profile BackGround Image */ 
$('body').on('change','#imageToBeUploaded', function(event) { 
    //submit the form 
    $("#imgForm").submit(); 
}); 

Answer 6

$(document).ready(function (e) { 
      /* Uploading Profile BackGround Image */ 
      $('#imageToBeUploaded').on('change', function() { 
       //submit the form 
       $("#imgForm").submit(); 
       alert('Form submitted'); 
      }); 
      $('#imgForm').ajaxForm({ 
       target:'#uploadStatus', 
       beforeSubmit:function(){ 
        alert('File uploading...'); 
       }, 
       success:function(){ 
        alert('File uploaded'); 
       }, 
      }); 
     }); 

Answer 7

Si può provare questo:

uso $ (this) .closest ("# imgForm") presentare();.

anziché: $ ("# imgForm"). Submit();

$('#imageToBeUploaded').on('change', function() { 
    //submit the form 
$(this).closest("#imgForm").submit(); 
    $("#imgForm").submit(); 
}); 

    $('form#imgForm').on('submit',function(e){ 
      e.preventDefault(); 
      $(this).ajaxSubmit({ 
        url: 'upload', 
        uploadProgress: function (event, position, total, percentComplete){ 
         //display status 
         $(".progress-bar").width(percentComplete + '%'); 
         $('.progress-bar').html(percentComplete+'%'); 
        }, 
        success: function(response){ 
         alert('Success'); 
        }, 
        error: function(response, status, e){ 
         alert('Oops something went.'); 
        }, 
        resetForm: true 
       }); 
     }); 

avete bisogno di questo nel tuo tag script < https://code.google.com/p/struts2-jquery/source/browse/trunk/struts2-jquery-plugin/src/main/resources/template/js/plugins/jquery.form.min.js?r=1645>

Answer 8

Prova questa

$(document).ready(function() { 
    $("#imgForm").ajaxForm({ 
     target:'#uploadStatus' 
    }); 
}); 

$('body').on('change','#imageToBeUploaded', function() { 
    //submit the form 
    $("#imgForm").submit(); 
});