File upload using AngularJS and Rails - ruby-on-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.

Related

Passing Current Model to partial View, Handling Large from Server To Clients

i want to pass All Input values of View to My Partial View(Passing User Order to Show Order Summary) but all values got null in partial View Below is My Code.
Submit
<div id="myModal_#Model.CustRef" class="modal fade" role="dialog">
<div class="modal-dialog" style="position:absolute; left:10%;">
<!-- Modal content-->
<div class="modal-content" style="width:80vw;">
<div class="modal-header ">
<h4 class="modal-title"><i class="fas fa-shopping-cart"></i> Order Summary</h4>
<button type="button" class="close" data-dismiss="modal">Back</button>
</div>
<div class="modal-body">
...Disabled Inputs...
</div>
</div>
</div>
</div>
My Create Order View
<form asp-action="Create">
....
#*<partial name="~/Views/Order/OrderSummary.cshtml" model="Model" />*#
#await Html.PartialAsync("~/Views/Order/OrderSummary.cshtml", new OrderViewModel() { cus_name = Model.cus_name, cus_phone = Model.cus_phone, CustRef = Model.CustRef, Phoneid = Model.Phoneid, modelId = Model.modelId, Quantity = Model.Quantity, Address = Model.Address, CityId = Model.CityId, Date = Model.Date, store_id = Model.store_id })
</form>
Second Question
My Second Question is i have large data to pass to View(Admin Dashboard) to Complete Statistics but its taking too much time. Please tell me any other Efficient way to increase performance.
You need to pass the current input model to the controller through ajax and return
to render the new partial view.
Please refer to the following code:
Controller:
public class OrderController : Controller
{
public IActionResult Index()
{
OrderViewModel orderView = new OrderViewModel();
return View(orderView);
}
public PartialViewResult ShowParitalView(OrderViewModel orderView)
{
return PartialView("OrderSummary", orderView);
}
}
Index view:
#using WebApplication_core_mvc.Models;
#model OrderViewModel
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Scripts{
<script>
$(function () {
$("a").click(function () {
event.preventDefault();
$("div .modal").attr("id", "myModal_" + $("#cus_name").val());
$("a").attr("data-target", "#myModal_" + $("#cus_name").val());
$.ajax({
type: "POST",
url: "/Order/ShowParitalView",
data: $("form").serialize(),
success: function (data) {
$('#partial').html(data);
$("#myModal_" + $("#cus_name").val()).modal('show');
}
})
})
});
</script>
}
<form asp-action="Create">
<div class="form-group">
<label asp-for="cus_name" class="control-label"></label>
<input asp-for="cus_name" class="form-control" />
<span asp-validation-for="cus_name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="cus_phone" class="control-label"></label>
<input asp-for="cus_phone" class="form-control" />
<span asp-validation-for="cus_phone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CustRef" class="control-label"></label>
<input asp-for="CustRef" class="form-control" />
<span asp-validation-for="CustRef" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Phoneid" class="control-label"></label>
<input asp-for="Phoneid" class="form-control" />
<span asp-validation-for="Phoneid" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="modelId" class="control-label"></label>
<input asp-for="modelId" class="form-control" />
<span asp-validation-for="modelId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Quantity" class="control-label"></label>
<input asp-for="Quantity" class="form-control" />
<span asp-validation-for="Quantity" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Address" class="control-label"></label>
<input asp-for="Address" class="form-control" />
<span asp-validation-for="Address" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CityId" class="control-label"></label>
<input asp-for="CityId" class="form-control" />
<span asp-validation-for="CityId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Date" class="control-label"></label>
<input asp-for="Date" class="form-control" />
<span asp-validation-for="Date" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="store_id" class="control-label"></label>
<input asp-for="store_id" class="form-control" />
<span asp-validation-for="store_id" class="text-danger"></span>
</div>
<a href="#" data-toggle="modal" data-target="#myModal_#Model.CustRef"
style="border-radius: 1.5rem; margin-right:8%; margin-top: 1%; border: none;
padding:10px 2%; background: #0062cc; color: #fff; font-weight: 600; width:20%;
cursor: pointer; text-align:center; font-weight:bolder;">
Submit
</a>
<div id="myModal_#Model.CustRef" class="modal" role="dialog">
<div class="modal-dialog" style="position:absolute; left:10%;">
<!-- Modal content-->
<div class="modal-content" style="width:80vw;">
<div class="modal-header ">
<h4 class="modal-title"><i class="fas fa-shopping-cart"></i> Order Summary</h4>
<button type="button" class="close" data-dismiss="modal">Back</button>
</div>
<div class="modal-body">
<div id="partial">
</div>
</div>
</div>
</div>
</div>
</form>
OrderSummary Partial View:
#using WebApplication_core_mvc.Models;
#model OrderViewModel
<div class="form-group">
<label asp-for="cus_name" class="control-label"></label>
<input asp-for="cus_name" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="cus_phone" class="control-label"></label>
<input asp-for="cus_phone" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="CustRef" class="control-label"></label>
<input asp-for="CustRef" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Phoneid" class="control-label"></label>
<input asp-for="Phoneid" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="modelId" class="control-label"></label>
<input asp-for="modelId" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Quantity" class="control-label"></label>
<input asp-for="Quantity" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Address" class="control-label"></label>
<input asp-for="Address" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="CityId" class="control-label"></label>
<input asp-for="CityId" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Date" class="control-label"></label>
<input asp-for="Date" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="store_id" class="control-label"></label>
<input asp-for="store_id" class="form-control" disabled/>
</div>
Here is the result:
For the second question, there are too many SQL query statements in your code, you can try to improve performance by referring to this.

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

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

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>

self._NgForm_14_3.context is not a function

My Code:
<form role="form" #login="ngForm" (ngSubmit)="onSubmit(login.form)">
<div class="form-group">
<label class="control-label" for="adviserUsername">Username</label>
<input class="form-control" [(ngModel)]="adviserUsername" #username="ngModel" placeholder="Enter Username" type="text" name="adviserUsername"
required>
<div *ngIf="username.touched && username.errors">
<div class="alert alert-danger" *ngIf="username.errors.required">Username is required</div>
</div>
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input class="form-control" [(ngModel)]="passwordText" #password="ngModel" id="password" name="password" placeholder="Password"
type="password" required>
</div>
<div class="alert alert-danger" *ngIf="password.touched && password.errors">Password is required</div>
<button type="submit" class="btn btn-block btn-lg btn-primary" (click)="login()" [disabled]="!login.valid">Login</button>
</form>
Error which I am getting is
self._NgForm_14_3.context is not a function
Here's a Snapshot
The Solution is simple
I was using a click event on the button click - which was using login() - this was double reference and created a problem ...
Code:
Line Fixed >>
<button type="submit" class="btn btn-block btn-lg btn-primary" [disabled]="!login.valid">Login</button>

Html.BeginForm no longer creating action in OrchardCMS

I have recently rebuild a module DLL for an Orchard CMS project and one of the pages is not longer rendering form actions using BeginFormAntiForgeryPost.
The .cshtml file is:
#using System;
#using Orchard.Mvc.Html;
#{
var eventId = (int) Model.EventId;
string price = (string)Model.Price;
Orchard.ContentManagement.ContentItem contentItem = Model.Item;
string currencies = (string)Model.Currencies;
var pricesArray = price.Split(new Char[]{';'});
var currenciesArray = currencies.Split(new Char[]{';'});
bool allowCurrencyChange = true;
if(pricesArray.Length!=currenciesArray.Length){
allowCurrencyChange = false;
}
price = pricesArray[0];
string currency = currenciesArray[0];
}
<div class="prices-container">
<div class="more-info-link">
<a class="btn" href="#Url.Content("~"+Url.ItemDisplayUrl(contentItem))">
More Information
</a>
</div>
<div class="prices-box">
#if(Convert.ToDecimal(price)>0){
<p class="price">#currency #String.Format("{0:0,0.00}",price) <br /><span style="font-size:13px;">+ VAT</span></p>
}
else{
<p class="price" style="text-indent:-99999px;">#currency #String.Format("{0:0,0.00}",price)</p>
}
#using (Html.BeginFormAntiForgeryPost(Url.Action("Add", "ShoppingCart", new { id = eventId, area = "Events" }))) {
if(Convert.ToDecimal(price)>0){
<input type="hidden" name="currency" value="#currency" />
<input type="hidden" name="price" value="#price" />
if(allowCurrencyChange){
for(int i=0; i<pricesArray.Length;i++){
<input type="hidden" name="#(currenciesArray[i])_price" value="#(pricesArray[i])" />
}
}
<button class="btn btn-success" type="submit">#T("register")</button>
}
else{
<a href="/oforms/Contact-Us" class="btn btn-success" >#T("enquire")</a>
}
}
</div>
</div>
The output before the rebuild was:
<div class="prices-container" shape-id="13">
<div class="more-info-link" shape-id="13">
<a class="btn" href="/identify-the-right-talent" shape-id="13">
More Information
</a>
</div>
<div class="prices-box" shape-id="13">
<p class="price" shape-id="13">GBP 1197.50 <br shape-id="13"><span style="font-size:13px;" shape-id="13">+ VAT</span></p>
<form action="/Events/ShoppingCart/Add/13817" method="post" shape-id="13"> <input type="hidden" name="currency" value="GBP" shape-id="13">
<input type="hidden" name="price" value="1197.50" shape-id="13">
<input type="hidden" name="GBP_price" value="1197.50" shape-id="13">
<button class="btn btn-success" type="submit" shape-id="13">register</button>
<input name="__RequestVerificationToken" type="hidden" value="w10QfGWfU3Y2UNIWRVXtsqUxcSS/OX4GxWCAsdaWDMHV15LqkMpDcqQFYJ1lpbf7ZlNTP5ckVrWFtatRh2poJBTE9NxlXQRua8CNuXgVGtGnSr3lpWpt2KeAwNNhsvmZIiSSSZOuhwbXD08K7+H2fSkrFUAOKVX+eTarLBWdjg8jySGV+Q82oA37NMEBZrQXOWkq4TjEusC5ILqptA1fLZOR8qu0xuPlWrMf4Dli2kw=" shape-id="13">
</form>
</div>
</div>
And after rebuilding the module the FORM ACTION is no longer output:
<div class="prices-container" shape-id="13">
<div class="more-info-link" shape-id="13">
<a class="btn" href="/identify-the-right-talent" shape-id="13">
More Information
</a>
</div>
<div class="prices-box" shape-id="13">
<p class="price" shape-id="13">GBP 1197.50 <br shape-id="13"><span style="font-size:13px;" shape-id="13">+ VAT</span></p>
<form action="" method="post" shape-id="13">
<input type="hidden" name="currency" value="GBP" shape-id="13">
<input type="hidden" name="price" value="1197.50" shape-id="13">
<input type="hidden" name="GBP_price" value="1197.50" shape-id="13">
<button class="btn btn-success" type="submit" shape-id="13">register</button>
<input name="__RequestVerificationToken" type="hidden" value="LcZyoXchQ7IjEJJvxoFQzAYNVOk1ybC7KB/GzXkYdlE5n1zIy6fg3Dod8twQDLxA/cYvBwYfXYDWbNSq81dsq4UTSxevK1vXJxWGAWKOlt0dmt3si5RKYJbIXEplIScSoEBtr5Jaq95YsCe4jpdMe3QroYF5NGj9P8BhPKWbucHJiLyBJULc6ktYuRL0BFQk+oE9AaaYUUv6hyh20T/XTlPjl9uxalvJMTCIiDtSlZQ=" shape-id="13">
</form>
</div>
</div>
Why would the BeginFormAntiForgeryPost and/or Url.Action no longer output the action URL?

Resources