My problem seems simple.
<%= form_with(url: projects_path, method: :get, data: { turbo_frame: "projects", turbo_action: "advance", controller: "search-form" }) do |form| %>
<%= form.text_field :title, data: { action: "input->search-form#search" } %>
<%= form.collection_select :category, Project.categories.keys, :to_s, :titlecase, { include_blank: true, default: 0 }, data: { action: "change->search-form#search" } %>
<%= form.submit "Search" %>
<% end %>
I've got this form that clears after submitting the get request. I need it to be Get because I'm using Turbo. Is there a way to prevent that via stimulus or simple Rails/Ruby ?
Here is my stimulus file if needed :
import { Controller } from "#hotwired/stimulus"
// Connects to data-controller="search-form"
export default class extends Controller {
search() {
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.element.requestSubmit();
}, 150)
}
}
Preventing the form to empty on an asynchronous request is good but surely when I submit every key stroke. xD
Thanks for the help !
Related
My last chance is some last living developer in RoR
Nothing in the darkest corners of the internet works for:
<%= link_to 'some-link', '#', data: { confirm:'Are You Sure?') %>;
it generate this:
<a data-confirm="Are you sure?" href="#">some link</a>
but there is no confirm dialog box.
I try everything - turbo_confirm, try to add controller with class for stimulus ... and still nothing.
Right now I remove turbo-rails, stimulus etc. - but still nothing.
data-turbo-confirm presents a confirm dialog with the given value. Can
be used on form elements or links with data-turbo-method.
https://turbo.hotwired.dev/reference/attributes
Examples that work
<%= link_to "GET turbo link", "/",
data: {
turbo_method: :get,
turbo_confirm: "Sure?"
}
%>
<%= link_to "POST turbo link", "/",
data: {
turbo_method: :post,
turbo_confirm: "Sure?"
}
%>
<%= button_to "Button", "/",
data: { turbo_confirm: "Sure?" }
%>
<%= form_with url: "/",
data: { turbo_confirm: "Sure?" } do |f| %>
<%= f.submit "Submit" %>
<% end %>
Doesn't work
<%= link_to "GET link", "/",
data: { turbo_confirm: "Sure?" }
%>
Fix by adding turbo_method: :get.
Really doesn't work
<%= link_to "UJS link", "/",
data: { confirm: "Sure?" }
%>
But easy to fix:
// app/javascript/application.js
document.addEventListener("click", event => {
const element = event.target.closest("[data-confirm]")
if (element && !confirm(element.dataset.confirm)) {
event.preventDefault()
}
})
data-disable-with
This one is a bit more involved, but it's all the same pattern, listen for event, check for data attribute, if else, do something.
// app/javascript/application.js
// on form submit
// set `value` if `input`
// set `innerHTML` if `button`
document.addEventListener("turbo:submit-start", event => {
const element = event.detail.formSubmission.submitter
if (element.hasAttribute("data-disable-with")) {
// element.disabled = true // this is done by turbo by default
if (element instanceof HTMLInputElement) {
element.value = element.dataset.disableWith
} else {
element.innerHTML = element.dataset.disableWith
}
}
})
<%= form_with url: "/" do |f| %>
# <button>
<%= f.button "Submit", data: { disable_with: "..." } %>
# <input>
<%= f.submit "Submit", data: { disable_with: "..." } %>
<% end %>
I followed this tutorial to implement drag and drop. https://www.driftingruby.com/episodes/drag-and-drop-with-hotwire
I am getting an error on drop that says Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dataset'). Any thoughts on why this is happening?
Project model:
acts_as_list scope: :project
_project.html.erb
<div id="projects" data-controller="position">
<%= content_tag :div, data: { sgid: project.to_sgid_param, id: "#{dom_id project}" }, class: 'table-row' do %> <div><%= project.name %> </div>
<div><%= project.description %> </div>
<div><%= project.status %> </div>
<div><%= project.user.email %> </div>
<div class="flex justify-end">
<%= link_to "View", project_path(project) , data: {turbo: false} %>
<%= button_to "Delete", project, method: :delete, form: {data: {turbo_confirm: "Are you sure?"}} %> </div>
</div>
<% end %>
</div>
position_controller.js
import { Controller } from "#hotwired/stimulus";
import Sortable from "sortablejs"
import { put, get, post, patch, destroy } from "#rails/request.js"
export default class extends Controller {
connect() {
this.sortable = Sortable.create(this.element, {
animation: 150,
onEnd: this.updatePosition.bind(this)
})
}
async updatePosition(event) {
const response = await put('/projects', {
body: JSON.stringify({
sgid: event.project.dataset.sgid,
position: event.newIndex + 1
})
})
if (response.ok) {
console.log(event.project.dataset.sgid)
}
}
}
well event doesn't have a method project. You may have meant event.target. Anyway it looks as if the target of the event is probably the #projects element (but you need to check this in dev tools and see where the event is being captured).
Let's suppose that the event is being captured by the #projects element, well that element has an empty dataList. So wherever the capture is occurring, you need to put data: {sgid: project.to_sgid_param} on that element.
Finally, you should be able to populate the ajax request with the value sgid: event.target.dataset.sgid.
I have a form but Stimulus will handle its submission.
<%= form_with model: #booking, data: { controller: 'booking', action: 'booking#submitForm:prevent' } do |form| %>
<%= form.text_field :name, data: { 'booking-target' => 'name' } %>
<%= form.text_field :pet_name, data: { 'booking-target' => 'pet' } %>
<%= form.submit "Submit form" %>
<% end %>
import { Controller } from "#hotwired/stimulus"
export default class extends Controller {
static targets = ['name', 'pet']
submitForm() {
console.log('Submitting form')
console.log('Name: ' + this.nameTarget.value)
console.log('Pet: ' + this.petTarget.value)
}
}
The above code works but I have specified the target name for each field in the form. This isn't a problem with a small form but would be cumbersome if the form had many more fields. Is there a more elegant way to expose the field data?
You don't have to specify targets and just use the form directly:
submitForm(e) {
// get it directly from the form
console.log(e.target.name, e.target.name.value)
// or like this
console.log(e.target["pet_name"], e.target["pet_name"].value)
// get everything
const data = Object.fromEntries(new FormData(e.target).entries())
console.log(data)
}
BTW, you can also do this:
# <%= form.text_field :name, data: { 'booking-target' => 'name' } %>
<%= form.text_field :name, data: { booking_target: :name } %>
I'm working on a Rails 6 app, and want to update page view based on a dropdown value selected using XHR. Dropdown must use GET method coz I am calling index action.
I am using form_with which by default uses remote: true.
I am not using local: true.
I tried onchange: "Rails.fire(this.form, 'submit')" - this does send XHR request and receives a response but does not update view.
I tried onchange: "this.form.submit();" - this does a full page reload not utilizing XHR.
Code from app/views/users/index.html.erb
<%= form_with url: station_users_path(station_id: Current.user.home_station), method: :get do |form| %>
<%= form.select :user_status, options_for_select( { "Active users" => "unlocked", "Inactive users" => "locked"}, #user_status ), {}, { :onchange => "Rails.fire(this.form, 'submit')" } %>
<% end %>
Code from app/controllers/users_controller.rb
def index
#user_status = params[:user_status] || "unlocked"
#users = #station.users.send(#user_status) || []
#user_status == "unlocked" ? seperate_managers_from_users : #managers = []
end
In onchange just write one get_station_users() function. Inside that you can use ajax calling.
In forms
<%= form_with url: station_users_path(station_id: Current.user.home_station), id: “form_id”, method: :get do |form| %>
<%= form.select :user_status, options_for_select( { "Active users" => "unlocked", "Inactive users" => "locked"}, #user_status ), {}, { :onchange => "get_station_users()" } %>
<% end %>
Add Script
function get_station_users(){
$.ajax({
type: "GET",
url: "/station_users",
data: { $('#form_id').serialize(), },
dataType: 'script'
});
}
Your response will be as JS. So you can use index.js.erb
I need in my app to select from a list of provider a provider, and then, via ajax, I could see below a list of categories, that belongs to a specific provider. I have a form in activeadmin:
<%= semantic_form_for [:admin, #game], builder: ActiveAdmin::FormBuilder do |f| %>
<%= f.semantic_errors :state %>
<%= f.inputs do %>
<%= f.input :categorization_id, label: 'Provider', as: :select,
collection: Provider.all.map { |provider| ["#{provider.name}", provider.id] },
input_html: { class: (:provider_select), 'data-url': category_select_path(provider: 4) } %>
<%= f.input :categorization_id, label: 'Category',input_html: { class: ('category_dropdown') }, as: :select,
collection: Category.all.map { |category| ["#{category.name}", category.id]}%>
...
<% end %>
<%= f.actions %>
<% end %>
In activeadmin controller I have:
controller do
def ajax_call
#provider = Provider.find(params[:provider])
#categories = #provider.categories
respond_to do |format|
format.json { render json: #categories }
end
end
end
JS:
$(document).on('ready page:load', function () {
$('.select.input.optional').last().addClass('hidden_row');
$('#game_categorization_id').change(function () {
var id_value = this.value;
$('.hidden_row').removeClass('hidden_row');
$.ajax({
type: 'GET',
url: '/admin/games/category_select'
// data: id_value
})
});
});
And the routes: match '/admin/games/category_select' => 'admin/games#ajax_call', via: :get, as: 'category_select'
I don't have an idea, how can I pass providers id from collection into url. Currently, I have there category_select_path(provider: 4), but actually it has to be smth. like this - category_select_path(provider: provider.id) In the browser, in a Network tab of devtools I can see my category_select, but there is an error: Couldn't find Game with 'id'=category_select. I can't figure out from where does it come. Any suggestions? Thanks.
The problem was in routes: match '/admin/games/category_select' => 'admin/games#ajax_call', via: :get, as: 'category_select'. It is reserved by a show action of Activeadmin controller. So I changed my routes to: get '/admin/select_category' => 'admin/games#get_providers_categories', as: 'select_category', and added to ajax call data: {provider: provider}, so I could fire in params id of provider:
$.ajax({
type: 'GET',
url: '/admin/select_category',
data: {
provider: provider
},
success: (function (data) {
$('#select_category').children('option').remove();
$('#select_category').prepend('<option value=""></option>');
$.each(data.categories, function () {
$('#select_category').append('<option value="' + this.id + '">' + this.name + '</option>')
})
})
})