ruby on rails - Adding stimulus to a form made it stop working - Stack Overflow

admin管理员组

文章数量:1349717

this is a new question that originated in a previous one that I made, but I didn't wanted to mix everything up. I'm trying to add a preview when uploading an image to a form using stimulus. I got the preview working (thanks to the other question I made), but now the form itself stopped working.

1. The first issue, is that when I hit submit I get this error Error: Form responses must redirect to another location and nothing else happens.
2. The second issue is that the alerts that appeared when a field was empty also stopped working.

I've tried wrapping all the form in a form_tag, but when submitting it only redirects me without actually doing anything else, even when the form is incomplete. The only way I got the form working again was by removing the line <%= javascript_importmap_tags %> but that also disables the preview stimulus.

Form partial _form.html.erb:

<%= form_with model: @movie do |f|%>
    <%= f.hidden_field :user_id, value: current_user.id %>
    <%= f.hidden_field :rating, value: -1%>
    <%= render "movies/error_messages" %>
    <div class="field form-group" style = "color: white">
        <%= f.text_field :title, placeholder: "Title", class:"form-control"%>
    </div>
    <br>
    <div class="field form-group" style = "color: white">
        <%= f.text_area :description, placeholder: "Description", class:"form-control" %>
    </div>
    <br>
    <div class="field form-group" style = "color: white">
        <%= f.text_field :director, placeholder: "Director", class:"form-control" %>
    </div>
    <br>
    <%= f.select :genre, options_for_select([["Movie Genre", ""], "Action", "Adventure", "Drama", "Romance", "Comedy", "Horror", "Suspense"]), 
    {}, { class: "form form-group form-control" } %>
    <br>
    <div class="field form-group" style = "color: white">
        <label class="form-label" for="typeNumber">Movie Duration</label>
        <%= f.text_field :movie_length, class:"form-control", step:"0.01", value:"01.00", type:"number", id:"typeNumber" %>
    </div>
    <br>
    <div data-controller = "previews">
        <label class="form-label" for="typeNumber" style = "color: white">Movie Cover</label>
        <%= f.file_field :image, direct_upload: true, data: { previews_target: "input", action: "change->previews#preview"}, class:"form-control" %>
        <div class= "image-cover-preview">
        <% if @movie.image.attached? && @movie.image.persisted?%>
            <%= image_tag @movie.image, data: { previews_target: "preview"}, class: "image-cover-preview" %>
        <% else %>
            <%= image_tag "", data: { previews_target: "preview"}, class: "image-cover-preview" %>
        <% end %>
        </div>
    </div>
    <br>
    <div class="actions">
        <%= f.submit class:"btn btn-primary" %>
    </div>
<% end %>

movies_controller.rb

class MoviesController < ApplicationController
  before_action :set_movie, only: [ :show, :edit, :update, :destroy ]
  before_action :authenticate_user!, except: [ :index, :show ]

  def index
    @movies = Movie.search_by_title(params[:search])

    @movies.each do |m|
      unless m.reviews.blank?
        tempRating = 0
        m.reviews.each do |r|
          tempRating += r.rating
        end
        m.rating = tempRating/m.reviews.size
      end
    end
  end
  def show
    @movie = Movie.find(params[:id])
    @reviews = Review.where(movie_id: @movie.id).order("created_at DESC")
    @users = User.all

    unless @reviews.blank?
      tempRating = 0
      @reviews.each do |r|
        tempRating += r.rating
      end
      @movie.rating = tempRating/@reviews.size
    end
  end

  def new
    @movie = Movie.new
  end

  def edit
  end

  def create
    @movie = Movie.new(movie_params)
    if movie_params[:image].blank?
      @movie.errors.add(:base, "Please upload an image")
      render :new
    else
      if @movie.save
        redirect_to @movie, notice: "Movie was successfully created"
      else
        render :new
      end
    end
  end

  def update
    if @movie.update(movie_params)
      redirect_to @movie, notice: "Movie was successfully updated"
    end
  end

  def destroy
    @movie.destroy
    redirect_to movies_path
  end

  private

  def set_movie
    @movie = Movie.find(params[:id])
  end

  def movie_params
    params.require(:movie).permit(:title, :description, :director, :genre, :movie_length, :rating, :user_id, :image, :search)
  end
end

previews_controller.js

import { Controller } from "@hotwired/stimulus"


export default class extends Controller 
{
  static targets = ["input", "preview"];

  connect() 
  {
  }

  preview()
  {
    let input = this.inputTarget;
    let preview = this.previewTarget;
    let file = input.files[0];
    let reader = new FileReader();

    reader.onloadend = function()
    {
      preview.src = reader.result;
    };

    if(file)
    {
      reader.readAsDataURL(file);
    }
    else
    {
      preview.src = "";
    }
  }
}

本文标签： ruby on railsAdding stimulus to a form made it stop workingStack Overflow