In the process of developing a wiki clone, I am faced with an issue involving JavaScript. When I navigate to a specific page by clicking on a link, the JavaScript does not function properly until I refresh the page. The JavaScript aspect mainly involves an autocomplete search feature that displays user names matching the input in the search box at the bottom of the page.
One of the features in my app is a link on the show#wikis view that redirects users to the edit#wikis view through the following code snippet:
#views/wikis/show.html.erb
<%= link_to "Edit", edit_wiki_path(@wiki), class: "btn btn-success" %>
However, when this link is clicked and the edit#wikis page loads, the JavaScript and AJAX calls cease to work. Below is the views/wikis/edit.html.erb page which contains the form partial for collaborators:
<h1>Edit Wiki</h1>
<div class="row">
<div class="col-md-4">
<p>Guidelines for Wikis</p>
<ul>
<li>Make sure it rhymes.</li>
<li>Avoid using the letter "A".</li>
<li>Excessive hashtags will result in being banned.</li>
</ul>
</div>
<div class="col-md-8">
<%= form_for @wiki do |f| %>
<div class="form-group">
<%= f.label :title %>
<%= f.text_field :title, class: 'form-control', placeholder: "Enter post title" %>
</div>
<div class="form-group">
<%= f.label :body %>
<%= f.text_area :body, rows: 20, class: 'form-control', placeholder: "Enter post body" %>
</div>
<%if policy(@wiki).edit_form_settings? %>
<div class="form-group">
<%= f.label :public, class: 'checkbox' do %>
<%= f.check_box :public %> Public wiki
<% end %>
</div>
<% end %>
<div class="form-group">
<%= f.submit "Save", class: 'btn btn-success' %>
</div>
<% end %>
</div>
</div>
<%if policy(@wiki).edit_form_settings? %>
<%= render partial: "collaborations/new", locals: { wiki: @wiki, collaboration: @collaboration} %>
<% end %>
The form partial from
views/collaborations/_new.html.erb<%= form_for [wiki, collaboration] do |f|%>
<div class = "col-md-8">
<div class = "form-group">
<%= f.label :user_name %>
<%= f.text_field :user_name, class: 'form-control', placeholder: "Enter name" %>
</div>
<%= f.hidden_field :user_id %>
<div class = "form-group">
<%= f.submit class: 'btn btn-success' %>
</div>
</div>
<div id="user_data" class="dropdown">
<ul class="list-group" style= "width:50%">
<!-- <li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li> -->
</ul>
</div>
</div>
</div>
</div>
<%end%>
The relevant JavaScript code can be found in the file
assets/javascripts/collaborations.js.erb$(document).ready(function()
{
$('#collaboration_user_name').on('keyup', function() {
text = $(this).val();
// alert(text);
$.ajax({ url: "/collaborations?collaboration="+text,
beforeSend: function( xhr ) {
xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
}
}).done(function( data ) {
console.log( "data:", data );
users = JSON.parse(data);
$("#user_data ul li").remove();
$.each( users, function( index, value ) {
$("#user_data ul").append("<li class='list-group-item' value ="+ users[index].id+">"+users[index].name+ ", " +users[index].email+ "</li>");
});
<% @user = "data" %>;
$("#user_data").append(JSON.parse(data).name);
$(' .list-group-item').click(function() {
//alert( $(this).val() );
$('#collaboration_user_name').val($(this).text().split(",")[0]);
$('#collaboration_user_id').val($(this).val());
});
});
});
});
Lastly, the controller action responsible for handling the AJAX calls is collaboration_search within
controllers/collaborations_controller.rbclass CollaborationsController < ApplicationController
respond_to :html, :js
def collaboration_search
#name_search = params[:collaboration][:user_name].to_s
@users_by_name = User.where('name Like ?', "%#{params[:collaboration]}%").limit(4)
puts @users_by_name.to_a
render json: @users_by_name
end
end
I have attempted to resolve the issue by removing the turbolinks gem without success. Any assistance in resolving this problem would be greatly appreciated!