I created an Geddy app using scaffold like this :
geddy gen app test
geddy gen secret
geddy gen scaffold project title:string description:string screenshot:string url:string
Everything works so far, but I'd like to edit the "Add" view to modify the "screenshot" input to an "file" input.
form.html.ejs :
<div class="control-group">
<label for="title" class="control-label">title</label>
<div class="controls">
<%- contentTag('input', project.title, {type:'text', class:'span6', name:'title'}) %>
</div>
</div>
<div class="control-group">
<label for="description" class="control-label">description</label>
<div class="controls">
<%- contentTag('input', project.description, {type:'text', class:'span6', name:'description'}) %>
</div>
</div>
<div class="control-group">
<label for="screenshot" class="control-label">screenshot</label>
<div class="controls">
<%- contentTag('input', project.screenshot, {type:'file', class:'span6', name:'screenshot'}) %>
</div>
</div>
<div class="control-group">
<label for="url" class="control-label">url</label>
<div class="controls">
<%- contentTag('input', project.url, {type:'text', class:'span6', name:'url'}) %>
</div>
</div>
add.html.ejs :
<div class="hero-unit">
<form id="project-form" class="form-horizontal" action="/projects" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>Create a new Project</legend>
<% if(params.errors) { %>
<div class="control-group">
<ul>
<% for(var err in params.errors) { %>
<li><%= params.errors[err]; %></li>
<% } %>
</ul>
</div>
<% } %>
<%- partial('form', {project: {}}) %>
<div class="form-actions">
<%- contentTag('input', 'Add', {type: 'submit', class: 'btn btn-primary'}) %>
</div>
</fieldset>
</form>
</div>
My error when I click on the submit button :
Title: "title" is required..
My controller :
this.create = function (req, resp, params) {
var self = this
, project = geddy.model.Project.create(params);
if (!project.isValid()) {
this.respondWith(project);
}
else {
project.save(function(err, data) {
if (err) {
throw err;
}
self.respondWith(project, {status: err});
});
}
};
The "project" object is empty...
Related
I have a form, the form has 'fields_for :addresses' and renders partial 'address_fields' in that 'fields_for :addresses', in that partial 'address_fields' there is 'fields_for :sub_address', when the browser is first loaded, the 'fields_for :sub_address' in the partial 'address_fields' appears, but when the 'Add Addresses' button is pressed the "fields_for :sub_address" element does not appear. So basically I have a nested form inside the nested form 'addresses', but it doesn't render when I click on 'Add Address'.
This is my 'Add Address' javascript code:
class AddFields {
constructor() {
this.links = document.querySelectorAll('.add_fields');
this.iterateLinks();
}
iterateLinks() {
if (this.links.length === 0) return
this.links.forEach(link => {
link.addEventListener('click', e => {
this.handleClick(link, e)
});
});
}
handleClick(link, e) {
if (!link || !e) return;
e.preventDefault();
let time = new Date().getTime();
let linkId = link.dataset.id;
let regexp = linkId ? new RegExp(linkId, 'g') : null
let newFields = regexp ? link.dataset.fields.replace(regexp, time) : null
newFields ? link.insertAdjacentHTML('beforebegin', newFields) : null
}
}
window.addEventListener('turbolinks:load', () => new AddFields());
here is my views:
new.html.erb
<%= form_with model: #data, url: address_path(token: params[:token]) do |form| %>
<div class="row">
<div class="col">
//another html here
</div>
</div>
<fieldset>
<div class="card mt-2">
<div class="card-body">
<%= form.fields_for :address do |addr| %>
<%= render 'sub_address_fields', form: addr %>
<% end %>
<%= link_to_add_fields 'Add Address', form, :addr %>
</div>
</div>
</fieldset>
<div class="form-group">
<%= form.submit :'Submit', name: 'submit', class: 'btn btn-primary mt-2' %>
</div>
<% end %>
```
partial view:
<div class="nested-fields">
<%= form.hidden_field :_destroy %>
<div class="row">
<div class="col">
//another html here
</div>
<%= form.fields_for :sub_address do |sub_addr| %>
<div class="row">
<div class="col">
<div class="form-group mt-2">
<div class="custom-file form-control">
<%= sub_addr.label :id_card, class: 'id-card-label', for: 'id-card-file' %>
<%= sub_addr.file_field :attachment_id_card, id: 'id-card-file' %>
</div>
</div>
</div>
<div class="col">
<div class="form-group mt-2">
<div class="custom-file form-control">
<%= sub_addr.label :self_assessment, class: 'self-assessment-label', for: 'self-assessment-file' %>
<%= sub_addr.file_field :attachment_self_assess, id: 'self-assess-file' %>
</div>
</div>
</div>
<div class="col">
<div class="form-group mt-2">
<div class="custom-file form-control">
<%= sub_addr.label 'SWAB', class: 'swab-label', for: 'swab-file' %>
<%= sub_addr.file_field :attachment_swab, id: 'swab-file' %>
</div>
</div>
</div>
</div>
<% end %>
<div class="form-group">
<%= link_to "Remove", '#', class: "remove_fields"%>
</div>
</div>
and this is the helper:
module Frontend::Data::DataHelper
def link_to_add_fields(name, form, association)
new_object = form.object.send(association).klass.new
id = new_object.object_id
fields = form.fields_for(association, new_object, child_index: id) do |builder|
render(association.to_s.singularize + '_fields', form: builder)
end
link_to(name, '#', class: 'add_fields', data: {id: id, fields: fields.gsub('\n', '')})
end
end
Is javascript not able to display the form generated from the 'render' function on rails?
I am using loop in nested forms in rails and i wanted to pass object id through render partial form
app/model/contract_booking_attached_trips.rb
class ContractBookingAttachedTrip < ApplicationRecord
has_many :contract_attached_trip_sheets
accepts_nested_attributes_for :contract_attached_trip_sheets ,allow_destroy: true
belongs_to :booking_history
belongs_to :duty_type
belongs_to :vehicle_make
belongs_to :vehicle_category
end
app/model/contract_attached_trip_sheet.rb
class ContractAttachedTripSheet < ApplicationRecord
belongs_to :contract_booking_attached_trip
end
app/controller/contract_booking_attached_trips_controller
def edit
#contract_booking_attached_trip = ContractBookingAttachedTrip.find(params[:id])
booking_history_id = #contract_booking_attached_trip.booking_history_id
#booking_history = BookingHistory.find(booking_history_id)
#booking_trips = #booking_history.transport_plans
#trip_count = #booking_history.transport_plans.count
#contract_booking_attached_trip.contract_attached_trip_sheets.build
end
app/views/ContractBookingAttachedTrips/_form.html.erb
<div class="container-fluid">
<%= form_for(#contract_booking_attached_trip, :html => {class: "form-horizontal",id: "contract_trip_sheet_validate"}) do |f| %>
<div class="card">
<div class="card-header">
<h5 class="panel-title float-left" style="padding-top: 7.5px;">Duty Slip</h5
</div> <!-- /.card header -->
<div class="card-body">
<div class="card">
<div class="card-body" style="margin-bottom: -50px;">
<div class="row">
<div class="col-md-6 col-lg-6 mb-4 mb-lg-4">
<div class="table-responsive ">
<!--Table-->
<table id="dataTable" class="table table-borderless table-sm" cellspacing="0">
<!--Table body-->
<tbody>
<tr>
<th>Customer</th>
<th><b><%= User.find(#contract_booking_attached_trip.booking_history.try(:user_id)).try(:username) %></b></th>
</tr>
</tbody>
<!--Table body-->
</table>
<!--Table-->
</div> <!-- table -->
</div>
<div class="col-md-6 col-lg-6 mb-4 mb-lg-4">
<div class="table-responsive ">
<!--Table-->
</div> <!-- table -->
</div>
</div><!-- row1 -->
</div> <!-- inner card body -->
</div> <!-- inner card -->
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h6 class="float-left">Trip Sheet</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-11">
<% #booking_history.transport_plans.each do |transport_plan| %>
<%= f.fields_for :contract_attached_trip_sheets ,transport_plan do |builder| %>
<h3><%= transport_plan.id %> </h3>
<%= render 'contract_attached_trip_sheet_fields', f: builder, transport_plan: transport_plan %>
<% end %>
<% end %>
</div>
<div class="col-md-1">
<%= link_to_add_association "+", f, :contract_attached_trip_sheets, class: "fa fa-user fa-lg" %>
</div>
</div>
</div> <!-- /.inner card body -->
</div> <!-- /.inner card -->
</div> <!-- /. col 12 -->
</div> <!-- /.inner card row -->
</div>
</div>
<div class="card-footer ">
<div class="btn-group float-right">
<%= f.submit "submit", class:"btn btn-primary btn-sm button", id:"generateInvoice" %>
</div>
</div>
</div><!-- /.card -->
<% end %>
</div> <!-- /.container fluid -->
app/views/contract_booking_attached_trips/_contract_attached_trip_sheet_fields.html.erb
<fieldset>
<div class="nested-fields">
<div class="row">
<%= transport_plan %>
<div class="col-md-2">
<label class="label" for="">Initial Odo Reading<span class="star"></span></label>
<div class="md-form form-group">
<%= f.text_field :initial_odo_reading, class: "form-control" %>
</div>
</div>
<div class="col-md-2">
<label class="label" for=""> Trip Start Date<span class="star"></span></label>
<div class="md-form form-group">
<%= f.text_field :trip_start_date_time, class: "form-control"%>
</div>
</div>
<div class="col-md-2">
<label class="label" for=""> Final Odo Reading<span class="star"></span></label>
<div class="md-form form-group">
<%= f.text_field :final_odo_reading, class: "form-control" %>
</div>
</div>
<div class="col-md-2">
<label class="label" for=""> Trip Stop Date<span class="star"></span></label>
<div class="md-form form-group">
<%= f.text_field :trip_stop_date_time, class: "mobile form-control" %>
</div>
</div>
<div class="col-md-2">
<label class="label" for=""> Toll Cost<span class="star"></span></label>
<div class="md-form form-group">
<%= f.text_field :toll_cost, class: "form-control", placeholder:"" %>
</div>
</div>
<div class="col-md-2">
<label class="label" for=""> Permit Cost<span class="star"></span></label>
<div class="md-form form-group">
<%= f.text_field :permit_cost, class: "form-control", placeholder:"" %>
</div>
</div>
<div class="col-md-2">
<label class="label" for="">Parking Cost<span class="star"></span></label>
<div class="md-form form-group">
<%= f.text_field :parking_cost, class: "form-control", placeholder:"" %>
</div>
</div>
<%= f.hidden_field :transport_plan_id, value: transport_plan %>
<div class="col-md-1">
<br/>
<%= link_to_remove_association " " ,f, class:"fa fa-trash ", style: "color:red; font-size:20px; top:14px; " %>
</div>
</div>
<br />
</div>
</fieldset>
i am tryinh to pass transport_plan_id in hidden field but am gettting the following error in
please tell me how to pass the id through nested render partial
In your _form you write
<%= render 'contract_attached_trip_sheet_fields', :f => builder,{ :transport_plan =>transport_plan} %>
and that should be
<%= render 'contract_attached_trip_sheet_fields', :f => builder, :transport_plan =>transport_plan %>
There are two ways to pass data to partials, either you write:
render partial: 'partial_name', locals: {f: builder, a: 123}
or the simple form is just
render 'partial_name', f: builder, transport_plan: transport_plan
I have 1 form which use dropzone gem, what i am trying to achieve is
i want to upload my image inside a form which have 1 to many relationship, i've been struggle to make it work with no luck.
here is my database structure :
apartement:
id
name
desc
unitplan:
id
unitplanphoto
apartement_id
an apartement has many unit plans, instead an unit plan only belong to 1 apartement,
<div class="container-fluid">
<div class="animated fadeIn">
<!--/.row-->
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<strong>Apartement Form</strong>
</div>
<%= form_for #apt, html: {class: "form-horizontal", :multipart=>true} do |f| %>
<div class="card-block">
<div class="form-group row">
<%= f.label 'Apartement Name', class: 'col-md-4 form-control-label' %>
<div class="col-md-8">
<%= f.text_field :apt_name, class: "form-control" %>
</div>
</div>
<div class="form-group row">
<%= f.label 'Apartement Address', class: 'col-md-4 form-control-label' %>
<div class="col-md-8">
<%= f.text_area :apt_address, rows: 5, cols: 46 , class: "form-control" %>
</div>
</div>
<div class="form-group row">
<%= f.label 'Latitude', class: 'col-md-4 form-control-label' %>
<div class="col-md-8">
<%= f.text_field :apt_lat, class: "form-control" %>
</div>
</div>
<div class="form-group row">
<%= f.label 'Longtitude', class: 'col-md-4 form-control-label' %>
<div class="col-md-8">
<%= f.text_field :apt_long, class: "form-control" %>
</div>
</div>
<div class="form-group row">
<%= f.label 'Thumbnail', class: 'col-md-4 form-control-label' %>
<div class="col-md-8">
<%= f.file_field :thumbnail, accept: 'image/jpeg,image/gif,image/png' %>
</div>
</div>
<div class="form-group row">
<%= f.label 'Appartement Description', class: 'col-md-4 form-control-label' %>
<div class="col-md-8">
<%= f.text_area :apt_desc, rows: 5, cols: 46 , class: "form-control" %>
</div>
</div>
<div class="form-group row">
<%= f.label 'Developer', class: 'col-md-4 form-control-label' %>
<div class="col-md-8">
<%= collection_select(:apt, :developer_id, #developers, :id, :devname, {:prompt => false}, class: "form-control") %>
</div>
</div>
<div class="form-group row">
<%= f.label 'Area', class: 'col-md-4 form-control-label' %>
<div class="col-md-8">
<%= collection_select(:apt, :area_id, #areas, :id, :area_desc, {:prompt => false}, class: "form-control") %>
</div>
</div>
<div class="form-group row">
<%= f.label 'Status', class: 'col-md-4 form-control-label' %>
<div class="col-md-8">
<%= f.select :apt_status, options_for_select(#apt_statuses.collect { |s| [s[0].humanize, s[0]] }, selected: #apt.apt_status), {} , class: "form-control" %>
</div>
</div>
<div class="form-group row">
<%= f.label 'Facility', class: 'col-md-4 form-control-label' %>
<div class="col-md-8">
<%= collection_check_boxes(:apt, :facility_ids, #facilities, :id, :facility_desc) %>
</div>
</div>
<div class="form-group row">
<%= f.label 'Point of Interest', class: 'col-md-4 form-control-label' %>
<div class="col-md-8">
<%= collection_check_boxes(:apt, :poi_ids, #pois, :id, :poi_name) %>
</div>
</div>
<div class="form-group row">
<%= f.label 'Floor plan photos', class: 'col-md-4 form-control-label' %>
<div class="col-md-8">
<%= file_field_tag "images[]", type: :file, multiple: true %>
</div>
</div>
<% end %>
<div class="form-group row">
<div class="col-md-8">
<input id="unitplans_ids" name="unitplans_ids" type="hidden" value="">
<!--<input data-url="/photos" id="unitplans_upload" multiple="multiple" name="unitplans[]" type="file" ></input>-->
<!--<form action="/unitplans/create" id="dzCover" method="post" enctype="multipart/form-data" class="dropzone">-->
<%= form_for #unitplan, html: {class: "dropzone", :multipart=>true, id: "dzCover"} do |f| %>
<div id="actionsCover" class="row">
<div class="col-lg-8">
<label for="image">Unit plan photos : </label>
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button2">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
</span>
<button type="button" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="button" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
</div>
<div class="col-lg-5">
<!-- The global file processing state -->
<span class="fileupload-process">
<div id="total-progress" class="progress progress-striped active" style="display:none" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</span>
</div>
</div>
<div class="form-group">
<!-- HTML heavily inspired by http://blueimp.github.io/jQuery-File-Upload/ -->
<div class="table table-striped" class="files" id="previewsCover">
<div id="templateCover" class="file-row">
<!-- This is used as the file preview template -->
<div>
<span class="preview"><img data-dz-thumbnail /></span>
</div>
<div>
<p class="name" data-dz-name></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<p class="size" data-dz-size></p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</div>
<div>
<button type="button" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button type="button" data-dz-remove class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button type="button" data-dz-remove class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</div>
</div>
</div>
<br>
</div>
<!-- </form>-->
<% end %>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
</div>
</div>
</div>
<!--/col-->
</div>
<!--/.row-->
</div>
</div>
my js file :
$( document ).ready(function()
{
var previewNode1 = document.querySelector("#templateCover");
console.log(previewNode1);
console.log(previewNode1.id);
previewNode1.id = "";
var previewTemplate1 = previewNode1.parentNode.innerHTML;
previewNode1.parentNode.removeChild(previewNode1);
var myDropzoneCover = new Dropzone("#dzCover", { // Make the whole body a dropzone
url: "/unitplans/create", // Set the url
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
paramName: "unitplanphoto",
previewTemplate: previewTemplate1,
autoQueue: false, // Make sure the files aren't queued until manually added
previewsContainer: "#previewsCover", // Define the container to display the previews
clickable: ".fileinput-button2", // Define the element that should be used as click trigger to select files.
maxFilesize: 5,
acceptedFiles: ".png, .jpg, .jpeg", //is this correct? I got an error if im using this
init: function() {
this.on("success", function(file, response)
{
console.log(response);
file.serverId = response;
//alert(response);
});
this.on("removedfile", function(file)
{
//console.log(file);
//console.log(file.serverId);
if (!file.serverId)
{
return;
}
else
$.post("/unitplans/destroy?id=" + file.serverId);
});
this.options.previewaDropzone = false;
}
});
myDropzoneCover.on("addedfile", function(file) {
// Hookup the start button
file.previewElement.querySelector("#previewsCover .start").onclick = function() { myDropzoneCover.enqueueFile(file); };
//console.log(file);
});
// Update the total progress bar
myDropzoneCover.on("totaluploadprogress", function(progress) {
document.querySelector("#actionsCover #total-progress .progress-bar").style.width = progress + "%";
});
myDropzoneCover.on("sending", function(file) {
// Show the total progress bar when upload starts
document.querySelector("#actionsCover #total-progress").style.opacity = "1";
// And disable the start button
file.previewElement.querySelector("#previewsCover .start").setAttribute("disabled", "disabled");
//alert("sending");
});
// Hide the total progress bar when nothing's uploading anymore
myDropzoneCover.on("queuecomplete", function(progress) {
document.querySelector("#actionsCover #total-progress").style.opacity = "0";
//alert("complete");
});
// Setup the buttons for all transfers
// The "add files" button doesn't need to be setup because the config
// `clickable` has already been specified.
document.querySelector("#actionsCover .start").onclick = function() {
myDropzoneCover.enqueueFiles(myDropzoneCover.getFilesWithStatus(Dropzone.ADDED));
};
document.querySelector("#actionsCover .cancel").onclick = function() {
myDropzoneCover.removeAllFiles(true);
};
} );
controller file:
class UnitplansController < ApplicationController
def create
#unitplan = Unitplan.new(unitplan_params)
#respond_to do |format|
if #unitplan.save
render json: {message: "sukses", unitplanID: #unitplan.id}, status: 200
else
render json: { error: #unitplan.errors.full_messages.join(", ") }, status: 400
end
end
private
def unitplan_params
params.require(:unitplan).permit(:unitplanphoto)
end
end
somehow i can not make it to work,if i check dropzone request when i click submit, it always throw this error :
ActionController::ParameterMissing in UnitplansController#create
param is missing or the value is empty: unitplan
Your params appear to be missing the unitplan key that your unitplan_params method is looking for.
Try changing your paramNamevalue in your js file to this:
paramName: "unitplan[unitplanphoto]",
unitplan_params is acting as a whitelist for params to ensure you only pass approved params to your controller method, so you need to make sure your incoming params match the require and permit rules.
so I've created a web app that has user profiles, where users can search for fellow users based on interests etc.. How might I add a feature where users can favorite a persons profile? I.e. User A finds User B and likes what they see, and can click a 'Favorite this profile' button and perhaps it's starred, and stored? What would the code look like for this? Just an idea, but I'm open to all ideas.
user_profile.html.erb
<%= render "shared/header" %>
<div id="landing_welcome_page">
<div class="container">
<div class="row">
<%#= Profile image upload %>
<div class="span4">
<%= user_avatar(current_user) %>
<%#= Space w line %>
<div class="name"></div><br>
<%#= Please bare in mind these are strickly temporary placeholders i.e whitespace %>
<%= render 'social' %>
</div>
<div class="span8">
<%# User name %>
<span class="name1">
<% if current_user.first_name.blank? %>
<%= current_user.first_name.present? ? current_user.first_name : link_to('Finish your profile', edit_account_path)%>
<% else %>
<%= current_user.first_name %> <%= current_user.last_name %>
<% end %>
</span>
<span class="side-buttons">
<div class="name"></div>
</span>
</span>
</div>
<div class="row">
<br />
<div class="span6">
<%# User occupation %>
<i class="fa fa-usd"></i>:
<%= best_in_place current_user, :occupation, nil: 'Add occupation' %>
</div>
<div class="addy">
<div class="span2">
<%# User address %>
<i class="fa fa-home"></i>:
<%= current_user.address.present? ? current_user.address : link_to('Add Address', edit_account_path) %>
</div>
</div>
<div class="span6">
<%# User gender %>
<br />
<% if current_user.gender == "M" || "male" %>
<i class="fa fa-male"></i> Male
<% else %>
<i class="fa fa-female"></i> Female
<% end %>
</div>
<div class="span2">
<!-- Code to calculate age by user birthday -->
<br />
Age: <%= user_birthday %>
</div>
<div class="span8"></div>
<div class="span8"><div class="name"></div></div>
<div class="span8">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">About me</li>
<li>Photos</li>
<li>Personality</li>
</ul>
<div class="tab-content">
<div class="tab-pane in active" id="tab1">
<% #questions_for_about.each_with_index do |question, index| %>
<div class="question">
<h4 class="user_questions">
<%= index + 1 %>. <%= question.question %>
<%= link_to ("<i class='icon-edit'></i>".html_safe),
edit_user_question_path(current_user, question),
remote: true, class: "edit_link_#{question.id}" %>
</h4>
<div class="answer" id="answer_<%= question.id %>">
<%= answer_for(question) %>
</div>
</div>
<% end %>
</div>
<div class="tab-pane" id="tab2">
<div class="page-header">
<%= form_for Photo.new do |f| %>
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add photos...</span>
<%= f.file_field :file, multiple: true, name: "photo[file]" %>
</span>
<% end %>
<div class="clearfix"></div>
</div>
<div class="photos_cont">
<div class="col-sm-6 col-md-3">
<span class="gallery"><%= render current_user.photos %></span>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<% #questions_for_personality.each_with_index do |question, index| %>
<div class="question">
<h4 class="user_questions">
<%= index + 1 %>. <%= question.question %>
<%= link_to ("<i class='icon-edit'></i>".html_safe),
edit_user_question_path(current_user, question),
remote: true, class: "edit_link_#{question.id}" %>
</h4>
<div class="answer" id="answer_<%= question.id %>">
<%= answer_for(question) %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
<%= render '/shared/footer' %>
</div>
</div>
<script id="template-upload" type="text/x-tmpl">
<div class="upload">
{%=o.name%}
<div class="progress"><div class="bar" style="width: 0%;"></div></div>
</div>
</script>
<script>
var fb_param = {};
fb_param.pixel_id = '6009056882201';
fb_param.value = '0.00';
(function(){
var fpw = document.createElement('script');
fpw.async = true;
fpw.src = '//connect.facebook.net/en_US/fp.js';
var ref = document.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(fpw, ref);
})();
</script>
<noscript>
<img height="1" src="https://www.facebook.com/offsite_event.php?id=6009056882201&value=0" style="display:none;" width="1"/>
</noscript>
<script type="text/javascript">
// remove default datepicker event
jQuery(document).off('best_in_place:datepicker');
jQuery(document).on('best_in_place:datepicker', function(event, bip, element) {
// Display the jQuery UI datepicker popup
jQuery(element).find('input')
.datepicker({
format: element.data('date-format')
})
.on('hide', function(){
bip.update();
})
.on('changeDate', function(){
$(this).datepicker('hide');
})
.datepicker('show');
});
</script>
Create a Favorite model with a has_and_belongs_to_many relationship with User
Once you create the Favorite model and set up the relationship, you can do things like:
#user.favorites = [ user1, user2, user3 ]
#user.favorites << user4
to assign favorites to a user, or display them with something like:
<%= #user.favorites.map(&:name).to_sentence %>
You'll find everything you need to know on how to do this here: http://guides.rubyonrails.org/association_basics.html
so I've created a web app that has user profiles, where users can search for fellow users based on interests etc.. However sometimes the users don't fill out certain areas of their profile, i.e. about me may be left blank.. So how can I add the ability for users to only see the content of the profile that they filled out. In other words they can’t see the parts of other user profiles for which they have not completed.
user_profile.html.erb
<%= render "shared/header" %>
<div id="landing_welcome_page">
<div class="container">
<div class="row">
<%#= Profile image upload %>
<div class="span4">
<%= user_avatar(current_user) %>
<%#= Space w line %>
<div class="name"></div><br>
<%#= Please bare in mind these are strickly temporary placeholders i.e whitespace %>
<%= render 'social' %>
</div>
<div class="span8">
<%# User name %>
<span class="name1">
<% if current_user.first_name.blank? %>
<%= current_user.first_name.present? ? current_user.first_name : link_to('Finish your profile', edit_account_path)%>
<% else %>
<%= current_user.first_name %> <%= current_user.last_name %>
<% end %>
</span>
<span class="side-buttons">
<div class="name"></div>
</span>
</span>
</div>
<div class="row">
<br />
<div class="span6">
<%# User occupation %>
<i class="fa fa-usd"></i>:
<%= best_in_place current_user, :occupation, nil: 'Add occupation' %>
</div>
<div class="addy">
<div class="span2">
<%# User address %>
<i class="fa fa-home"></i>:
<%= current_user.address.present? ? current_user.address : link_to('Add Address', edit_account_path) %>
</div>
</div>
<div class="span6">
<%# User gender %>
<br />
<% if current_user.gender == "M" || "male" %>
<i class="fa fa-male"></i> Male
<% else %>
<i class="fa fa-female"></i> Female
<% end %>
</div>
<div class="span2">
<!-- Code to calculate age by user birthday -->
<br />
Age: <%= user_birthday %>
</div>
<div class="span8"></div>
<div class="span8"><div class="name"></div></div>
<div class="span8">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">About me</li>
<li>Photos</li>
<li>Personality</li>
</ul>
<div class="tab-content">
<div class="tab-pane in active" id="tab1">
<% #questions_for_about.each_with_index do |question, index| %>
<div class="question">
<h4 class="user_questions">
<%= index + 1 %>. <%= question.question %>
<%= link_to ("<i class='icon-edit'></i>".html_safe),
edit_user_question_path(current_user, question),
remote: true, class: "edit_link_#{question.id}" %>
</h4>
<div class="answer" id="answer_<%= question.id %>">
<%= answer_for(question) %>
</div>
</div>
<% end %>
</div>
<div class="tab-pane" id="tab2">
<div class="page-header">
<%= form_for Photo.new do |f| %>
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add photos...</span>
<%= f.file_field :file, multiple: true, name: "photo[file]" %>
</span>
<% end %>
<div class="clearfix"></div>
</div>
<div class="photos_cont">
<div class="col-sm-6 col-md-3">
<span class="gallery"><%= render current_user.photos %></span>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<% #questions_for_personality.each_with_index do |question, index| %>
<div class="question">
<h4 class="user_questions">
<%= index + 1 %>. <%= question.question %>
<%= link_to ("<i class='icon-edit'></i>".html_safe),
edit_user_question_path(current_user, question),
remote: true, class: "edit_link_#{question.id}" %>
</h4>
<div class="answer" id="answer_<%= question.id %>">
<%= answer_for(question) %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
<%= render '/shared/footer' %>
</div>
</div>
<script id="template-upload" type="text/x-tmpl">
<div class="upload">
{%=o.name%}
<div class="progress"><div class="bar" style="width: 0%;"></div></div>
</div>
</script>
<script>
var fb_param = {};
fb_param.pixel_id = '6009056882201';
fb_param.value = '0.00';
(function(){
var fpw = document.createElement('script');
fpw.async = true;
fpw.src = '//connect.facebook.net/en_US/fp.js';
var ref = document.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(fpw, ref);
})();
</script>
<noscript>
<img height="1" src="https://www.facebook.com/offsite_event.php?id=6009056882201&value=0" style="display:none;" width="1"/>
</noscript>
<script type="text/javascript">
// remove default datepicker event
jQuery(document).off('best_in_place:datepicker');
jQuery(document).on('best_in_place:datepicker', function(event, bip, element) {
// Display the jQuery UI datepicker popup
jQuery(element).find('input')
.datepicker({
format: element.data('date-format')
})
.on('hide', function(){
bip.update();
})
.on('changeDate', function(){
$(this).datepicker('hide');
})
.datepicker('show');
});
</script>
The conditionals that you have can be expanded to cover the whole div containing the info block.
For example:
<div class="addy">
<div class="span2">
<%# User address %>
<i class="fa fa-home"></i>:
<%= current_user.address.present? ? current_user.address : link_to('Add Address', edit_account_path) %>
</div>
</div>
Could be
<div class="addy">
<% if current_user.address.present? %>
<div class="span2">
<%# User address %>
<i class="fa fa-home"></i>:
<%= current_user.address %>
</div>
<% else %>
<%= link_to('Add Address', edit_account_path) %>
<% end %>
</div>
Then it would only show the link if the address is not present.
Seems like you're on the right track. Basically, for every user attribute on the User model you want to show/hide, you'll want to add a conditional that evaluates whether or not the attribute on current_user is present?:
<span class="name1">
<% if current_user.first_name.blank? %>
<%= link_to('Finish your profile', edit_account_path) %>
<% else %>
<%= current_user.first_name %> <%= current_user.last_name %>
<% end %>
</span>
Alternatively, you can continue using ternary operators for single line evaluations, as you are already doing in some instances:
<%= current_user.address.present? ? current_user.address : link_to('Add Address', edit_account_path) %>