I am implementing jquery on devise views on a sample rails application. Before I implement it on a production code I wanted to first try it on a sample app.
I have a welcome controller and view
routes.rb is as follows
get 'welcome/index'
devise_for :users
root 'welcome#index'
And the partial templates for both register and login lies in the following files as follows:
app/views/welcome/_login_modal.html.erb
<div class="modal hide fade in" id="login">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h2>Sign in</h2>
</div>
<div class="modal-body">
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<div><%= f.label :email %><br />
<%= f.email_field :email, :autofocus => true %></div>
<div><%= f.label :password %><br />
<%= f.password_field :password %></div>
<% if devise_mapping.rememberable? -%>
<div><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
<% end -%>
<%= f.submit "Sign in", :class => 'btn btn-small btn-success' %>
<% end %>
</div>
<div class="modal-footer">
<%= render "devise/shared/links" %>
</div>
</div>
I have added my javascript code in the application.html.erb file
itself
<!DOCTYPE html>
<html>
<head>
<title>PopupDevise</title>
<%= link_to "Login", "#login", "data-toggle" => "modal", :class => 'btn btn-small' %>
<%= link_to "Sign up", "#sign_up", "data-toggle" => "modal", :class => 'btn btn-small btn-success' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<script type="text/javascript"> $(function ()
{ $("#myModal").modal({show:false }); </script>
</head>
<body>
<%= render "welcome/login_modal" %>
<%= render "welcome/sign_up_modal" %>
<%= yield %>
</body>
</html>
Now when I run rails s everything is visible. And when I click on either Login or Sign Up button the screen goes transparent grey but I don't see any popups modals. I am not that good in js or jquery part still learning. Could somebody please tell me how do I fix this ?
I can help you with this.
Remove
hide and in
from line
<div class="modal hide fade in" id="login">
You should be able to see modal when you click "Login" button.
Also remove bellow script tag inside <head> </head> as you are not using a modal with id myModal.
<script type="text/javascript"> $(function ()
{ $("#myModal").modal({show:false }); </script>
Related
I am trying to use AJAX functionality in order to create a new Task in a simple ToDo list application.
Currently the list is set up like this:
<h2> TO DO </h2>
<div class="wrapper">
<ul id="incomplete">
<% #task.each do |f| %>
<% if f.complete == false %>
<div id="<%= f.id %>">
<p class= "title"><%= f.title %></p>
<%= form_for f, remote: true do |task| %>
<%= task.check_box :complete, class: "check_box" %>
<%= task.submit %>
<% end %>
</div>
<% end %>
<% end %>
</ul>
</div>
<h2> COMPLETED </h2>
<div class="wrapper">
<ul id="completed">
<% #task.each do |f| %>
<% if f.complete == true %>
<div id="<%= f.id %>">
<p class="title"><%= f.title %></p>
<%= form_for f, remote: true do |task| %>
<%= task.check_box :complete, class: "check_box" %>
<%= task.submit %>
<% end %>
</div>
<% end %>
<% end %>
</ul>
</div>
<p id="new_link"><%= link_to "New Task", new_task_path, remote: true %></p>
<div id="new_task">
</div>
When the "New Task" link is pressed, it executes a js file which loads the following partial:
<%= form_for #task, remote: true do |f| %>
<%= f.label :title %>
<%= f.text_field :title %>
<%= f.submit "Create" %>
<% end %>
My create method is below:
def create
#task = Task.new(task_params)
#task.save
respond_to do |format|
format.html
format.js
end
end
When I remove the "remote: true" from my partial form, page resets and the new task appears in the new , however, when I do use the "remote: true", and execute my create.js.erb file, nothing is changed in the DOM. Here is my create.js.erb file:
$('#incomplete').append($("#<%= #task.id %>"));
console.log("<%= #task.title %> has been saved.");
I'm not receiving any errors in my consoles, and the console.log line on the create.js.erb logs to the console without a problem the task title and the rest of the string.
I'm pretty lost in why the create.js.erb file is not manipulating the DOM. This code provides no response visually, only the post to the console.
I have the Devise gem currently installed and am using it for autheraization for my webapp.
I have the login/logout links on my front page thus..
<ul class="user_nav">
<% if user_signed_in? %>
<li>Signed in as <%= current_user.email %> | <%= link_to('Logout', destroy_user_session_path, :method => :delete ) %></li>
<% else %>
<li> <%= link_to('Login', new_user_session_path, :id => 'login') %> | <%= link_to('Create an account', new_user_registration_path, :id => "create") %></li>
<% end %>
</ul>
I'm trying to utilize the Twitter-Bootstrap Modal feature so put my login form inside a separate box that would show up when the user clicks on it.
How to do it?
This example uses Simpleform
#Modal
<div class="modal" id="loginModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Sign in</h3>
</div>
<div class="modal-body">
<%= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name),:html => { :class => 'form-horizontal' }) do |f| %>
<%= f.input :email, :required => false, :autofocus => true %>
<%= f.input :password, :required => false %>
<%= f.input :remember_me, :as => :boolean if devise_mapping.rememberable? %>
<%= f.button :submit, "Sign in", :class => 'btn' %>
<% end %>
</div>
</div>
#link
<%= link_to('Login', "#loginModal", :id => 'login', "data-toggle" => "modal") %>
#javascript
$('#loginModal').modal(options)
I want to get ".comment_container" for the post just made and place it after the last comment.
Each comment and it's related content is stored in a ".comment_container" class.
The code below does what I need but not 100%. Rather than append the word TEST I want to append the new comment_contaner holding the comment just posted.
I've been cracking at this all day and this is how far I've come. I would appreciate some solutions with examples if possible.
JQuery:
$('#new_comment').on('ajax:success', function(){
$(this).parent('.post_content').find('.comment_container:last').after("TEST");
});
<% sleep 1 %>
HTML:
<div class="postHolder">
<nav class="micropostOptions">
<ul class="postMenu">
<li class="deletePost"><%= link_to content_tag(:span, "Delete post"), m, :method => :delete, :confirm => "Are you sure?", :title => m.content, :class => "message_delete" %>
</li>
<li class="disableCommenting"><%= link_to content_tag(:span, "Pause commenting"), "2" %></li>
<li class="blockCommenter"><%= link_to content_tag(:span, "Block commenter"), "3" %></li>
<li class="openInNewWindow"><%= link_to content_tag(:span, "Open in new window"), "4" %></li>
<li class="reportAbuse"><%= link_to content_tag(:span, "Report abuse"), "5" %></li>
</ul>
</nav>
<%= link_to image_tag(default_photo_for_current_user, :class => "poster_photo"), current_users_username %>
<div class="post_content">
<div class="post_container">
<div class="userNameFontStyle"><%= link_to current_users_username.capitalize, current_users_username %> -
<div class="post_time"> <%= time_ago_in_words(m.created_at) %> ago.</div> </div>
<%= simple_format h(m.content) %> </div>
<% if m.comments.any? %>
<% comments(m.id).each do |comment| %>
<div class="comment_container">
<%= link_to image_tag(default_photo_for_commenter(comment), :class => "commenter_photo"), commenter(comment.user_id).username %>
<div class="commenter_content"> <div class="userNameFontStyle"><%= link_to commenter(comment.user_id).username.capitalize, commenter(comment.user_id).username %> - <%= simple_format h(comment.content) %> </div>
</div><div class="comment_post_time"> <%= time_ago_in_words(comment.created_at) %> ago. </div>
</div>
<% end %>
<% end %>
<% if logged_in? %>
<%= form_for #comment, :remote => true, :html => {:class => "new_comment} do |f| %>
<%= f.hidden_field :user_id, :value => current_user.id %>
<%= f.hidden_field :micropost_id, :value => m.id %>
<%= f.text_area :content, :placeholder => 'Post a comment...', :class => "comment_box", :rows => 0, :columns => 0 %>
<div class="commentButtons">
<%= f.submit 'Post it', :class => "commentButton" %>
<div class="cancelButton"> Cancel </div>
</div>
<% end %>
<% end %>
</div>
</div>
Comments controller:
class CommentsController < ApplicationController
def create
#comment = Micropost.find(params[:comment][:micropost_id]).comments.build(params[:comment])
respond_to do |format|
if #comment.save
unless params[:comment][:recipient].blank? # this will be blank when current user is commenting/replying on their own wall
recipient = User.find(params[:comment][:recipient])
UserMailer.new_wall_post_comment_notification(recipient, current_user).deliver if recipient.email_notification == 1
end
format.js { render :post_comment }
else
format.js { render :form_errors }
end
end
end
end
Comment partial:
<div class="comment_container">
<%= link_to image_tag(default_photo_for_commenter(#comment), :class => "commenter_photo"), commenter(#comment.user_id).username %>
<div class="commenter_content">
<div class="userNameFontStyle"><%= link_to commenter(#comment.user_id).username.capitalize, commenter(#comment.user_id).username %> - <%= simple_format h(#comment.content) %>
</div>
</div>
<div class="comment_post_time">
<%= time_ago_in_words(#comment.created_at) %> ago.
</div>
</div>
Seems to be working apart from 1 minor issue. Let's say I post 4 comment... 1 after each other. First comment 1, second 2, third 3 and fourth 4.. e.g. 1, 2, 3 and 4 the result I get is this:
I have a feeling it's something to do with some kind of reset needing to be done after each comment is left. After refreshing the comments display as expected. 1, 2, 3 and 4. Any thoughts?
Kind regards.
You should make the partial for rendering your Comments (I guess it should be the /views/comments/_comment.html.erb).
Then just replace:
.after("TEST");
with:
.after("<%= j render #comment %>");
This along with the advice from jdoe fixed my issue
$('.new_comment').off().on('ajax:success', function(e){
e.preventDefault();
$(this).parent('.post_content').find('.comment_container:last').after("<%= j render 'comments/partials/comment' %>");
$('#comment_content').removeClass("comment_box_focused").addClass("comment_box");
$(".commentButtons").removeClass("displayButtons");
$('#comment_content').val("");
<% sleep 1 %>
});
I'm trying to use tabifier in my rails app so I have:
<%= stylesheet_link_tag "example", "example-print" %>
<%= javascript_include_tag 'tabber.js' %>
<script>
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear. */
document.write('tabber{display:none;}');
</script>
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1</h2>
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| %>
<%= devise_error_messages! %>
<div><%= f.label :peeruser %><br />
<%= f.select :peeruser, [['Not yet','not yet'],['Beginner','beginner'],['Intermediate','intermediate'],['Expert','expert']] %></div>
<div><%= f.label :discipline %><br />
<%= f.text_field :discipline %></div>
<div><%= f.label :course %><br />
<%= f.text_field :course %></div>
<div><%= f.label :concept %><br />
<%= f.select :concept, [['Yes','yes'],['No','no']] %></div>
<div><%= f.submit "Continue" %></div>
<% end %>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
</div>
<%= link_to "Back", :back %>
And I can't figure out why it's not loading correctly like the examples:
http://www.barelyfitz.com/projects/tabber/
I put the javascript if under public->javascripts and the css under public->stylesheets - like it just shows the text, none of it is linkable and it displays all the form information.
not exactly a solution, but why not use a more popular and feature-rich library ?
JqueryUI features a nice and simple way to implement tabs.
Once the lib is loaded, all you will have to do is
<script>
$(function() {
$( ".tabber" ).tabs();
});
</script>
then add some links, reclass all your divs and bam ! instant tabs.
Plus, you have all the Jquery Lib, which is pure awesomeness.
Turns out I had not put the css and js in the assets folder which was causing the problem.
I don't have any idea why code works on development machine, but doesn't work on production server. I am trying to create live chat between operator and user. In development machine the user's interface and operator's works fluently. I am using pusher as web-sockets. Actually every js.erb view does not work at all in production server. There is some parts of my view.
_show.html.erb:
<%= content_tag :div, id: "chat-heading", class: %w(mpreview migedit r).include?(action_name) ? 'panel-heading2' : 'panel-heading', style: "font-size:14px;" do %>
<%= t :chat_heading %>
<i class="fa fa-arrow-up" aria-hidden="true" style="float: right;"></i>
<% end %>
<div class="panel panel-primary" style="display: none" id="chat-primary" tabindex="0">
<%= content_tag :div, class: 'panel-body', id: 'messages', data: {url: "/#{params[:locale]}/chats/#{#chat.id}/messages/"} do %>
<% unless #messages.total_pages < 2 %>
<div class="row" id="show-more-aligment">
<div class="col-md-4 col-md-offset-5" style="margin-bottom: 20px;">
<%= link_to 'Show more', url_for(:controller => 'home', :action => 'index', :page => 2, :locale => params[:locale]), :remote => true, :id => 'show_more_link' %>
</div>
</div>
<% end %>
<ul class="chat" id="chat-ul">
<% #messages.reverse_each do |message| %>
<%= render partial: 'messages/message', locals: {message: message} %>
<% end %>
</ul>
</div>
<div class="panel panel-footer">
<div class="row">
<%= simple_form_for #chat.messages.build, url: "/#{params[:locale]}/chats/#{#chat.id}/messages/", :user_id => current_user, remote: true, :html => {:autocomplete => "off"} do |f| %>
<div class="col-md-10">
<%= f.input :text, required: true, as: :string, :class => 'btn-input form-control input-sm', :placeholder => "Type your message here...", :label => false %>
</div>
<div class="col-md-2">
<%= f.submit 'Send', :class => 'btn-chat btn btn-warning btn-sm form-control msg-submit' %>
</div>
<% end %>
<% end %>
</div>
</div>
render of _show.html.erb:
<% if user_signed_in? %>
<%= content_tag :div, class: %w(mpreview migedit r).include?(action_name) ? 'welcome_chat2' : 'welcome_chat' do %>
<%= render 'chats/show' %>
<% end %>
<% end %>
controller for create method:
def create
#message = #chat.messages.new(params[:message])
#message.user = current_user
respond_to do |format|
if #message.save
format.html {redirect_to #chat}
format.js { Pusher.trigger("live_chat_#{#chat.id}", 'chat', {message: #message}) }
else
format.html {render 'new'}
format.js
end
end
end
create.js.erb:
$('#message_text').val('');
index.js.erb(adding new sent message to chat div):
if ($('#chat-ul li').length == 0){
$('ul.chat').html("<%= escape_javascript(render partial: 'messages/message', locals: {message: #message}) %>");
}
else {
$('ul.chat li:last').after("<%= escape_javascript(render partial: 'messages/message', locals: {message: #message}) %>");
}
That's it if I didn't miss something. Basically this code should add new message to database and render it on form send. Actually it saves to database but do not append it to the messages div. It gives 500 internal error. And what is most important in development machine the same exact code works like a charm, but in production it does not. This must be something with server or environment config I guess. Maybe someone has some ideas? Thanks in an advance.
ERROR IS HERE