I am trying to dynamically load form partials based on a select dropdown change. I am getting an error though stating failed to construct URL, invalid URL. I’m not really sure what this is looking for. Logging the URL to console shows this: /scheduleevents/select
Can anyone help me out?
scheduleevent form:
<select data-controller="remote-select"
data-remote-select-url-value="<%= scheduleevents_select_path %>"
data-remote-select-name-value="form[occurrence]"
data-action="change->remote-select#update">
<%= Scheduleevent.occurrences.each do |occurrence| %>
<option value="<%= occurrence.second %>"><%= occurrence.first %></option>
<% end %>
</select>
remote_select_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static values = {
url: String,
name: String,
}
connect() {
console.log("Connected to controller.");
this.element.setAttribute('data-action', 'change->remote-select#update');
}
update() {
console.log(this.urlValue);
const url = new URL(this.urlValue);
url.searchParams.append(this.nameValue, this.element.value);
Turbo.visit(url, { action: "replace" });
}
}
Route:
get 'scheduleevents/select' => 'scheduleevents#select'
scheduleevents controller:
def select
@selected = params[:form][:occurrence]
end
select partial:
<%= turbo_frame_tag :section_two %>
<%= render partial: @selected %>
<% end %>