rails amp form error request and response access-control-allow-origin - ruby-on-rails

i'm using rails amp and setting my amp route for contact form
<form id='contactusform' method="POST" class="p2" action-xhr = "<%= addquery_path %>" custom-validation-reporting="as-you-go" target="_top">
<%= hidden_field_tag :authenticity_token, form_authenticity_token -%>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="as-you-go-name" pattern="p{L}+\s\p{L}+" class="inline-label-input input-item" name='name' value="" required />
<span class="inline-label-label">Name</span>
</label>
<div class="validation-blk">
<span visible-when-invalid="valueMissing" validation-for="as-you-go-name">Please enter your first name</span>
<span visible-when-invalid="patternMismatch" validation-for="as-you-go-name">Please enter characters only</span>
</div>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="email" id="as-you-go-email" class="inline-label-input input-item" value="" name='email' required />
<span class="inline-label-label">Email</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="as-you-go-email">Please enter your email address</span>
<span visible-when-invalid="typeMismatch" validation-for="as-you-go-email"></span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="number" id="phone-number" name='phone' class="inline-label-input input-item" value="" required />
<span class="inline-label-label">contatct number</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="phone-number">Please enter your phone number</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Cityname" name='city' pattern="\w+\s\w+" class="inline-label-input input-item" value="" required />
<span class="inline-label-label">City</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Cityname">Please enter your City</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Statename" pattern="\w+\s\w+" class="inline-label-input input-item" name='state 'value="" required />
<span class="inline-label-label">State</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Statename">Please enter your State</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Country" pattern="\w+\s\w+" class="inline-label-input input-item" name='country' value="" required />
<span class="inline-label-label">Country</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Country">Please enter your Country</span>
</div>
</div>
<div class="form-row">
<div class="inline-form selectionbox">
<label class="inline-label">
<select class="select-box custom-select" required name="eventtype"
id="eventtype">
<option value="">QUERY TYPE</option>
<% #app_config.event_type.split('|').each do |event_name,index| %>
<option value="<%= event_name %>"><%= event_name %></option>
<% end %>
</select>
</label>
<span visible-when-invalid="valueMissing" validation-for="eventtype">selectoption message appears like this</span>
</div>
</div>
<div class="form-row">
<div class="ampstart-input inline-block relative">
<textarea name="message" id="message" class="block" rows="5" cols="50" required placeholder="your message"></textarea>
<!-- <label class="textarea-ab" aria-hidden="true">
Your message
</label> -->
<span visible-when-invalid="valueMissing" validation-for="message"></span>
</div>
</div>
<div class="button button-common">
<input type="submit" value="OK" class="ampstart-btn caps">
</div>
<!-- social icons -->
<div submit-success>
<template type="amp-mustache">
Subscription successful!
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Subscription failed!
</template>
</div>
</form>
And my controller saves the form in my database, but the browser throws an error.
def addquery
#contact = Lead.new
#contact.name = params[:name]
#contact.email = params[:email]
#contact.phone = params[:phone]
#contact.city = params[:city]
#contact.state = params[:state]
#contact.country = params[:country]
#contact.enquiry_type = params[:eventtype]
#contact.message = params[:message]
#contact.save
end
when i try to submit my AMP form it showing
amp form error request must have access-control-allow-origin
in my browser console.
as well as the
response must have access-control-allow-origin

Set access-control-allow-origin: <your domain> as a response header in the form handler in rails.
Example, if you are running on localhost set form response header as access-control-allow-origin: http://localhost:3000

Related

Bootstrap 5 - checkboxes are not lining up with labels

I am trying out Bootstrap 5 and am having difficulty lining up my checkboxes and their labels. The code is:
<div class="row col-lg-3 col-md-2 col-sm-2 col-xs-6">
<label class="col-lg-12 col-md-12 col-sm-12 col-xs-12" for="state"><b>Branch</b></label>
<div class="form-check">
<div class="checkbox">
<label>ACT</label>
<input type="checkbox" value="" id="act" name="state[]">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="nsw" name="state[]">NSW</label>
</div>
<div class="checkbox">
<input type="checkbox" value="" id="nt" name="state[]">
<label>NT</label>
</div>
<div class="checkbox">
<label class="pull-right"><input type="checkbox" value="" id="qld" name="state[]">QLD</label>
</div>
<div class="checkbox">
<label class="pull-left"><input type="checkbox" value="" id="sa" name="state[]">SA</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="tas" name="state[]">TAS</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="vic" name="state[]">VIC</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="wa" name="state[]">WA</label>
</div>
</div>
</div>
And the result is:
As you can see I have tried three variations.
From the edited first answer - this results:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label class="col-lg-12 col-md-12 col-sm-12 col-xs-12" for="state"><b>Branch</b></label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="act" name="state[]">
<label class="form-check-label">ACT</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="nsw" name="state[]">
<label class="form-check-label">NSW</label>
</div>
</div>
</div>
</div>
Gives:
I have tried adding:
.big-checkbox {
width: 30px;
height: 30px;
}
This just increases the height of the check (it is still long).
The "custom check" html composition is changed in Bootstrap 5. Now each checkbox should look the follows (along with parent containers):
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-2 col-sm-2 col-xs-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="act" name="state[]" />
<label class="form-check-label" for="act">ACT</label>
</div>
</div>
</div>
</div>
Bootstrap 5 Check CodePen

in Bootstrap 4, textbox form-control width is not working. the textbox does not appear in full-width. I'm using asp.net mvc 5

<div class="row">
<div class="col-md-6 my-3">
<div class="card card-outline-secondary">
<div class="card-body">
<form class="form" role="form" autocomplete="off">
<div class="form-group row">
<label class="col-md-3 col-form-label form-control-label">First Name</label>
<div class="col-md-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Last name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Middle name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Name Extension</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Date of Birth</label>
<div class="col-lg-9">
<input class="form-control" type="date" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Gender</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label"></label>
<div class="col-lg-9">
<input type="reset" class="btn btn-secondary" value="Cancel">
<input type="button" class="btn btn-primary" value="Save Changes">
</div>
</div>
</form>
</div><!-- card body -->
</div> <!-- card-outline -->
</div>
</div>
I want to make the textbox appear in full-width. I did my research and found out that the width is in default to appear in full-width but in my work it appears in a fixed size.
Your <form> is nested inside the card;
Your card is nested inside col-md-6 of the row;
Hence on media(min-width: 992px), your form-controls will only get
1/2 * 9/12 = 37.5% of the full width.
Your form labels and inputs are already using full width of the card. The problem is, the card is not using full width of the container.
To fix that, you can either remove <div class="row"> and <div class="col-md-6 my-3"> completely, or just change <div class="col-md-6 my-3"> to <div class="col-md-12 my-3">
Fiddle: http://jsfiddle.net/aq9Laaew/86873/
You need to define parent div with full with
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 my-6">
<div class="card card-outline-secondary">
<div class="card-body">
<form class="form" role="form" autocomplete="off">
<div class="form-group row">
<label class="col-md-3 col-form-label form-control-label">First Name</label>
<div class="col-md-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Last name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Middle name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Name Extension</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Date of Birth</label>
<div class="col-lg-9">
<input class="form-control" type="date" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Gender</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label"></label>
<div class="col-lg-9">
<input type="reset" class="btn btn-secondary" value="Cancel">
<input type="button" class="btn btn-primary" value="Save Changes">
</div>
</div>
</form>
</div><!-- card body -->
</div> <!-- card-outline -->
</div>
</div>
</div>
</body>
</html>
Try adding this to your css:
input, select, textarea {max-width: 100% !important;}

bootstrap Form Layout --horizontal with labels on top

I am just trying to have a horizontal form with labels on top. keep in mind I am going to add validation so grouping is important
I am looking for something like this
Name email ID
Mike Mike#hotmail.com something
code
<div class="col-lg-12">
<div class="row">
<div class="page-content">
<div class="panel panel-primary">
<form name="searchform" role="form" >
<fieldset>
<legend></legend>
<div class="form-horizontal">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Employee ID</label>
<input type="text" class="form-control" id="exampl">
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
this worked for me...let me know if there is a better solution
<form name="searchform" role="form" novalidate>
<fieldset>
<legend></legend>
<div class="col-lg-12">
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label"> Name</label>
<input type="text" value='' class="form-control" id="Name" placeholder="Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="ID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="Racf ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="Role" class="control-label">Gateway Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="gatewayRole" placeholder="Gateway Role" (completeMethod)="searchRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label">Location</label>
<input type="text" value='' class="form-control" id="Name" placeholder=" Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="racfID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="gatewayRole" class="control-label">Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="Role" placeholder="Role" (completeMethod)="searchyRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
</div>
</fieldset>
</form>

File upload using AngularJS and Rails

I have a model BOOK that will insert the book details through angularjs controller
Here is my view:
<h1 align="center">Books</h1>
<div ng-controller="BooksCtrl" class="container">
<div class="row-fluid">
<div class="col-md-6">
<form ng-submit="addBook()" class="loginform cf">
<input type="text" ng-model="newBook.title" placeholder="Title of the Book" required>
<input type="text" ng-model="newBook.isbn" placeholder="ISBN Number of Book" required>
<input type="file" ng-model="newBook.book_link">
<input type="text" ng-model="newBook.edition" placeholder="Edition of the book" required>
<input type="text" ng-model="newBook.publication_id" placeholder="Select the publication ID" required>
<input type="submit" value="Add Book">
</form>
<div ng-show="editorEnabled" class="loginform cf">
<form ng-submit="update()">
<input type=text ng-model="editableBook.title" ng-show="editorEnabled" required>
<input type=text ng-model="editableBook.body" ng-show="editorEnabled" required>
<input type="submit" value="Update" class='btn'>
close
</form>
</div>
<div ng-show="selectedBook" class="loginform cf">
<h2>{{selectedBook.title}}</h2>
<p>{{selectedBook.body}}</p>
</div>
</div>
<div class="col-md-6">
<ul style="list-style-type: none;">
<li ng-repeat="book in books" class="loginform cf" >
<div>
<div>{{book.title}}</div>
<a href="">
<img src="{{book.book_link.thumb.url}}"/>
</a>
<button href="#" ng-click="showBook(book)" class="btn">Show</button>
<button href="#" ng-click="enableEditor(book)" class="btn">edit</button>
<br>
</div>
</li>
</ul>
</div>
</div>
</div>
My angularjs Controller function is:
book = Book.save($scope.newBook, function(data,headers) {
console.log(book);
$scope.books.push(book);
}, function(data,headers) {
// do the error case
console.log(data);
if (data.status == 422)
{
alert("validation is failed book should be unique");
}
});
The problem is that it is storing all the details except the book pdf upload. It is not passing even the name. How can I solve this? Any Suggestions would be appreciated.

Html helper within an html helper (rendering razor correctly from string literal)

I made a custom HTML helper for the contact modal so that anyone on our app can use it with #Html.ContactModal(model and options go here), but the issue is that on the modal there's another html helper for the sales code drop down, and the razor isn't rendering correctly. I tried to do everything with a partial view only to learn you can't (or shouldn't) use partials with html helpers, only with controllers (I'm new to all of this...), a co-worker suggested I use a tag builder, but I wanted to ask here first before writing the entire form with a tag builder.
public static IHtmlString ContactModal(this HtmlHelper htmlHelper, ContactModalOptions options)
{
//required scripts
htmlHelper.AddScriptFile("~/Areas/Customers/Scripts/ContactModal/tmi.customers.contactModal.js");
htmlHelper.AddScriptLine("$('#" + options.controlId + "').contactModal(" + options.ToJson() + ");", true);
string htmlContents = string.Empty;
htmlContents = $#"<div id='contactModalContainer' style='display: none'>
<div class='panel panel-default panel-details' id='' style='display: none'>
<div class='panel-heading' id='divContactModalHeading'>
<h3 id='h3contactModalHeading'></h3>
</div>
<div class='panel-body' id='divContactDetBody'>
<form id='custContactDetailsForm'>
<div class='row'>
<div class='col-sm-6'>
<div class='form-group' style=''>
<label for='txtFirstName' id='lblFirstName' class='control-label'>First Name: </label>
<input data-helper='FirstName' id='contactFirstName' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-6'>
<div class='form-group' style=''>
<label for='txtLastName' class='control-label'>Last Name: </label>
<input data-helper='LastName' id='contactLastName' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-md-12'>
<div class='form-group' style=''>
<label for='txtPositionTitle'>Position/Title: </label>
<input id='contactPosition' data-helper='Position' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-md-12'>
<div class='form-group' style=''>
<label for='txtSalesOrders'>E-mail: </label>
<input id='contactEmail' data-helper='Email' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group' style=''>
<label for='txtSalesOrders'>Work Phone: </label>
<input id='contactWorkPhone' data-helper='DirectPhone' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group' style=''>
<label for='txtMobilePhone'>Mobile Phone: </label>
<input id='contactMobile' data-helper='MobilePhone' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group' style=''>
<label for='txtFax'>Fax: </label>
<input id='contactFax' data-helper='Fax' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group' style=''>
<label for='txtHomePhone'>Home Phone: </label>
<input id='contactHomePh' data-helper='HomePhone' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group' style=''>
<label for='txtPager'>Other Phone: </label>
<input id='contactPager' data-helper='PagerPhone' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-12'>
<div class='form-group'>
<label for='txtNotes'>Notes/Comments: </label>
<textarea id='contactNotes' data-helper='ContactNotes' type='text' class='form-control' disabled='disabled' rows='3' data-editable='true' value=''></textarea>
</div>
</div>
<div class='col-sm-6'>
<div class='form-group' style=''>
<label for='txtDateAdded'>Date Added: </label>
<label id='contactDateAdded'></label>
</div>
</div>
<div class='col-sm-6' style='clear: both'>
<div class='form-group'>
<label class='control-label'>Referred By:</label>
<div class=''>
##Html.SalesCodeDropDown(new SelectControlOptionsBase('contactReferredBy')
{{
includeNull = true,isEditable = editableOptions.yes,
disabled = true,
}})
</ div >
</ div >
</ div >
< div class='col-md-6' style='clear: both'>
<div class='form-group' style=''>
<label for='txtEnteredBy'>Entered By: </label>
<label id = 'contactEnteredBy' ></ label >
</ div >
</ div >
< div class='col-md-6' style='clear: both'>
<div class='checkbox'>
<label>
<input id = 'contactIsInactiveChkBx' data-helper='Inactive' type='checkbox' disabled data-editable='true' value='0'>Inactive
</label>
</div>
</div>
</div>
</form>
</div>
</div>
<div id = 'contactModalFooter' class='form-group' style=''>
<button type = 'button' id='btnContactModalClose' style='margin-right: 5px;' class='pull-right btn btn-form-state'>Close</button>
<button type = 'button' id='btnContactModalCancel' style='margin-right: 5px;' class='pull-right btn btn-form-state'>Cancel</button>
<button type = 'button' id='btnContactModalSave' style='background-color: #EE6723; margin-right: 5px;' class='pull-right btn btn-form-state'>Save</button>
</div>
</div> ";
return MvcHtmlString.Create(htmlContents);
This ended up working:
public static IHtmlString ContactModal(this HtmlHelper htmlHelper, ContactModalOptions options)
{
StringBuilder result = new StringBuilder();
//required scripts
htmlHelper.AddScriptFile("~/Areas/Customers/Scripts/ContactModal/tmi.customers.contactModal.js");
htmlHelper.AddScriptLine("$('#" + options.controlId + "').contactModal(" + options.ToJson() + ");", true);
var body = htmlHelper.Partial("~/Areas/Customers/Views/Contacts/Shared/ContactModalPartial.cshtml").ToHtmlString();
result.AppendLine(body);
return MvcHtmlString.Create(result.ToString());
}
If your #Html.SalesCodeDropDown(new SelectControlOptionsBase('contactReferredBy') returns html, then just call that before you set the variable htmlContents and then concat it where you need to.

Resources