I am using the #nuxt/algolia package and using the component. I've also setup the runtime config as shown below. However queries do not return anything (they say, "no results for "). When I look at the chrome network tab I can see the queries are coming back as status 200 and the correct index name is being called, but when I click on the failure and the web page opens there is an error {"message":"indexName is not valid","status":400}.
The weird thing here is that I have custom js code that uses the same env variables including the indexName and that code works. What am I doing wrong?
algolia: {
apiKey: process.env.ALGOLIA_SEARCH_API_KEY,
applicationId: process.env.ALGOLIA_APPLICATION_ID,
docSearch: {
indexName: process.env.ALGOLIA_INDEX
}
},
<template>
<AlgoliaDocSearch />
</template>
I have other js custom code that is able to both query and update indexes with the same env variables.
Related
I am attempting to write an ordering app using Google Firebase as the database to store everything. I attempted to test the connection but keep getting GET and POST HTTP 400 errors when I submit test data.
I have installed v8.0.0 via NPM. My firebase.js file is as follows:
import firebase from 'firebase/app'
import 'firebase/firestore'
import { firebaseConfig } from '#/firebaseConfig';
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
export const dbMenuRef = db.collection("menu");
Fire security purposes I keep the object Google generates for configuration containing the keys and such in a separate file. I even tried putting the object in the firebase.js file and still got these errors.
The data is structured as follows:
newOrder: {
customerName: 'John Doe',
customerPhone: '1-800-DRUIDIA',
items:[{
itemUPC: '1234567890',
itemDesc: 'A generic item',
itemDist: 'The one we always use'
}, {
itemUPC: '0987654321',
itemDesc: 'Another Generic Item',
itemDist: 'The other one we use'
}]
}
Data is two-way bound to a form. This is working properly and I have the newOrder object displayed in the component. This is working just fine as the JSON looks like above.
The following VueJS method is triggered by clicking a "Submit Order" button.
addOrder() {
dbMenuRef.add(this.newOrder)
}
Edit: I am using Firefox Developer Edition latest version.
Second Edit: This apparently works in Chrome, but not Firefox DE.
It looks like you are passing array as a value to items key. If you use dbMenuRef.add, you might want to add as sub-collections. Instead, you can use .set if you want to have the entire document added (please refer the documentation here. Can you try:
addOrder() {
dbMenuRef
.doc(this.orderID)
.set(this.newOrder)
}
I'm new to semantic-ui and to javascript as well, so please bear with me. I have a basic form that I'm trying to get working with the built-in form validation semantic-ui provides. This form is part of a web app using node, express, and pug. The structure of the specific form (view) I'm working on looks like this:
Sorry for using a picture but I'm trying to keep this high-level.
As you can see, I have a form (with I believe the requisite classes), a submit button and a script block at the end, which is where I've got the validation code at the moment.
Here's my validation code such as it is:
$('#new-password-form').form({
on: 'blur',
fields: {
password: {
identifier : 'password',
rules: [
{
type : 'empty',
prompt: 'You must enter a password'
},
{
type : 'regExp[/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!##\$%\^&\*])(?=.{8,})/]',
prompt: 'Your password must be at least 8 characters long, and contain upper and lower case characters, digit(s), and symbol(s)'
}
]
}
}
}, {
onSuccess : function(e){
e.preventDefault();
}
});
The trouble is, validation isn't working. When I click the submit button the form attempts a regular get submit and it's as if the javascript isn't even there somehow. Yet it is there. Node is showing everything is properly fetched and loaded by the browser. Inspecting the rendered HTML shows everything is there, and I see no errors in the console. The page appears to have loaded all the requisite files successfully as follows:
GET /enroll/new 200 31.281 ms - 2652
GET /stylesheets/style.css 200 0.859 ms - 735
GET /jquery/jquery.js 200 1.491 ms - 280364
GET /ui/semantic.min.css 200 1.508 ms - 628536
GET /ui/semantic.min.js 200 2.070 ms - 275709
GET /images/amm.png 200 2.068 ms - 25415
GET /ui/semantic.min.css 200 0.418 ms - 628536
GET /favicon.ico 404 9.768 ms - 1499
So what gives? Can someone tell me what I'm doing wrong? Happy to provide more detail if what I have here isn't enough.
Update:
I extracted the HTML to a flat file, and relinked the assets (png, js, css) so there is no server involved at all. The page loads in the browser just fine. I get the exact same behavior (nothing happens when submit is clicked except the page reloads with get parameters—default non-js behavior AFAIK). It's making me think something is wrong with jQuery or javascript itself.
Well I found the problem... a missing ',' at the end of the "type:" row (regExp[/^(?=.*[a-z])...).
Now validation is working for both the static file, and the server version. For what it's worth coming from other languages where this is not an issue, javascript's ubiquitous use of inline functions and data structures nested multiple levels deep is something I've had a very hard time getting used to. Makes it all too easy to miss some critical little piece.
I guess let this be another example of a basic setup of semantic-ui that works... so long as you don't leave off any commas. (I fixed the code above for those that might want to copy/paste)
I am developing a Point of sale (POS) for my store. And I am developing a Meteor app that will connect to the POS receipt printer. But as you know you cant simply use window.print().
I read but didnt understand the Meteor documentation about this, and I have several questions about it. (https://guide.meteor.com/mobile.html#using-plugins)
I have installed the katzer/cordova-plugin-printer (https://github.com/katzer/cordova-plugin-printer). And know here comes the questions.
1.- Once installed, I create a file outside the server and client folder and insert a statement such as
if (Meteor.isCordova) {
console.log("Printed only in mobile Cordova apps");
}
and then do I simply add the following line?
if (Meteor.isCordova) {
document.addEventListener('deviceready', function () {
// cordova.plugins.printer is now available
}, false);
}
2.- If this is correct, Do I create a Meteor Method in the server or in Meteor.isCordova? to call the following example.
var page = '<h1>Hello Document</h1>';
cordova.plugins.printer.print(page, 'Document.html');
3.- Should I use server side rendering to create the
var page = '<h1>Hello Document</h1>';
part.
Thank you
To answer your points:
Meteor.startup is run when the device or browser is ready (it's equivalent to what you are doing).
Create a method in the client code - Put the check in the button click method. Something like the code block at the end
Server side rendering won't apply as you are printing from the browser
if (Meteor.isCordova) {
Meteor.call("myPrintMethod",other-info);
} else {
alert("Sorry, I can only print from the device"
}
I want to databind a settings object to deep links in my Firebase via a firebase-document element as follows:
my-element.html
<firebase-document location="<my-firebase>/users/uid/settings"
data="{{settings}}"</firebase-document>
...
<paper-input label="Name" value="{{settings.name}}"></paper-input>
<paper-input label="Email" value="{{settings.email}}"></paper-input>
...
settings: {
type: Object,
notify: true,
value: {},
...
When I enter values in the paper-input fields in my app for name and email, I expect to see the Firebase values update. But, instead, they do not update.
What is the best-practice method to accomplish this deep-link databinding?
Edit
I just noticed there are 35 open issues with the firebase-element and this codelab appears to bypass using it for the same reasons. If the element isn't fully ready yet, please just state that. Also, the imports seem unusual based on the language here:
Components that want to use firebase should depend on firebase-element and import firebase.html to be safe from library duplication. Such components need not use Polymer or firebase-element, but we put the import and the element in one package for convenience.
It's hard to understand what the above paragraph is trying to say. So an example would help.
The OP code only works to edit an existing record. It does not work to create a new record at the endpoint (e.g., /settings in this case).
To do that, you must add an initial value when it doesn't otherwise exist at the Firebase endpoint as follows:
Test for the presence of an initial firebase value using on-firebase-value="_firebaseLoaded".
If none, (conditionally) add one inside the _firebaseLoaded method.
my-element.html
<firebase-document location="https://my-firebase.firebaseio.com/settings"
data="{{settings}}" on-firebase-value="_firebaseLoaded"></firebase-document>
...
<paper-input label="Name" value="{{settings.name}}"></paper-input>
...
settings: {
type: Object,
notify: true,
value: {},
}
...
_firebaseLoaded: function() {
if(!this.settings) {
this.set('settings', {});
}
},
Also, this post might be helpful reading.
I am using Meteor 4.2 (Windows) and I am always getting the "update failed: 403 -- Access denied. Can't replace document in restricted collection" when I am trying to update an object in my collection. Strangely I had no problem inserting new ones, only updates are failing.
I tried to "allow" everything on my collection:
Maps.allow({
insert: function () { return true; },
update: function () { return true; },
remove: function () { return true; },
fetch: function () { return true; }
});
But still, this update fails:
Maps.update({
_id: Session.get('current_map')
}, {
name: $('#newMapName').val()
});
Is there something else I can check? Or maybe my code is wrong? Last time I played with my project was with a previous version of Meteor (< 4.0).
Thanks for your help.
PS: Just for information, when I do this update, the local collection is updated, I can see the changes in the UI. Then very quickly it is reverted along with the error message, as the changes has been rejected by the server-side.
Alright, the syntax was actually incorrect. I don't understand really why as it was working well before, but anyway, here is the code that works fine:
Maps.update({
Session.get('current_map')
}, {
$set: {
name: $('#newMapName').val()
}
});
It seems like it must be related to what you're storing in the 'current_map' session variable. If it's a db object, then it probably looks like {_id:<mongo id here>} which would make the update finder work properly.
I ran into the same issues, and found the following to work
Blocks.update {_id:block_id}, {$set: params}
where params is a hash of all the bits i'd like to update and block_id is the mongo object id of the Block i'm trying to update.
Your note about the client side update (which flashes the update and then reverts) is expected behavior. If you check out their docs under the Data and Security section:
Meteor has a cute trick, though. When a client issues a write to the server, it also updates its local cache immediately, without waiting for the server's response. This means the screen will redraw right away. If the server accepted the update — what ought to happen most of the time in a properly behaving client — then the client got a jump on the change and didn't have to wait for the round trip to update its own screen. If the server rejects the change, Meteor patches up the client's cache with the server's result.