I couldn't figure out how to use ViewComponent inside form
The form is rendered correctly (value in the dropdown), but the model binding, when posting form, fail
This is the view
<form asp-action="" method="post">
<div asp-validation-summary="All"></div>
<div class="row">
<vc:periodi model="#(Model.Periodi)"></vc:periodi>
</div>
This is the ViewComponent
<div class="col-2">
#(Html.Kendo().DropDownListFor(a => a.Anno)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(Model.Anni)
.HtmlAttributes(new { style = "width: 100%" }))
No matter what I choose in the dropdown, the variable Anno inside the Object Periodi of the Model is null
I checked the rendered HTML
<input id="Anno" name="Anno" ...
I think, based on my experience with MVC, that should be something like "Periodi.Anno" for the model binder to work.
Any suggestion?
As your experience, the name should be Periodi.Anno to bind the ViewComponent property.
As my test with input tag like below:
<input asp-for="Name" name="MVCSubModel.Name" class="form-control" />
I suggest you try :
#(Html.Kendo().DropDownListFor(a => a.Anno)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(Model.Anni)
.HtmlAttributes(new { style = "width: 100%"; name = "Periodi.Anno" }))
I have a rails 5 application that is using vue.js. I have a input form that collecting basic information in addition to having a stripe element in it. The stripeV3 element loads with no problem, the client console does not display any javascript errors.When I fill out the form and submit it the expect stripeToken parameter that should come back from stripe is omitted. I not remotely sure why.
checkout.html.erb
<section class="hero">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-8 mx-auto">
<div class="card border-none">
<div class="card-body">
<p class="mt-4 lead text-center">
Shipping Address
</p>
<div class="mt-4 clearfix">
<%= form_for :customer_order, html: {id: 'payment-form'}, url: { action: "process_order" } do |f| %>
<div class="form-group">
<%= f.text_field :full_name, :class=>"form-control", :placeholder=>"Full Name" %>
</div>
<%if !current_user%>
<div class="form-group">
<%= f.text_field :guest_email, :class=>"form-control", :placeholder=>'Email' %>
</div>
<%end%>
<div class="form-group">
<%= f.text_field :street_address1, :class=>"form-control", :placeholder=>"Street and number, P.O. box" %>
</div>
<div class="form-group">
<%= f.text_field :street_address2, :class=>"form-control", :placeholder=>"Apartment, suite, unit, building, floor, etc" %>
</div>
<div class="form-group">
<%= f.text_field :city, :class=>"form-control", :placeholder=>"City" %>
</div>
<div class="form-group">
<%= f.select(:state, options_for_select(['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DC', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'])) %>
</div>
<div class="form-group">
<%= f.text_field :zip_code, :class=>"form-control", :placeholder=>"Zip code" %>
</div>
<div class="form-group">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<br><br>
<%= f.submit 'Continue Checkout', :class=>"btn btn-primary float-right" %>
<% end %>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</section>
<% content_for :javascript_section do %>
<script type="text/javascript">
var stripe = Stripe('pk_test_a_valid_test_token');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '18px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
</script>
<% end %>
application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require bootstrap
//= require turbolinks
//= require rails-ujs
//= require popper
//= require_tree .
//= require_self
//= require vue.min.js
//= require vue-carousel.js
//= require_directory ./components
Vue.use(VueCarousel);
const Carousel = VueCarousel.Carousel;
const Slide = VueCarousel.Slide;
$(document).on('turbolinks:load', function() {
new Vue({
el: '#app',
components: {
Carousel,
Slide,
Slider,
}
});
});
I have model with date time field after render new view and submit it all fields of model saved to database except date time field even I am using date time picker
Can any body help me to solve this problem
This is the code I am working on:
Interview controller
def new
#interview = Interview.new(:batch_id => #batch.id)
end
def create
#interview = Interview.new(interview_params)
# Save the object
if #interview.save
# If save succeeds, redirect to the index action
flash[:notice]= "تم إنشاء المقابلة بنجاح."
redirect_to(interviews_path(:batch_id => #batch.id))
else
# If save fails, redisplay the form so user can fix problems
render('new')
end
end
Interview new view code
<% #page_title = "إنشاء مقابلة" %>
<div id="content-header">
<div class='header-icon hr-icon'></div>
<h1>المقابلات</h1>
<div class='header-sep'>|</div>
<div class='sub-header'>إنشاء مقابلة</div>
<div id="inner-tab-menu">
<ul>
<li class='themed_bg themed-dark-hover-background'><%= link_to("<< العودة للجدول", interviews_path(:batch_id => #batch.id)) %></li>
</ul>
</div>
</div>
<div id="page-yield">
<div class="iterviews new">
<%= form_for(#interview, :url =>interviews_path(:batch_id => #batch.id)) do |f| %>
<%= render(:partial => 'form', :locals => {:f => f}) %>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
locale: 'ar-sa'
});
</script>
<div><%= f.submit("إنشاء مقابلة", :class => 'submit_button') %></div>
<% end %>
</div>
</div>
form code
<div class="label-field-pair">
<div class="right-column">
<label for="student_grade">رقم المقابلة<span class="necessary-field">*</span> </label>
<div class="text-input-bg"><%= f.text_field(:code, style: "width: 240px;") %></div>
</div>
</div>
<div class="label-field-pair">
<div class="right-column">
<label for="student_grade">تاريخ المقابلة<span class="necessary-field">*</span></label>
<div class="text-input-bg" style="direction: ltr; margin: 0 10px 0 0;">
<div class='input-group date' id='datetimepicker1'>
<%= f.datetime_field(:interview_date , class: "form-control", style: "width: 200px;margin: 0;") %>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<%= f.hidden_field(:batch_id, value: #batch.id) %>
I could find out the solution for this problem, of course the reason was that datetimepicker doesn't understand the values in my fields so what I did is the following:
1- change the numbers in moment-with-locales.js in the 'ar-sa' section from Indian numbers to Arabic numbers.
2- set the format: option to datetimepicker to match model attribute data type format in case it is date type or datetime type
and that's solve my problem
I'm working with some existing code that looks something like this:
ff.input :answer_id,
:as => :surveyor_radio,
:collection => [[a_text(a, nil, render_context).html_safe, a.id]],
:label => false,
:input_html => {:class => "someclass"),
:response_class => a.response_class
and generates something like this html:
<li class="choice">
<label for="123">
<input class="someclass" id="123" name="foo" type="radio" value="bar" />
BAR
</label>
</li>
I'd like to add a paragraph of explanatory text betwee the closing and the closing , like this:
<li class="choice">
<label for="123">
<input class="someclass" id="123" name="foo" type="radio" value="bar" />
BAR
</label>
<p>It is really important that you understand all of this information about BAR before you pick it, so read this carefully.</p>
</li>
I haven't had much luck finding a way to do this. Any ideas?
Thanks!
Each marker on my map has an infowindow.
If I use the Infobox plugin to build the infowindow, remote links inside it process action as "HTML" instead of "JS".
I should precise that everything work well (I mean, action processed as "JS") when I remove the infoboxBuilder.
My code :
var handler = Gmaps.build('Google', {builders: { Marker: InfoBoxBuilder} });
# In the Infowindow : <%= link_to "More", voir_infos_path(t), :remote => true %>
# Log : Started GET "/voir_infos/545e1dd382cd47db98000bb9" for 127.0.0.1 at 2014-12-04 23:10:56 +0100
Processing by ObjetsController#voir_infos as HTML
But when I remove the InfoBoxBuilder :
var handler = Gmaps.build('Google');
# Same code in Infowindow : <%= link_to "More", voir_infos_path(t), :remote => true %>
# Log : Started GET "/voir_infos/545e23ae82cd47e5ac000542" for 127.0.0.1 at 2014-12-04 23:13:53 +0100
Processing by ObjetsController#voir_infos as JS
Here the infoboxbuilder.js.coffee I found on stackoverflow :
class #InfoBoxBuilder extends Gmaps.Google.Builders.Marker # inherit from base builder
# override method
create_infowindow: ->
return null unless _.isString #args.infowindow
boxText = document.createElement("div")
boxText.setAttribute("class", 'yellow') #to customize
boxText.innerHTML = #args.infowindow
#infowindow = new InfoBox(#infobox(boxText))
#bind_infowindow()
infobox: (boxText)->
content: boxText
boxClass: "infoBox box-shadow"
pixelOffset: new google.maps.Size(-140, -380)
closeBoxURL: ""
boxStyle:
width: "280px"
How could I make it work ?
Thanks
EDIT
I have this link in each Infowindow : <%= link_to "More", voir_infos_path(t), :remote => true %> which should process ObjetsController#voir_infos as "JS", isn't it ?
When I use the Infobox plugin to display the infowindow (with this part of code : builders: { Marker: InfoBoxBuilder} and click on "More", :remote => true doesn't work, and ObjetsController#voir_infos is processed as "HTML" instead as "JS".
When I remove builders: { Marker: InfoBoxBuilder}, everything work well, and when I click on "More", ObjetsController#voir_infos is processed as "JS".
EDIT 2 :
The HTML generated for the Infowindow :
<div class="infoBox box-shadow" style="width: 280px; position: absolute; visibility: visible; left: 132.270229334012px; top: 72.179231562186px; cursor: default;"><div class="yellow"><div class="row iw-content">
<div>
<img src="/covers/max_creer/missing.png">
</div>
<div class="small-12 columns">
<div class="row">
<div class="small-12 columns">
<h6> Maison Bloc </h6>
</div>
</div>
<div class="row">
<div class="small-12 columns">
More
</div>
</div>
</div>