how to insert a button to open modal window inside a simple_form - ruby-on-rails-4

using Rails 4.1.6 , simple_form 3.1.0.rc2, Bootstrap 3
I am trying to set a button inside my simple_form to open a Bootsrap modal window to perform a js user selection
my simple form is the following :
.form-inputs
.row
.col-sm-8.col-md-8.col-lg-8
- if ((current_user.has_role? :superadmin) || (current_user.has_role? :media_admin))
.form-group
%button.btn.btn-default{:'data-toggle' => "modal" , :'data-target' => "#myModal"}
Select Owner of album
= f.input :user_id, as: :hidden, input_html: {value: current_user.id}
.row
.col-sm-8.col-md-8.col-lg-8
= f.input :title, :label => t(:title, scope: :album).capitalize
= f.input :description, as: :text, :label => t(:description, scope: :album).capitalize
and I added a standard bootstrap modal test
#myModal.modal.fade{ tabindex: "-1" ,role: "dialog", :'aria-labelledby' => "myModalLabel", :'aria-hidden' => "true"}
.modal-dialog
.modal-content
.modal-header
%button.close{type: "button", :'data-dismiss' => "modal" }
%span{:'aria-hidden' => true}
×
%span.sr-only
Close
%h4#myModalLabel.modal-title
Modal Title
.modal-body
= "Modal body"
.modal-footer
%button.btn.btn-default{type: "button", :'data-dismiss' => "modal" }
Close
%button.btn.btn-primary{type: "button", :'data-dismiss' => "modal" }
Save changes
When I hit the 'Select Owner of album' button, it acts as the submit one and try to save the form data.... not opening the modal form
Did I miss anything ?

I should rather use a link tag with button class....
.form-group
%a.btn.btn-success{href: "#", :'data-toggle' => "modal" , :'data-target' => "#myModal"}
Select Owner of album

Related

rails: param.require(:model) ActionController::ParameterMissing OR Empty

My goal is to create a new Reminder record with hardcoded values:
In the following structure:
Reminder belongs_to :deck
Deck has_one :reminder, dependent: :destroy
In deck controller I get to the view like this :
def repitition_alerts
#deck = Deck.find(params[:id])
#reminder = Reminder.new
end
On that page I want to create a new Reminder with a link_to:
<%= link_to "make alerts", deck_reminders_path(#deck, #reminder, {:action => :create}, next_alert: 'soon', interval: false), :method => :post %>
I am getting the following error in the browser:
ActionController::ParameterMissing in RemindersController#create
From terminal output:
ActionController::ParameterMissing (param is missing or the value is empty: reminder):
app/controllers/reminders_controller.rb:34:in `reminder_params'
app/controllers/reminders_controller.rb:19:in `create'
In the reminders_controller.rb I have:
def reminder_params
params.require(:reminder).permit(:deck_id, :interval, :next_alert, :alerts)
end
If I understand it correctly. Rails don't see the #reminder passed into it? But it's in the page. I can put this on the same page <%= #reminder %> and I see #<Reminder:0x007fc012fa00a8> rendered out on the page. So the object itself exists.
(Rails 4.2)
You need the params for reminder nested under :reminder. Switch your link_to to this:
<%= link_to "make alerts", deck_reminders_path(
#deck,
#reminder,
{:action => :create},
reminder: {
next_alert: 'soon',
interval: false
}
), :method => :post %>

Kendo UI External Editing Form

I'm Working on a project in which i have implemented Kendo Grid and when i click the edit button a popup for editing is displayed. But what i want is a separate panel alongside of kendo grid which i have made using [bootstrap][1] and i want to populate it with the editing detail of particular row clicked in the Kendo grid. I have attached the image below to give you an idea what i want. the help bordered area is where i want to populate it showing editable detail of selected row. Any Help??
#(Html.Kendo().Grid<UserItem>()
.Name("usergrid")
.HtmlAttributes(new { style = "width:100%" })
.Columns(columns =>
{
columns.Bound(o => o.FirstName);
columns.Bound(o => o.LastName);
columns.Bound(o => o.EmailAddress);
columns.ForeignKey(o => o.RoleId, (System.Collections.IEnumerable)ViewData["Roles"], "Id", "Description")
.Title("Role");
columns.ForeignKey(o => o.SystemRoleId, (System.Collections.IEnumerable)ViewData["SystemRoles"], "Id", "Description")
.Title("Sys Role");
columns.ForeignKey(o => o.TimeZoneId, (System.Collections.IEnumerable)ViewData["TimeZones"], "Id", "Description")
.Title("Time Zone");
columns.Bound(e => e.DefaultPageSize).Title("Default Page Size");
columns.Bound(o => o.IsActive).Title("Is Active");
columns.Bound(o => o.LastLoginDate).Format("{0:d}").Title("Last Login");
columns.Command(command => { command.Edit().Text("Edit"); });
})
.ToolBar(toolbar =>
{
toolbar.Template(#<text>
<div class="toolbar">
<span id="divCompany" style='#(roleName == Constants.SystemRoles.FifthMethod?"":"display:none;")'>
<label class="category-label" for="ddlCompany">Companies :</label>
#(Html.Kendo().DropDownList()
.Name("ddlCompany")
.DataTextField("Name")
.DataValueField("Id")
.AutoBind(true)
.Events(e => e.Change("CompanyChange"))
.HtmlAttributes(new { style = "width: 150px;" })
.BindTo(ViewBag.Companies)
.Value(Convert.ToString(ViewBag.CurrentCompanyID))
)
</span>
#Html.Kendo().Button().Name("btnNewUser").Content("New User").HtmlAttributes(new { #class = "k-button k-button-icontext k-grid-add pull-right" })
<button type="button" data-toggle="modal" data-target="#importUser-pop" class="k-button k-button-icontext pull-right">Import Users</button>
</div>
</text>);
})
.Editable(editable =>
{
editable.Mode(GridEditMode.PopUp);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model =>
{
model.Id(c => c.UserId);
model.Field(c => c.LastLoginDate).Editable(false);
})
.Create(create => create.Action("User_Create", "User").Data("GetCompanyId"))
.Read(read => read.Action("User_Read", "User").Data("GetCompanyId"))
.Update(update => update.Action("User_Update", "User"))
)
.Pageable()
.Sortable()
.Filterable()
.Events(e => e.Edit("grid_Edit"))
)
A complete example already exists in Kendo Docs how to edit records using external forms
A mvvm bounded section <div id="editForm"> to grid row using kendo.bind($("#editForm"), viewModel)

Correct view is not rendered - Rails 4

I'm trying to create a dropzone where users can drop multiple files at once. The problem is that it only renders the dropzone when I reload the webpage, and not when I open it for the first time. I mean, when I click to open the view that takes care of the uploads, I just get the browse and upload buttons that you'll see in my code, but when I reload the page I get the dropzone box. I can not see what I missing here. The code I wrote was:
_new.html.erb
<center>
<% #upload = Upload.new %>
<%= form_for #upload , html: { :multipart => true, class: "dropzone"} do |u| %>
<div class="fallback">
<%= u.file_field :file %><br>
<%= u.submit "Upload" %>
</div>
<% end %>
uploads.js.coffee
$(document).ready () ->
Dropzone.autoDiscover = false;
$("#new_upload").dropzone({
maxFilesize: 25,
paramName: "upload[file]",
addRemoveLinks: true
});
uploads_controller.rb
class UploadsController < ApplicationController
def new
#upload = Upload.new
end
def create
#upload = Upload.create(upload_params)
if #upload.save
render json: { message: "success" }, :status => 200
else
render json: { error: #upload.errors.full_messages.join(',')}, :status => 400
end
end
def destroy
#upload = Upload.find(params[:id])
if #upload.destroy
render json: { message: "Archivo eliminado." }
else
render json: { message: #upload.errors.full_messages.join(',') }
end
end
private
def upload_params
user = current_user.id
params.require(:upload).permit(:file,:user)
end
end
You could also notice that in the _new.html.erb file I'm redefining the #upload class variable, that was already defined in the controller. If I remove it the new action won't work. What's the problem there?
Please ask me if you need me to provide more code or details.
Thanks in advanced.
You should add 'data-no-turbolink': true to the link that opens that page. Turbolinks doesn't always play nice with $(document).ready so this will call the link without turbo links.
There is also a gem called jquery-turbolinks that might make the current version work without data-no-turbolink

spree_fancy footer image change

I am creating an spree application. I want to change the footer image but I can not understand why I could not access the image tag in footer four columns. Is there any way to change footer image? And another one is, image source could not find image. Thanks in advance.
My update_footer is:
Deface::Override.new(:virtual_path => "spree/shared/_footer",
:name => "Change logo",
:replace => "div.four.columns img#footer-logo",
:text =>
'<img id="footer-logo" src="logo.png" alt=" Theme"></img>'
)
And the page:
Deface operates on the ERB templates themselves not their output.
The key line in the footer shows the following:
<%= image_tag "spree/fancy/logo-white.png", :alt => "Spree Demo Theme", :id => "footer-logo" %>
Your selector should instead be something like:
:replace => "erb[loud]:contains('footer-logo')"
as that is what is in the template.

Capybara unable to click form button in modal and different capybara drivers see different things

Ok, so my problem is Capybara cannot click the submit button of a form (generated with simple forms) that resides in a modal(Bootstrap v2.3). Please note that the following code is very messy learners code. I am attempting to get it tested up so that I can refactor the hell out of it.
Modal code:
<div class="modal hide" id="updateModal">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-header"
<h3>Update your score</h3>
</div>
<div class="modal-body">
<%= simple_form_for #update do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.input :newread , :label => "Amount Read", :placeholder => 'pages/screens/minutes #' , :input_html => { :maxlength => 5 } %>
<%= f.input :medium, :label=> "Medium Read", :collection => ["book", "manga", "game", "fgame", "net", "lyric", "subs", "news", "sent", "nico" ], :prompt => "Select medium read" %>
<% lang_list = Update::user_langs(current_user,ApplicationHelper::curr_round) %>
<%= f.input :lang, :label => "Language", :collection => lang_list, :prompt => "Select your language" %>
<%= f.input :repeat, :label => "Repeat number", :collection =>0..50 , :priority => '0' %>
<%= f.input :dr, :inline_label => 'Double Rowed?', :hint => 'Only to be used with Japanese books', :label => false %>
</div>
<div class="modal-footer">
<%= submit_tag 'Cancel', :class => "btn btn-danger", 'data-dismiss' => "modal" %>
<%= f.button :submit, 'Submit Update' , :class => "btn btn-primary"%>
</div>
<% end %>
</div>
Round Controller index function:
def index
#entrants = Round.includes(:user).where(:round_id => "#{ApplicationHelper::curr_round}")
if #entrants == nil
redirect_to root_url, :flash => { :error => "There are currently no users registered for this round." }
end
list = Round.where(:round_id => ApplicationHelper::curr_round).select(:tier).uniq
lang_list = Update.where(:round_id => ApplicationHelper::curr_round).select(:lang).uniq
#tier = list.map(&:tier)
#tier = #tier.sort{ |a,b| Tier::TIER_VALUES[a.to_sym] <=> Tier::TIER_VALUES[b.to_sym]}
#lang = lang_list.map(&:lang)
if signed_in?
#update = current_user.updates.build
end
end
Update_page_spec:
describe "Update Pages" do
before do
sign_in #omniauth fake signin
end
subject { page }
describe "a registered user submitting an update", :js => true do
before do
user = User.find_by_uid(123545)
user_round = user.rounds.create!(round_id: ApplicationHelper::curr_round, lang1: 'jp',
lang2: 'en', lang3:'zh', tier: 'Bronze', book: 10, manga: 10,
fgame: 10, game: 10, net: 10, news: 10, lyric: 10,
subs: 10, nico: 10, sent:10, pcount: 1010)
visit round_path(ApplicationHelper.curr_round)
end
it "should update successfully" do
click_link("Update")
fill_in('update[newread]', :with => '10')
select "book", :from => "Medium Read"
select "Japanese", :from => "Language"
click_button "Submit Update"
save_and_open_page
page.should have_selector('alert-success', :text => "Update successfully submitted")
end
end
end
So I do this and when I check what save_and_open_page sees and its the page with no changes at all. No evidence of the button having been pressed what so ever. So I figure that the modal being js generated might be a problem so I add , :js => true to the describe line, install the webkit driver and add Capybara.javascript_driver = :webkit to my spec_helper.rb file and run it again.
This time I am greeted to the "Signed in" flash from the top before block on the home page instead of being on the ranking page.
So I figure maybe this might turn out better with the selenium driver so I install that and try it again but this time my app complains about there being no one registered for that round. The only way for this to happen is if #entrants is nil and I have checked with pry that this is definitely not the case at least as far as the database is concerned.
Any help you guys can give will be GREATLY appreciated. I have no idea how to get this thing to press my button.
My recommendation:
Clean up the code as much as you can. That will help clarify what is happening, and what may be responsible for the unexpected behavior.
Don't rely on save_and_open_page to accurately show you what the driver is seeing exactly
You definitely need js for the Bootstrap modal
Get selenium working with Firefox so you can see on your screen if the modal is opening properly or not.
You may need the database_cleaner gem to properly access your db with the users you are creating.
you can also try the poltergeist/phantom gems for a js compatible driver. That has screenshot capabilities
Those pieces should show you what's happening with the modal.