Scribd
Upload
4 views2 pages

JavaScript or AJAX

The document outlines the implementation of a Stimulus controller for a movie card feature in a web application using JavaScript. It includes code snippets for revealing content on click and setting up a search form for movies. Additionally, it provides instructions for creating a new Stimulus controller and attaching actions to form elements for dynamic updates.

Uploaded by

tim22gw
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views2 pages

JavaScript or AJAX

The document outlines the implementation of a Stimulus controller for a movie card feature in a web application using JavaScript. It includes code snippets for revealing content on click and setting up a search form for movies. Additionally, it provides instructions for creating a new Stimulus controller and attaching actions to form elements for dynamic updates.

Uploaded by

tim22gw
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

JavaScript or AJAX

<div data-controller="movie-card">
<p class="d-none" data-movie-card-
target="content">
<!-- ... -->
</p>

</div>
// app/javascript/controllers/movie_card_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {


static targets = ["content"]

connect() {
console.log(this.contentTarget)
}
}
<div data-controller="movie-card">
<i class="caret-down" data-action="click->movie-card#revealContent"></i>
<p class="d-none" data-movie-card-target="content">
<!-- ... -->
</p>
</div>
// app/javascript/controllers/movie_card_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {


static targets = ["content"]

revealContent() {
this.contentTarget.classList.remove("d-none")
}
}
<!-- index.html.erb -->
<!-- [...] -->
<div data-controller="search-movies">
<%= form_with url: movies_path, method: :get, html: {class:
"mb-4", data: {search_movies_target: "form"}} do |f| %>
<%= f.text_field :query,
class: "form-control",
placeholder: "Type a movie title",
value: params[:query],
data: {search_movies_target: "input"} %>
<!-- [...] -->
<!-- list.html.erb -->
<div data-search-movies-target="list">
<p class="h3">
<!-- [...] -->

Create Stimulus controller


- Rails g stimulus movie-search
Attach data-action to form
- data:{ action: “key_up->movie-search#update” }
- data: { movie_srach_target: “form” }

You might also like