js trigger submits an empty object error
<input hidden type="text" id="flag" name="flag" value="${model.flag}" >
$('input[value="submit"]').hide();
$('#bt-yes').click(function () {
$('#flag').val("1")
$('input[value="submit"]').trigger()
})
errorInfo:
Uneaught TvoeError: Cannot convert undefined or null to object
.trigger To pass the event name, change to
$('input[value="submit"]').trigger('click')
// or
$('input[value="submit"]').click()
Related
I have a writable store in Svelte with an object. I'd like to display the properties and be able to change the property values as a user.
I'm able to get the properties and values to display in input tags with an on:input event to update the value in the store, but I get an error saying the sampleStore.set isn't a function. I tried to add a custom update function to the store, but I'm getting the same error.
What's the best way to do this?
Sample code below
Store.js
import { writable } from 'svelte/store';
function createSampleStore() {
const sampleStore = writable({
property1a: 'value1a',
property1b: 'value1b',
etc...
}
return {
subscribe: sampleStore.subscribe,
updateValue: (propertyName, propertyValue) =>
sampleStore.update((o) => {
o[propertyName] = propertyValue;
return o;
}),
};
}
export const sampleStore = createSampleStore();
InfoDisplay.svelte
<script>
import {sampleStore} from './sampleStore.js';
const propertyNames = Object.keys($sampleStore);
$: console.log($sampleStore);
</script>
<ul>
{#each propertyNames as propertyName}
<li>
{propertyName}:
<input
on:input={(value) =>
sampleStore.updateValue(propertyName, propertyValue)}
bind:value={$sampleStore[propertyName]}
/>
</li>
{/each}
</ul>
I tried to adjust the values shown in the input tag and have the values in the store be updated, but I kept getting the .set is not a function.
The binding on the input value creates a get/set relationship, you should only pass the value in and use the event to get it out:
<input
on:input={e => sampleStore.updateValue(propertyName, e.target.value)}
value={$sampleStore[propertyName]} /> <!-- no bind here -->
You also do not need a custom store to do this and could just use a writable directly:
<input bind:value={$store[propertyName]} />
REPL
I am building a node.js,express.js and passport.js app. Once logged into the profile I ask the user to click a button “Get Location” to get the users location.
Profile.ejs
<form action="/testform" method="post" >
<div class="form-group">
<input type="text" class="form-control" id="latVal" placeholder="latitude">
<input type="text" class="form-control" id="longVal" placeholder="longitude">
</div>
<button type = "submit" class="btn btn-warning btn-sm">Save</button>
</form>
<button type = "submit" class="btn btn-warning btn-sm" onclick="getLocation()">Get Location</button>
onclick the getLocation() function is called which is located in mapCall.js
function getLocation()
…
//call to showLocation()
}
function showLocation(position) {
…
document.getElementById("latVal").value = latitude;
document.getElementById("longVal").value = longitude;
}
showLocation() sets the values in the form to the latitude (id="latVal") and longitude (id="longVal") returned from the API call. The values appear in the form field. From here I want to save these values to the users profile data in MongoDB which I try to achieve in routes.js by click of the “Save” button which triggers the function below
app.post('/testform', isLoggedIn, function(req, res) {
user.findById(req.user.id, function(err,user) {
if(!user) {
req.flash('error', 'No accound found');
return res.redirect('/profile');
}
user.location.latitude = req.body.latVal;
user.location.longitude = req.body.longVal;
user.save(function(err){
res.redirect('/profile');
});
});
});
When I console.log req.body.latVal and req.body.longVal the value for these variables is undefined. Nothing is saved in the db.
In server.js I have
var bodyParser = require('body-parser');
app.use(bodyParser());
Upon looking into proposed solutions to req.body returning undefined I tried
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
I didn’t think adding the two lines above would work because the value returned by the API is not in JSON format. This did not work. I checked the typeof for latitude and longitude and it is a number. I am not sure why req.body is not picking up the value.
My initial guess was that app.post tries to read the value before the API can return a value in which case req.body.latVal would read an empty field. I added the save button to test that theory which also proved wrong.
The closest thing I found to my issue is this which was never resolved.
Any guidance is highly appreciated or perhaps even a better way to accomplish this will be great. The reason I have the form fields populate is because I couldn't think of another way to send the values from the frontend to the backend for saving.
Add the name attribute to your inputs.
<input type="text" class="form-control" id="latVal" placeholder="latitude" name="latVal">
<input type="text" class="form-control" id="longVal" placeholder="longitude" name="longVal">
EDIT: (from the comment)
You can do an AJAX call to your server after the getLocation() call.
function getLocation() {
///you get the lat and long
showLocation(position)
saveLocation(latitude, longitude)
.then(function(resp){
//do something with resp
})
}
function saveLocation(latitude, longitude) {
//we have native fetch in newer browsers, so
return fetch("/testform", {
method: "POST",
headers: {
"Content-Type": "application/json; charset=utf-8", //if this doesn't work use the below one
// "Content-Type": "application/x-www-form-urlencoded",
},
body: JSON.stringify({latitude,longitude}), // body data type must match "Content-Type" header
})
.then(response => response.json());
}
This is just an outline of what you can do. Extend this code to your needs.
You are correct in most parts ,You just have to replace ID with name.that is the only way nodejs will be able to locate to your input field
I'm using Node.js, express, handlebars and handlebars-helpers.
When using res.render() I pass two objects to my Handlebars template, the objects are as follows:
var searchParams = {a: ['Apples']}
var searchFields = {a: ['Apples', 'Pears', 'Oranges']}
I then wish to create checkboxes on the pages using searchFields. When a checkbox variable is within the corresponding searchParams variable I want the checkbox to be checked by default.
I'm attempting to use the handlebars-helpers helper function inArray to achieve this using the following in the template:
<form>
{{#each searchFields.a}}
<label>
<input name="only_a_test" value="{{this}}" type="checkbox"
{{#inArray searchParams.a this}}
checked
{{else}}
{{/inArray}}
>
{{this}}
</label>
{{/each}}
</form>
However this throws the error:
Cannot read property 'length' of undefined
TypeError: .../web/views/search.hbs: Cannot read property 'length' of undefined
at Object.indexOf (.../web/node_modules/handlebars-utils/index.js:82:31)
at String.helpers.inArray (.../web/node_modules/handlebars-helpers/lib/array.js:225:26)
at eval (eval at createFunctionContext (.../web/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:254:23), <anonymous>:10:91)
at Object.prog [as inverse] (.../web/node_modules/handlebars/dist/cjs/handlebars/runtime.js:219:12)
at Object.utils.value (.../web/node_modules/handlebars-utils/index.js:237:50)
at String.helpers.eq (.../web/node_modules/handlebars-helpers/lib/comparison.js:170:15)
at eval (eval at createFunctionContext (.../web/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:254:23), <anonymous>:5:84)
at prog (.../web/node_modules/handlebars/dist/cjs/handlebars/runtime.js:219:12)
at execIteration (.../web/node_modules/handlebars/dist/cjs/handlebars/helpers/each.js:51:19)
at Object.<anonymous> (.../web/node_modules/handlebars/dist/cjs/handlebars/helpers/each.js:61:13)
I can't quite grok what's going on, I suspect it's having an issue with using this in the inArray block helper - it perhaps isn't seeing the underlying string?
As an alternative approach, you can consider writing you own custom 'Handlebars
Helper' as below,
Handlebars.registerHelper("isInArray", function(array, value) {
if (array.indexOf(value) != -1) {
return "checked";
}
});
Or an optimised way
Handlebars.registerHelper("isInArray", function(array, value) {
return array.indexOf(value) != -1 ? 'checked' : '';
});
And call it in your template file as,
<input name="only_a_test" value="{{this}}" type="checkbox" {{isInArray ../b this}}>
PEN. Hope this helps.
Alternative answer
As confirmed by OP, the real problem is due to the array being accessed incorrectly. The correct code is,
{{#inArray ../searchParams.a this}}
I am using Jhipster V3.
I have created an entity, and Jhipster generated all the needed views.
My client wants that in the update dialog of this entity, the click on Save doesn't close the popup.
I have commented one line on this function :
var onSaveSuccess = function (result) {
$scope.$emit('rhTechvalleyApp:consultantUpdate', result);
//$uibModalInstance.close(result);
vm.isSaving = false;
};
In this popup I have a datepicker component. Its value is getting blank once the save process has finished. It s only a display issue, but I don't know how to get rid of it.
If anyone knows...
Thanks.
[UPDATE]
transformResponse: function (data) {
data = angular.fromJson(data);
data.dateEnregistrement = DateUtils.convertLocalDateFromServer(data.dateEnregistrement);
data.dateDernierPointDisponibilite = DateUtils.convertLocalDateFromServer(data.dateDernierPointDisponibilite);
data.dateDisponibilite = DateUtils.convertLocalDateFromServer(data.dateDisponibilite);
return data;
}
<div class="input-group">
<input id="field_dateEnregistrement" type="text" class="form-control" name="dateEnregistrement" uib-datepicker-popup="{{dateformat}}" ng-model="vm.consultant.dateEnregistrement" is-open="vm.datePickerOpenStatus.dateEnregistrement"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.openCalendar('dateEnregistrement')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
You need to add transformResponse to the update function of the Angular service for your entity. It should be the same as transformResponse for get.
Example:
'update': {
method:'PUT',
transformResponse: function (data) {
data = angular.fromJson(data);
data.birthDate = DateUtils.convertLocalDateFromServer(data.birthDate);
return data;
}
}
The reason you need to do this is because the server will return a string like 2016-04-12 for dates. This needs to be converted to a JavaScript Date object, which is what Angular expects for type="date" inputs. If you use a string instead of a date object for ngModel on a date input, Angular will throw an error and fail to fill the field. You can use DateUtils.convertLocalDateFromServer for LocalDate and DateUtils.convertDateTimeFromServer for DateTime.
I'm new to js,
I see this a lot in the code I'm reading
_.pick(req.body, ' ' , ' ')
What does req.body do?
And when can I say req.body.something?
req.body holds parameters that are sent up from the client as part of a POST request. See the API.
// POST user[name]=tobi&user[email]=tobi#learnboost.com
req.body.user.name
// => "tobi"
req.body.user.email
// => "tobi#learnboost.com"
// POST { "name": "tobi" }
req.body.name
// => "tobi"
(req.body, ' ' , ' ') --> here req is the parameter of your function and using this parameter your can access the properties over then url.
so look this example
suppose this is form
<form>
enter the name : <input type="text" name="name">
<button type ="submit"> submit </button>
</form>
so if you want to access the name -- which is filled by the user end.
so for this you can
do like this-> console.log(req.body.name); -- this will print the name (property) in console.