I made a function with a fetch and it shows no errors until I run it. When I run it I get the error below. I ran it through jshint and jslint and they do not show any issues. This is pretty much a copy/paste of a function I have that works fine. Do you all see anything wrong?
Error from browser
Uncaught (in promise) SyntaxError: Unexpected end of JSON input
at HTMLInputElement.<anonymous> (admin:429:59)
this.element.querySelector("#product-btn").addEventListener("click", async function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
form=document.getElementById('product-upload');
const fields = {
csrf_token: {
input: document.getElementById('csrf_token'),
error: document.getElementById('csrf_token-error')
},
title: {
input: document.getElementById('title'),
error: document.getElementById('title-error')
},
description: {
input: document.getElementById('description'),
error: document.getElementById('description-error')
},
cost: {
input: document.getElementById('cost'),
error: document.getElementById('cost-error')
},
old_cost: {
input: document.getElementById('old_cost'),
error: document.getElementById('old_cost-error')
}
};
//This shows error in lint but it's jinja for python and works fine
const response = await fetch('{{ url_for('main.upload_products') }}', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
csrf_token: fields.csrf_token.input.value,
title: fields.title.input.value,
description: fields.description.input.value,
cost: fields.cost.input.value,
old_cost: fields.old_cost.input.value
})
});
//THE code below is where the error points to
data = await response.json();
if (response.ok) {
myDropzone.processQueue();
} else {
const errors = data;
form.classList.add('was-validated');
Object.keys(errors).forEach((key) => {
fields[key].input.classList.add('is-invalid');
fields[key].error.innerHTML = errors[key][0];
});
}
});
Related
I am using Cypress with Cucumber.
I am trying to test cross origin login but the origin method keeps on throwing error:
Code:
Given(/^the user login to the Test Page$/, function () {
cy.visit("https://example-originalURL");
cy.get("button").contains("Login").click();
const credentials = {
username: "hello",
password: "user",
};
cy.origin("https://example-newURL", { args: credentials }, ({ username, password }) => {
cy.get("#email", { timeout: 20000 }).type(username);
cy.get("#password").type(password, { log: false });
cy.get("button").contains("Login").click();
});
});
Cypress.config.js
module.exports = defineConfig({
projectId: "t7unhv",
e2e: {
setupNodeEvents(on, config) {
on("file:preprocessor", cucumber());
on('task', {
log(message) {
console.log(message +'\n\n');
return null;
},
});
},
specPattern: "./cypress/e2e/features/*.feature",
chromeWebSecurity: false,
experimentalSessionAndOrigin: true,
defaultCommandTimeout: 15000,
env: {
devCentralUrl: "https://***.dev.***.com.au/login",
testCentralUrl:
"https://***.test.***.com.au/login",
test***: "http://***.test.***.com.au",
dev***: "http://***.dev.***.com.au",
uat***: "https://***.uat.***.com.au",
dataSource: "",
environs: "test",
},
retries: {
runMode: 0,
},
pageLoadTimeout: 15000,
reporter: "mochawesome",
reporterOptions: {
reporterEnabled: "mochawesome",
mochawesomeReporterOptions: {
reportDir: "cypress/reports/mocha",
quite: true,
charts: true,
overwrite: false,
html: false,
json: true,
},
},
},
});
Error:
The following error originated from your test code, not from Cypress.
> on only accepts instances of Function
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
I have tried multiple syntax changes like not passing the credentials as optional argument to cy.origin.
If someone can provide a quick help, that will be great.
If the problem is in the test code, it is likely to be that newURL is undefined. The error message suggests the problem is in the app, but that might be a red herring.
Try just adding a fixed string for the cy.origin() key,
cy.origin('login', { args: credentials }, ({ username, password }) => {
...
})
I have to edit a message when an inline button is pressed.
Here is my code:
bot.action("option2", (ctx) => {
ctx.answerCbQuery();
bot.telegram.editMessageText(
ctx.update.callback_query.message.chat.id,
ctx.update.callback_query.message.message_id,
`Hello`
);
});
I'm getting the error:
{
response: {
ok: false,
error_code: 400,
description: 'Bad Request: message text is empty'
},
on: {
method: 'editMessageText',
payload: {
text: undefined,
chat_id: 'Hello',
message_id: { chat_id: -684957676, message_id: 578 },
inline_message_id: undefined
}
}
}
I'm using the Telegraf framework
I believe that I don't understand the order in which I should pass arguments.
How do I use the editMessageText?
You don't have to make it complex this way.
Just do this:
ctx.editMessageText('Hello')
I am following this tutorial on how to integrate react.js into rails and when I pre compile my assets I get an error with this code stating that (data) => this.setState({statuses: data}); causes SyntaxError: unknown: Unexpected token (14:44) I tried many things to get it to work and when I delete the semi-colon at the end it works except that the interval no longer gets called the console will say alert twice when the page is refreshed and then never again.
var StatusesContainer = React.createClass ({
componentWillMount() {
this.fetchStatuses();
setInterval(this.fetchStatuses(), 1000);
},
fetchStatuses() {
console.log("alert");
$.getJSON(
this.props.statusesPath,
{
space_id: this.props.space_id
},
(data) => this.setState({statuses: data});
);
},
getInitialState() {
return ({ statuses: [] });
},
render() {
return (<RecentStatuses statuses={ this.state.statuses }/>);
}
});
$.getJSON(
this.props.statusesPath,
{
space_id: this.props.space_id
},
(data) => this.setState({statuses: data});
);
Here is the problem: (data) => this.setState({statuses: data});, you should use , not ;
I am trying to fetch an entry in a collection with:
client/views/home.js:
criticalCrewNumber = ConfigValues.find({
name: 'criticalCrewNumber'
}).fetch()[0].value;
But I'm getting error:
Uncaught TypeError: Cannot read property 'value' of undefined
If I run the code in the browser console, the desired value is returned as a string.
I have tried various things, e.g. using findOne; placing the code elsewhere in the app; using iron-router waitOn for the subscription to come, etc. Every attempt so far has failed as I end up with undefined.
Here's how the collection is defined, published and subscribed to:
lib/config/admin_config.js:
ConfigValues = new Mongo.Collection("configValues");
ConfigValues.attachSchema(new SimpleSchema({
name: {
type: String,
label: "Name",
max: 200
},
value: {
type: String,
label: "Value",
max: 200
}
}));
both/collections/eventsCollection.js:
if (Meteor.isClient) {
Meteor.subscribe('events');
Meteor.subscribe('config');
};
server/lib/collections.js
```
Meteor.publish('events', function () {
return Events.find();
});
Meteor.publish('config', function () {
return ConfigValues.find();
});
```
Does anyone know what's going on? Thanks.
Consider using ReactiveVar (and Meteor.subscribe callbacks):
criticalCrewNumber = new ReactiveVar();
Meteor.subscribe('config', {
onReady: function () {
var config = ConfigValues.findOne({name: 'criticalCrewNumber'});
if (config) {
criticalCrewNumber.set(config.value);
} else {
console.error('No config value.');
}
},
onStop: function (error) {
if (error) {
console.error(error);
}
}
});
I can't see why Restangular would behave differently inside a jquery-ui callback to the way it does anywhere else. Can you?
The following works in my controller:
Restangular.all('skills').getList().then(function(result) {
console.log(result);
});
However, when I use Restangular inside the query function for a jquery-ui-select2 (via angular-select2), it never makes a request.
HTML:
<input type="text" ui-select2="skillOptions" ng-model="skills">
JavaScript:
$scope.skillOptions = {
multiple: true,
query: function(query) {
// I see this:
console.log("Q:", query.term);
// this silently fails:
Restangular.all('skills').getList({
query: query.term
}).then(function(body) {
// this callback is never reached (nor is the error one)
var skills = body.skills;
console.log("got skills", skills);
query.callback({
data: {
text: 'name',
results: skills
}
});
}, function(error) {
console.error("Error getting skills", error);
});
}
};
Is there another way to use the query callback with Restangular or can anybody see why on Earth this wouldn't work?
The solution was to nest the callback in a $scope.$apply (since I am on AngularJS version 1.1.5) as per this bit of the documentation
Here's some working code:
$scope.skillOptions = {
multiple: true,
query: function(query) {
$scope.$apply(function() {
Restangular.all('skills').getList({
query: query.term
}).then(function(body) {
var skills;
skills = body.skills;
console.log("got skills", skills);
return query.callback({
results: _(skills).map(function(s) {
return {
text: s.name,
id: s.id
};
})
});
}, function(error) {
console.log("Error getting skills", error);
});
});
}
};