I have a curious issue. Elsewhere in my site this exact code works just fine but something is different here. The only difference I’m doing is in the way I call the code. The one I will show you here is called via a fetch request in a stimulus controller. The issue is that upon getting back a turbo stream response from the server with a correctly formatted turbo frame element to a page with a matching turbo frame tag, nothing happens. No error, no useful output in the logs, the modal doesnt show up on screen nor does the modal html get updated.
If I instead call this path from a link_to helper for example, it works just fine. Problem is I need this to be through javascript as I need to gather up data for a submit of sorts as mostly shown below.
HTML Button/Controller
<%= turbo_frame_tag :modal %>
<div data-controller="dynamic" data-dynamic-grouping-value="<%= author_id %>">
<%= g.label :element_type, "Element Type" %>
<%= g.select :element_type, get_select_data, { include_blank: "Pick a Type" }, class: "select element-type", "data-dynamic-target": "type" %>
<br>
<div class="button lrg-button" data-action="click->dynamic#get_modal">Choose Element Content</div>
<div class="element-data" id="element-data-" data-dynamic-target="data"><%= get_element_data(g.object) %></div>
</div>
Stimulus Controller
let position = $(this.dataTarget).attr('id').replace('element-data-', '');
let data_ids = [];
$.each($(this.dataTarget), function(index, value){
data_ids.push($(value).val());
})
if(this.typeTarget.value !== '') {
let data = {
type: this.typeTarget.value,
data_ids: data_ids,
position: position,
grouping: this.groupingValue
}
call("/show_element_modal", data, "modal", "update")
}
The actual fetch method in call
fetch(url, {
method: 'post',
body: JSON.stringify(data),
headers: {
"X-CSRF-Token": csrfToken,
"Content-Type": "application/json"
},
responseKind: "text/vnd.turbo-stream.html"
})
.then(response => response.text())
.then(html => check_action(html, action, id_to_affect))
Rails Modal methods
def show_element_modal
show_modal(
params[:type].constantize.all,
params[:data_ids],
params[:type].constantize,
params[:position],
:update_element,
"Choose Content",
true,
"Confirm",
"Cancel",
true,
params[:grouping]
)
end
def show_modal(data, active_ids, model, object_id, action, title = "Title", searchable = false, confirm = "Save", cancel = "Cancel", multi_select = true, extra = nil)
get_modal(data, active_ids, model, object_id, action, title, searchable, confirm, cancel, multi_select, extra)
render turbo_stream: turbo_stream.update(:modal, partial: 'shared/modal/show_modal' ), content_type: "text/vnd.turbo-stream.html"
end
Final Modal HTML to render in partial
<div class="modal">
<div class="column">
<input type="hidden" name="<%= @model.to_s %>" id="model" value="<%= @model.to_s %>">
<input type="hidden" name="<%= @action %>" id="action" value="<%= @action %>">
<input type="hidden" name="<%= @extra %>" id="extra" value="<%= @extra %>">
<input type="hidden" name="<%= @multi_select %>" id="multi_select" value="<%= @multi_select %>">
<input type="hidden" name="<%= @object_id.to_s %>" id="object_id" value="<%= @object_id.to_s %>">
<div class="modal-title"><%= @title %></div>
<% if @searchable %>
<div class="row content-search">
<%= text_field_tag :search, {}, class: "text-input", id: "content-search-input" %>
<div class="submit-content-search button">Search</div>
</div>
<% end %>
<div class="column modal-list">
<% @modal_data.each do |data| %>
<% name = data.title if data.has_attribute?(:title) %>
<% name = data.name if data.has_attribute?(:name) %>
<div class="row modal-item <%= "active" if @active_ids.include?(data.id) %>" data-item="<%= data.id %>"><%= name %></div>
<% end %>
</div>
<div class="row modal-controls">
<div class="modal-save button"><%= @confirm %></div>
<div class="modal-cancel button"><%= @cancel %></div>
</div>
</div>
</div>