I'm working with polymer and I'm testing all in my local environment and all is working as expected, but the problem is when I'll move it into production, where the url shouldn't be the same as in my local. In node.js I can set it via the config.json file and catch it with app.get('config') or something like that, but in polymer I cant get it, and the only chance I have is to create another endpoint with all the config.json config file, but, and here is the best part, I should hardcode this url in polymer!! (so annoying). There is some way or library or component or something that I'm missing ?
Thanks in advance guys! StackOverflow and the users helped my a lot!
UPDATE
The thing is that I'm using custom elements (because I had handlebars too and there is a little problem with the {{}}) so, in the custom elements that I created I have this (for example in the core-ajax call):
<core-ajax id="login" auto="false" method="POST" contentType="application/json" url="/app/middle/login" ....></core-ajax>
as you can see the url is a little bit hardcoded, I want to use something like this (this is what I have on the node.js endpoint application):
router.post(endpoint.login, function (req, res) {
and I want to got something like that over polymer
<core-ajax id="login" auto="false" method="POST" contentType="application/json" url="{{login}}" ... ></core-ajax>
<script>
Polymer('log-form', {
login: endpoint.login,
ready: function () {
....
})
});
</script>
I'ts more clear now? I'm not so strong on english language.
Thanks Guys, for all!
Related
What i am trying to do is create a custom stripe form in ReactJS ,i don't want to use react-stripe-elements , i have already built a custom form and after some digging i found a solution that fits my needs but the solution was in vanilla Javascript, so what it does is that it appends a script to the body and creates a global Stripe variable that can you can use to access the Stripe API
import React from "react";
const loadStripe = () => {
if (!window.document.getElementById("stripe-script")) {
var s = window.document.createElement("script");
s.id = "stripe-script";
s.type = "text/javascript";
s.src = "https://js.stripe.com/v2/";
s.onload = () => {
window["Stripe"].setPublishableKey(
"PUBLIC_KEY_HERE"
);
};
window.document.body.appendChild(s);
}
return window.Stripe;
};
export default loadStripe;
and then i use it as
let Stripe = loadStripe();
const onSubmit = (cardNumber,exp_month,exp_year,CVC) =>{
Stripe.card.createToken(
{
number: cardNumber,
exp_month: exp_month,
exp_year: exp_year,
cvc: CVC,
},
(status, response) => {
console.log(status);
console.log(response);}
}
}
the above solution obviously does work but I was hoping that someone could point me in the right direction so that i could get rid of the loadStripe Component and use Something like a npm package or a React Specific solution (because as far as i know i shouldn't be creating and appending scripts in the body using JS)
Any Help would be much appreciated :)
I was hoping that someone could point me in the right direction so that i could get rid of the loadStripe Component and use Something like a npm package or a React Specific solution
If you're looking for an npm package, Stripe recently released their own official library to load Stripe.js which you can find here:
https://www.npmjs.com/package/#stripe/stripe-js
In fact, #stripe/stripe-js works much in the same way as the custom loadStripe function you have now as you can see here:
https://github.com/stripe/stripe-js/blob/master/src/shared.ts#L7-L24
I should note that it's perfectly okay to append scripts in the body using JavaScript as long as you have a good handle on how the script loads (i.e., through async Promises).
That being said, using your loadStripe function or Stripe's official one (#stripe/stripe-js) isn't a requirement. Controlling how and when to inject Stripe.js in the DOM is very helpful when doing server-side rendering (0). But, if that isn't something you're doing, you can just include Stripe.js manually (1) in the <head> of your html like this:
<html>
<head>
<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
What i am trying to do is create a custom stripe form in ReactJS ,i don't want to use react-stripe-elements
If you are using React v16.8 or greater, the official recommendation would be to use our new React library which you can find here:
https://www.npmjs.com/package/#stripe/react-stripe-js
But if your heart's set on not using either #stripe/react-stripe-js or the older react-stripe-elements library, it is definitely possible to roll your own custom integration. Here's a very bare-bones example of how you could do that:
https://codesandbox.io/s/eager-cdn-krumt
I'm including Stripe.js here: https://codesandbox.io/s/eager-cdn-krumt?file=/public/index.html:1062-1116
And integrating it into a component here: https://codesandbox.io/s/eager-cdn-krumt?file=/src/Checkout.js
Be sure to replace pk_test_xyz with your own publishable key before testing it out.
Hope this helps!
[ 0 ] https://alligator.io/react/server-side-rendering/
[ 1 ] https://stripe.com/docs/js/including
I'm using code like {{user.city}} in one of my templates to pull data from my MySQL DB on my Ionic Hybrid App.
On my frontend, For a value like
Bogotá
I get
Bogotá
I made sure to set my DB collation to utf8_unicode_ci.
I tried searching and it seems I need to decode the entities, but I haven't been able to do so.I tried using:
<div ng-bind-html={{user.city}}></div>
Please bare in mind I have several values like this, not only one.
I'm also using an Ionic App I got from a code market, and I'm not very ionic-savvy, so if you could provide detail I would be very grateful!
Thanks!
David
You must encode the locations in php.
Then in your controller:
$http.get("path").success(function(response) {
var res =response.results;
var locationtext =[];
for (key in res){
//in this case your locationsTEXT is the locations from the API
locationtext.push(JSON.parse(res[key].locationsTEXT));
}
$scope.city = locationtext;
}
In view:
<ion-list>
<ion-item ng-repeat="point in city track by $index">
<p>{{point}}</p>
</ion-item>
</ion-list>
Keep in mind that, above code is a general solution. You must adapt this code according to your variables and needs.
Hope this helps!
Basic background:
I have an express node server running a really simple website. The first page of the site has two inputs (1 text, 1 number)
<input type="text" name="xml_url" id="xml_in" placeholder="Required" />
<input type="number" min="0" name="c2" id="c2_in" placeholder="Required" />
As of right now really simple, the user inputs a url and a number, my app builds something and returns a link to a file.
My node server (basically) looks like this:
app.post('/secondPage', function(req, res){
var url = req.body.xml_url
, c2 = req.body.c2;
//some stuff happens etc...
res.render('finalpage.html', {
foo: c2andsomething
url: newurl
});
My Question/Issue:
I want to be able to not use my front end. I believe the code will basically work (besides the render, I believe I will need something along the lines of
res.send(aJsonResponse); // obviously I will need to build the json
I just don't know how I can fake this post request. I'm sort of drawing a blank here. So far I've only really tried a few websites that claim they'll send a post request etc.. and tried in the browser just typing in my url with a query string, but my app doesn't accept GET..
Hopefully this wasn't too much rambling, but I would love to hear some suggestions. Will remove if this question makes no sense.
EDIT:
Okay so I always seem to jump the gun with these questions. I just tried in the console:
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "http://192.168.1.1:3000/secondPage", true);
xmlhttp.send("foobar");
And I'm getting a CORS error.. I think I'll be able to figure this out here shortly, if you have any suggestions I would still really love to hear them.
Thanks
EDIT 2:
So I'm able to send the request and such no CORS issues.. but I'm not sure how to set the body in the request.
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "http://192.168.1.1:3000/secondPage", true);
xmlhttp.send({"xml_in":"I-thought-this-was-the-body"});
but req.body is {}
Well I solved my issue using cURL, so not the best answer but here was what I used
curl -d "xml_in=http://google.com&c2=12345" http://192.168.1.1:3000/secondPage
I'm trying out node and some frameworks for node atm, specifically locomotive. However, i seem to be stuck on routing using locomotive. A couple questions i can't find the answer to, so here goes:
why does the locomotive out-of-box install use index.html.ejs as a
filename? Why not just index.ejs? What's the benefit?
i'm trying to add a route to a view: searchName.html.ejs which i
added in the views folder. To achieve this i made a toolController
like this:
var locomotive = require('locomotive').Controller,
toolController = new Controller();
toolController.searchName = function() {
this.render();
}
module.exports = toolController;
I also added a route in routes.js like so:
this.match('searchName', 'tool#searchName');
However, that doesn't work (and yet it's what the documentation says ought to work). The result is a 404 error. So how do i make that route work?
Suppose i want to make a route to eg, anExample.html? How do i go
about that? I notice that in the out-of-the-box app from
locomotive, you cannot enter localhost:3000/index.html . Nor even
localhost:3000/index This seems highly impractical to me, as there
are plenty of users who'll add the specific page they want to go to.
So how can i make that work?
PS: I went through all questions regarding this on stackoverflow and searched the web, but i still can't figure this out.enter code here
The benefit is that this naming scheme allows you to specify several different formats for a single route. So you could have search_name.html.ejs and search_name.xml.ejs, then respond with either view depending on what your client is expecting.
There are a couple issues with the example code you posted. You should be seeing a more descriptive error than a 404, so I'm not sure what's happening there, but here are the fixes to your code that work in my environment.
In the controller:
//tool_controller.js
var locomotive = require('locomotive');
var toolController = new locomotive.Controller();
toolController.searchName = function() {
this.render();
};
module.exports = toolController;
In routes.js:
//routes.js
module.exports = function routes()
{
this.match('searchName', 'tool#searchName');
}
Then, you'll need to change the view to this: views/tool/search_name.html.ejs. It's not clear from the documentation, but locomotive automatically lowercases and underscores actions that are camel-cased, like searchName.
Now start the app and browse to http://localhost:3000/searchName
If you just want to serve a static html file, the easiest way is to just drop it in the public folder. This folder is specifically for serving up static content like client-side js, css, etc. And it works just fine for serving static HTML as well.
What I basically try to accomplish is to re-use jade partials/templates when getting data through a socket connection. Non working example:
socket.on('company_created', function(company) {
var html = include _company;
$('#companies ul').append(html);
});
Normally I had to create a new li and set the content like so (which is working as expected):
$('#companies ul').append($('<li>').text(company.name));
This is okay for a simple list, but if I had complexer list and stuff, this could get messy pretty quick, plus I had to write plain HTML again, so I figured re-using my already existing jade templates with all their goodness would be awesome, but had not luck, yet.
Any clue?
PS: Please do not tell my to use Ember, Backbone, Derby, Meteor, Angular or whatsoever.
Thanks in advance!
You can compile your jade sources to JS with jade.compile. Then include these sources in the client-side javascript, include jade's runtime.min.js, and refer to your jade templates as to normal JS functions in your client-side code.
For example,
server.js
app.get('/templates/:template.js', function (req, res) {
var template = req.params.template;
response.end([
"window.templates = window.templates || {};",
"window.templates[\"" + template + "\"] = " + jade.compile(template + ".jade", { client: true; });
].join("\r\n"));
});
client.js
$(function() { $("#placeholder").html(window.templates["content"]({user: "Daniel" })); });
content.jade
h1: Hello #{user}!
index.jade
!!!
html
head
script(src='/lib/jquery/jquery.js')
script(src='/lib/jade/runtime.min.js')
script(src='/templates/content.js')
script(src='/scripts/client.js')
body
#placeholder
Note that the code above might be syntactically incorrect and is provided solely to illustrate the idea.
we have a build step that compiles them to functions sort of like penartur mentioned. I dont use extend or include (which dont work on the client anyway ATM), but personally I find we have absolutely no need for that on the client at all since the DOM provides all the separation we need.