Ruby On Rails: AJAX et Soumettre une demande en cours en parallèle

Question

Ceci est mon code:

<%= simple_form_for @video do |form| %> 
    <div class="form-inputs"> 
    <%= form.input :title, id: :video_title %> 
    <div class="row"> 
     <div class="input-field col s12"> 
      <textarea id="textarea1" name="video[description]" class="materialize-textarea"></textarea> 
     <label for="textarea1">Description</label> 
    </div> 
    </div> 
    <label for="spaceTags">Tags</label> 
    <div id="spaceTags" class="chips chips-placeholder"></div> 
    <%= form.label :movie %> 
    <%= form.file_field :movie %> 
    <%= form.label :preview_images%> 
    <%= form.file_field :preview_images, multiple: true %> 
    <p> 
    <input type="checkbox" name=video[published] id="test5" /> 
    <label for="test5">Publish Video</label> 
</p> 
<div class="form-actions" onclick="fetch();"> 
    <%= form.submit%> 
</div> 
<% end %> 

et mon code javascript est:

$('#textarea1').trigger('autoresize'); 
$('.chips').material_chip(); 
$('.chips-placeholder').material_chip({ 
    placeholder: 'Enter a tag', 
    secondaryPlaceholder: '+Tag', 
}); 
function fetch(){ 
var x = $('#spaceTags').material_chip('data'); 
$.ajax({ 
    type: "POST", 
    url : "/videos", 
    data: {"sarthak":JSON.stringify(x)}, 
    success : function(){alert ("Success!")}, 
    error : function(data){alert(data.message)} 
    }); 
    } 

lorsque je tente de soumettre le formulaire, il fait l'appel à même action dans les deux cas.Il existe un moyen par lequel je peux retarder la soumission du formulaire jusqu'à ce que l'appel AJAX est exécuté ou toute autre façon par laquelle je peux résoudre ce problème.

Answer 1

Vous pouvez utiliser event.preventDefault qui arrêtera l'exécution normale du formulaire et déclenchera simplement votre méthode fetch.

Vous pouvez modifier votre méthode fetch à:

function fetch(event){ 
    event.preventDefault(); 
    // the rest of your code 
} 

Ensuite, dans votre ajax success promesse, vous pouvez gérer tout ce que vous voulez, même soumettre à nouveau le formulaire si vous souhaitez

$.ajax({ 
    type: "POST", 
    url : "/videos", 
    data: {"sarthak":JSON.stringify(x)}, 
    success : function(){ 
     alert ("Success!"); 
     $('form').submit() 
    }, 
    error : function(data){alert(data.message)} 
    });