I'm having a problem with my GET request to API, here is:
self.search = {
init_date: new Date(),
end_date: new Date(),
statuses: {"Aberto": false, "Em andamento": false, "Fechado": false},
district: null,
address: null,
tags: null
};
$http.get(apiUrl + requestEndpoint + 'search', {params: self.search}).then(function(response){
self.gridOptions.data = response.data;
});
So, what is happening is that my params in API looks like this
{"end_date"=>"2016-07-07T22:58:11.943Z",
"init_date"=>"2016-07-07T22:58:11.943Z",
"statuses"=>"{\"Aberto\":false,\"Em andamento\":false,\"Fechado\":false}",
"format"=>:json,
"controller"=>"api/v1/requests",
"action"=>"search"}
and then I cannot read the statuses because it's a kind of string. How should I solve that?
Just to know... My Statuses value come from form in HTML with checkboxes
<div class="form-group">
<h5>Status</h5>
<div class="col-sm-12">
<input type="checkbox" name="status" id="aberto" class="k-checkbox" value="Aberto" ng-model="reportsCtrl.search.statuses['Aberto']">
<label class="k-checkbox-label" for="aberto"> Aberto </label>
<input type="checkbox" name="status" id="em-andamento" class="k-checkbox" value="Em andamento" ng-model="reportsCtrl.search.statuses['Em andamento']">
<label class="k-checkbox-label" for="em-andamento"> Em andamento </label>
<input type="checkbox" name="status" id="fechado" class="k-checkbox" value="Fechado" ng-model="reportsCtrl.search.statuses['Fechado']">
<label class="k-checkbox-label" for="fechado"> Fechado </label>
</div>
</div>
PS: My API is Rails
Regards.
Related
I am trying to make an edit profile page in which user can update its current email or pwd by inputting current email and password and then give new ones. I am also sending whole data of user(including username and password) when he sign in through viewdata.
#{
var user = (User)ViewData["User"];
}
<div class="account-info mt-3">
<fieldset class="border border-dark p-3">
<legend class="float-none w-auto">Account Info</legend>
<div class="mb-3 simpleinfo">
<label for="email" class="form-label">Enter Your Current Email</label>
<input type="email" class="form-control" name="Username" id="prevemail"/>
</div>
<div class="mb-3 simpleinfo">
<label for="prevpwd" class="form-label">Enter Your Current Password</label>
<input type="password" class="form-control" name="Pwd" id="prevpwd"/>
<button type="button" class="btn btn-success mt-4 checkcred">Update Credentials</button>
</div>
<div class="mb-3 simpleinfo">
<label for="email" class="form-label">Enter new Email</label>
<input asp-for="Username" disabled type="email" class="form-control" id="newemail">
</div>
<div class="mb-3 simpleinfo">
<label for="newpwd" class="form-label">Enter New Password</label>
<input type="password" disabled class="form-control" asp-for="Password" id="newpwd">
</div>
</fieldset>
</div>
Now i want to compare the email that user enters and the email that is present in the user object.
here's my code for this:
<script>
$('.checkcred').click(function() {
var prevemail = $('#prevemail').val();
var prevpassword=$('#prevpwd').val();
if(prevemail==#user.Username&&prevpassword==#user.Password)
{
alert("Validated");
}
else
{
alert("not validated");
}
});
</script>
But it is giving me syntax error on Console: Invalid or unexpected token.
Please lemme know what i am doing wrong.
I am converting a form from knockout to vue 2 with an ASP.NET MVC 5 Controller for the back end. This is my first attempt using vue. When the user presses the + button, it adds a new row onto the form. The issue I'm having is submitting that to the back end. The old knockout code dynamically set the name attribute in the form elements to Quantities so the form array properly submits all of the data. I would like to do the same thing with vue but am having a a bit of trouble dynamically setting the name of each element dynamically. What would be the best way to do this in order to submit the form without having to rewrite the Controller signature? It should store the form array under the name Quantities.
Image:
HTML:
<div id="radios" v-for="(row,key) in order">
<div class="row">
<div class="col-md-3">
#Html.SmartLabel("systemType", "System Type", true, labelClass)
<label>
<input type="radio" value="#Model.WifiId" v-model="order[key].selectedSystemType" v-on:change="systemChanged(key)"> Wifi
</label>
<label>
<input type="radio" value="#Model.WirelessId" v-model="order[key].selectedSystemType" v-on:change="systemChanged(key)"> Wireless
</label>
<label>
<input type="radio" value="#Model.FiberId" v-model="order[key].selectedSystemType" v-on:change="systemChanged(key)"> Fiber
</label>
</div>
<div class="col-md-4">
#Html.SmartLabel("assetType", "Asset Type", true, labelClass)
<!--
https://stackoverflow.com/questions/43812817/how-to-set-optgroup-select-label-in-vue-js
-->
<select id="asset-type" name="" class="form-control" v-model="order[key].selectedAsset" v-on:change="assetTypeChanged(key)">
<optgroup v-for="(group, name) in order[key].assets" v-bind:label="name">
<option v-for="asset in group" v-bind:value="asset">
{{asset.Name}}
</option>
</optgroup>
</select>
</div>
<div class="col-md-2">
#Html.SmartLabel("quantity", "Quantity", true, labelClass)
<input type="number" min="1" class="form-control" v-model="order[key].quantity" />
</div>
<div class="col-md-2">
<div v-show="costTracked">
#Html.SmartLabel("cost", "Unit Cost", true, labelClass)
<input type="number" min="1" class="form-control" v-model="order[key].cost" />
</div>
</div>
<div>
<span style="cursor:pointer" v-on:click="removeItem(key)">
X
</span>
</div>
</div>
</div>
Vue.js code:
var app = new Vue({
el: '#vue-app',
data: {
assets: {},
assetQuantityEnabled: false,
costTracked: false,
order: []
//Quantities: []
},
methods: {
// Trigger when system type radio selection changes
systemChanged: function (key) {
$.getJSON('#Url.Action( "GetAssetsOfSystem", "RadioOrder" )?systemTypeId=' + this.order[key].selectedSystemType, function (data) {
var result = {};
// Add assets to category (AssetCategory)
for (const asset of data) {
(asset.AssetCategoryName in result) ? result[asset.AssetCategoryName].push(asset) : result[asset.AssetCategoryName] = [];
}
// Sort assets within each category
for (const option in result) {
result[option].sort((a, b) => {
return a.Name.localeCompare(b.Name);
});
}
this.order[key].assets = result;
this.costTracked = false;
this.assetQuantityEnabled = false;
}.bind(this));
},
assetTypeChanged: function (key) {
this.assetQuantityEnabled = true;
this.costTracked = this.hasMacOrSerial(this.order[key].selectedAsset);
},
addItem: function () {
obj = this.defaultObj();
this.order.push(obj);
},
convertFormData: function(){
var q = [];
for(let i=0; i < this.order.length; i++)
{
var obj = {
AssetTypeId: this.order[i].selectedAsset.AssetTypeId,
AssetTypeIsSerialized: this.hasMacOrSerial(this.order[i].selectedAsset),
Quantity: this.order[i].quantity,
UnitCost: this.order[i].cost
};
q.push(obj);
}
return q;
},
defaultObj: function () {
return {
asset: '',
assets: [], // list items
cost: 0,
quantity: 1,
selectedSystemType: null,
selectedAsset: null
};
},
hasMacOrSerial: function (asset) {
return (asset.HasMacAddress || asset.HasSerialNumber) ? true : false;
},
removeItem: function (key) {
this.order.splice(key, 1);
}
}
});
Controller method signature:
public virtual ActionResult Create(
[Bind(Include = "VendorId,OrderNumber,RequisitionNumber,Quantities,SerializedAssets,Attempt")] InventoryOrderDto dto)
Old HTML using Knockout:
<div class="col-md-6">
<div class="panel panel-default white-box">
<div class="panel-heading">
<h3 class="panel-title">Order Summary</h3>
</div>
<div class="panel-body">
<div id="radios" data-bind="foreach: QuantitiesDisplay, visible: QuantitiesDisplay().length > 0" style="display: none">
<div class="row">
<input type="hidden" data-bind="value: AssetTypeId, attr: {name: 'Quantities[' + $index() + '].AssetTypeId'}" />
<input type="hidden" data-bind="value: AssetTypeIsSerialized, attr: {name: 'QuantitiesDisplay[' + $index() + '].AssetTypeIsSerialized'}" />
<input type="hidden" data-bind="value: UnitCost, attr: {name: 'Quantities[' + $index() + '].UnitCost'}" />
<div class="col-md-3" data-bind="text: AssetTypeName" style=" word-break: break-all;">
</div>
<div class="col-md-3">
<input type="number" min="1" class="form-control" data-bind="value: Quantity, attr: {name: 'Quantities[' + $index() + '].Quantity'}" />
</div>
<div class="col-md-3">
<input type="number" min="1" class="form-control" data-bind="visible:AssetTypeIsSerialized, value: UnitCost, attr: {name: 'Quantities[' + $index() + '].UnitCost'}" />
</div>
<div class="col-md-2">
<a class="btn btn-danger" title="Remove" data-bind="click: $root.removeItem">
<i class="fa fa-minus-circle"></i> Remove
</a>
</div>
</div>
</div>
<div id="emptyOrder" data-bind="visible: QuantitiesDisplay().length == 0">
No items are currently selected. Please choose from the adjacent pane.
</div>
<input id="submit" type="submit" value="Continue" class="btn btn-primary" data-bind="visible: QuantitiesDisplay().length > 0" style="display: none">
</div>
</div>
</div>
Ah I found it - need to use v-bind to dynamically set the name.
<div class="col-md-2">
#Html.SmartLabel("quantity", "Quantity", true, labelClass)
<input type="number" min="1" class="form-control" v-model="order[key].quantity" v-bind:name="'Quantities[' + key + '].Quantity' " />
</div>
https://medium.com/swlh/building-dynamic-forms-with-django-formsets-and-vue-js-f3c6e2dddd4a
I want to add a project name and task name while clicking on a particular date in fullcalendar but I don't know how to use bootbox.prompt or bootbox.dialog with more than one fields so can you help me out?
select: function (start, end, allDay) {
debugger;
bootbox.prompt("Add New Event", function (title) {
debugger;
if (title !== null) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay,
className: 'label-info'
},
true // make the event "stick"
);
}
});
It's quite simple, we can use bootbox dialog for that
bootbox.dialog({
title: 'Add New Event',
message: $('#form'),
show: false,
}).on("shown.bs.modal", function (e) {
$('#form').show()
}).on('hide.bs.modal', function (e) {
/**
* Bootbox will remove the modal (including the body which contains the login form)
* after hiding the modal
* Therefor, we need to backup the form
*/
$('#form').hide().appendTo('body');
})
.modal('show');
calendar.fullCalendar('unselect');
}
In html
<form id="form" method="post" class="form-horizontal" style="display: none;">
<div class="form-group">
<label class="col-xs-3 control-label">Username</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary" style="float:right;">Login</button>
</div>
</div>
Am I missing something? I copied this code snippet over:
Automatically render the reCAPTCHA widget
I entered my registered data-sitekey. The reCAPTCHA displays and works when I check the box, but if I don't check the box and submit my form, the reCAPTCHA doesn't stop the user submission and my controller processes the request.
#model Medicaid.WebUI.ViewModels.RequestModel
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<table class="table">
<tr>
<td>
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "request-form", #class = "form-horizontal" }))
{
#Html.AntiForgeryToken()
<fieldset>
<legend>Request</legend>
<div class="form-group">
<label for="inputFirstName" class="col-lg-2 control-label">First Name</label>
<div class="col-lg-10">
<input type="text" value="#Model.FirstName" class="form-control" maxlength="50" name="FirstName" id="FirstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="col-lg-2 control-label">Last Name</label>
<div class="col-lg-10">
<input type="text" value="#Model.LastName" class="form-control" maxlength="50" name="LastName" id="LastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" value="#Model.Email" class="form-control" maxlength="100" name="Email" id="Email" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2"><br /><br />
<div class="g-recaptcha" data-sitekey="IenterMykeyHere"></div><br /><br />
<button type="submit" class="btn btn-primary">Submit Request</button>
</div>
</div>
</fieldset>
}
</td>
</tr>
</table>
<br /><br />
#Html.ValidationSummary()
I was having this issue and re-read the documentation, and worked it out as the following:
function onBegin() {
$("input[type='hidden']").val(grecaptcha.getResponse());
}
You have to add a javascript function to the "onBegin" parameter of the AjaxOptions object from the MVC html helper - that will copy the value of the widget's response to a hidden variable you need to declare inside your form, so the submit button sends it to the controller. Don't forget to add a variable with the same name to the "RequestModel" view model so that the mvc model-binding passes it and you then will be able, in the server, to know if the user has clicked the button or not.
#using (Ajax.BeginForm("NewRecaptchaVerify", "ReCaptcha", new AjaxOptions
{
HttpMethod = "Post",
OnSuccess = "onSuccess",
OnFailure = "onFailure",
OnBegin = "onBegin",
OnComplete = "onComplete"
}))
{
#Html.HiddenFor(m => m.Response)
<div class="g-recaptcha" data-sitekey="your-site-key"></div>
<input type="submit" id="btnSubmit" value="Submit" />
}
(for the record, I am now facing the problem of knowing, in the server, in cases where the widget prompted the user to enter a text input, after clicking the button - whether he/she entered the text or not. Seems to me that in the end I will have no way out other than performing a GET request, in the server, to the widget's api, as they put it in the documentation: https://www.google.com/recaptcha/api/siteverify?secret=your_secret&response=response_string&remoteip=user_ip_address
I'm having a problem trying to update a users password using a simple form with old and new password. The problem is I post {"user[current_password]":$scope.user.password,"user[password]":$scope.user.newpassword} data to my Devise::RegistrationsController and I get a simple 422 Unprocessable Entity response. Where am I going wrong?
This is my html
<div ng-controller="PasswordCtrl">
<form id="password-card" class="row" style="display:none;" name="password_form" ng-submit="changePassword()" novalidate>
<div class="span5">
<div class="form-inputs">
<label for="nPass"><%= I18n.t("registration.edit.current_password") %></label>
<input name="uPass" class="required" type="password" ng-model="user.password" required >
<div ng-show="password_form.uPass.$dirty && password_form.uPass.$invalid">Missing:
<span ng-show="password_form.uPass.$error.required">You must provided your current password.</span>
</div>
<label for="nPass"><%= I18n.t("registration.edit.new_password") %></label>
<input name="nPass" class="required" type="password" ng-model="user.newpassword" required >
<div ng-show="password_form.nPass.$dirty && password_form.nPass.$invalid">Missing:
<span ng-show="password_form.nPass.$error.required">Tell us your new password.</span>
</div>
<button id="x" type="submit" ng-disabled="!password_form.$valid" class="button secondary prefix">Breyta</button>
</div>
</div>
</form>
</div>
This is my angular controller
var PasswordCtrl=function($scope,registrationService, $http){
$scope.changePassword=function(){
console.log("current_password",password_form.uPass.value);
$http({
method: 'PUT',
url: '/skraning.json',
headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')},
data: {"user[current_password]":$scope.user.password,"user[password]":$scope.user.newpassword}
}).
success(function(data, status, headers, config) {
console.log("done",data);
});
};
};
your data object passed is not valid( user[current_password] & user[password]) : try like this with quotes
data: {"user['current_password']":$scope.user.password,"user['password']":$scope.user.newpassword}