Rails Ajax formulaire_pour activer plusieurs soumissions (impossible de désactiver le bouton Soumettre)

Question

J'ai un problème avec un formulaire ajax que j'utilise pour les erreurs de rendu, mais il permet à l'utilisateur de soumettre un nombre de fois illimité tant qu'il maintient le bouton de soumission. Ce qui se passe est que lorsque l'utilisateur appuie sur le bouton Soumettre, il grise pendant une fraction de seconde avec le texte disable_with, puis redevient cliquable. L'utilisateur peut alors continuer à appuyer et à faire des demandes de publication. Ce n'est que lorsque l'utilisateur s'arrête que la redirection a lieu. J'ai cherché à travers essentiellement toutes les réponses à ce problème particulier, et ils ne semblent pas fonctionner pour moi. Je me demandais si quelqu'un pouvait aider.

J'ai essayé d'utiliser javascript pour désactiver le bouton et utiliser les données: {disable_with: "..."}.

Voici mon code .html.erb droite maintenant:

<div class="container-fluid main-container"> 
    <%= form_for [@group, @task], remote: true do |f| %> 
    <%= f.label :name %> 
    <%= f.text_field :name, class: "form-control" %> 

    <%= f.label :description %> 
    <%= f.text_area :description, class: "form-control" %> 

    <%= f.label :priority %> 
    <%= f.text_field :priority, class: "form-control" %> 

    <%= f.label :user %> 
    <%= f.select :user_id, options_for_select(@group.options_for_user), {}, class: "form-control" %> 

    <%= f.submit "Create Task", class: "btn btn-primary new-task-button", data: {disable_with: "Creating task..."} %> 
    <% end %> 
</div> 

Et voici mon code de contrôleur pour la tâche nouvelle et de créer des actions

def new 
    @group = Group.find(params[:group_id]) 
    @task = Task.new 
end 

def create 
    new_user = User.find(task_params.delete(:user_id)) 
    @task = Task.new(to_update) 
    respond_to do |format| 
    if @task.save 
     @group.tasks << @task 
     new_user.tasks << @task 
     format.html {redirect_to @group} 
     TasksChannel.broadcast_to(@group, {action: "create", data: @task, user: new_user}) 
    else 
     @errors = @task.errors 
     format.js {render :file => "layouts/errors.js.erb"} 
    end 
    end 
end 

def task_params 
    return params.require(:task).permit(:name, :description, :priority, :user_id) 
end 

Je suis coincé sur ceci pendant un moment et c'est tellement frustrant. J'apprécierais grandement toute aide.

Answer 1

1. Vérifiez que le code HTML de votre page possède cet attribut. Ouvrez votre navigateur sur localhost: 3000 et ouvrez la barre d'outils du développeur pour vérifier cet élément html.

2. Ecrivez un peu de Jquery dans votre fichier applicationscript.js et testez si le problème est résolu. Peut-être il y a un conflit avec turbo-liens ou autre

   $('#my-button').prop('disabled', true); 
   

Disabling button after disable_with

3. tester l'effet également sur un projet simple jquery sans rubis sur des rails.