Not sure if this a Sails.js issue or me missing something implementing axios. I am trying to follow this basic example from axios docs here.
I am referencing the axios library via the CDN URL.
new Vue({
el: '#app',
data () {
return {
info: []
}
},
mounted () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response))
}
})
<div id="app">{{ info }}</div>
All I see inside the <div id="app"> is []. The call to the API is successful as evidenced by console.log(response) but the div does not update.
Tried changing mounted to created with no luck.
Am I missing additional setup/configuration?
After much digging, discovered that Sails.js uses something called parasails which does auto-magic hookup for vue.js. Essentially, I moved my code to the parasails created javascript file and everything works as expected.
Looks like vue app created in my js file was overridden by the objects created in the js file created via parasails
Related
I have spent some hours trying to figure out my problem without any success.
before reading the explanation
My nuxt site generates dynamic content and works well on client side but for SEO to work and social media shares render dynamic content i need to move my app to SSR. This axios post request do work on client side rendering but does not on SSR and I don't understand the reason and I need help to understand it.
Thanks
For starters I am building a Nuxt app that consumes Drupal as a CMS using a fully decoupled approach and I have been using it for several VUE apps without problem and now I need to do them on Nuxt with a SSR approach because I need heavy SEO on the sites. With Nuxt the same request against oauth/token on drupal doesn't work and I have gone from the complex structure we had to the simple one using both Axios and Nuxt/Axios without any success and alway getting a 400 error code.
I need to run this code first on my app so I can get drupal access token and do some request for data.
Code on store
export const actions = {
async nuxtServerInit({dispatch}, vuexContext, context, app){
await dispatch("setToken");
},
async setToken({ commit, dispatch, getters }, context) {
//prep form data to send
const FormData = require('form-data');
const body = new FormData();
body.append("param1", apiConfig.getValue("param1"));
body.append("param2", apiConfig.getValue("param2"));
body.append("param3", apiConfig.getValue("param3"));
body.append("param4", apiConfig.getValue("param4"));
body.append("param5", apiConfig.getValue("5"));
await this.$axios.$post(url, body)
.then(({data}) => {
//code to process data
commit("SET_TOKEN_DATA", data);
}).catch(error => {
console.log(error)
}).finally(() => {
console.log("FINALY");
});;
}
Some updates
base url is defined on nuxt.config as
// module options for axios
axios: {
baseURL: 'mysite.com'
},
I have tied on http request the following request using both axios and nuxt/axios, I will write short request just to show what I edid
await this.$axios.$post('mysite.com/oauth/token', body)
await this.$axios.$post('/oauth/token', body)
await this.$axios.$post('oauth/token', body)
I have also tried to use
const api = $axios.crate({
baseURL: 'url'
})
api.$axios.post('oauth/token', body)
another updated
Crated a Client Side Nuxt app and the request works.
Fix it, after literally 16 hours trying. When multiform post data you need to send FormData headers on the post and again, this works without any issues using CSR on VUE and Nuxt.
await this.$axios.$post(url, body, { headers: body.getHeaders()}).yada
I don't know if it's Axios or Nuxt the one doing this but I followed a breadcrumb trail to this post https://github.com/axios/axios/issues/318
Is it possible to connect to the SeatGeek API to display local event data on a Squarespace site?
The Squarespace API docs all seem directed towards commerce-related goals.
I am familiar with how to connect to the SeatGeek API in the context of a mobile application. But I don't know whether connecting to APIs (other than those listed for commerce) from within a Squarespace is doable.
SeatGeek would be an unofficial integration . I've posted on the squarespace forums with no response, so asking here to see if anyone out there knows about it.
Thanks very much for any help!
Squarespace websites above the "Personal" plan tier support the addition of custom JavaScript via Code Blocks and Code Injection.
Therefore, if SeatGeek supports using their API via JavaScript (and it appears that they do), then you can obtain the data from within your Squarespace website.
Where within your site the code is added and what initialization methods are used will vary on a case-by-case basis. For example, factors include: whether you are using Squarespace 7.0 or 7.1 and whether the template you're using supports AJAX Loading and has it enabled.
However, regardless of where the code is added and the initialization methods used, it looks to me, based on what I see here, that obtaining data from SeatGeek via JavaScript is possible. (Select "JavaScript > XMLHttpRequest" or "JavaScript > Fetch" from the upper-right "Code Snippet" panel where it says "(Node.js) Unirest" by default):
var data = null;
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
console.log(this.responseText);
}
});
xhr.open("GET", "https://seatgeek-seatgeekcom.p.rapidapi.com/events");
xhr.setRequestHeader("x-rapidapi-host", "seatgeek-seatgeekcom.p.rapidapi.com");
xhr.setRequestHeader("x-rapidapi-key", "SIGN-UP-FOR-KEY");
xhr.send(data);
Or, via fetch:
fetch("https://seatgeek-seatgeekcom.p.rapidapi.com/events", {
"method": "GET",
"headers": {
"x-rapidapi-host": "seatgeek-seatgeekcom.p.rapidapi.com",
"x-rapidapi-key": "SIGN-UP-FOR-KEY"
}
})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err);
});
While it varies on a case-by-case basis, in most cases you'll want to use the sitewide code injection area vs. code blocks or page-level code injection. Then, on Squarespace 7.0 sites, you'll want to wrap your code in:
window.Squarespace.onInitialize(Y, function() {
// do stuff here
});
For Squarespace 7.1 sites on the other hand, one would usually wrap the code in:
document.addEventListener('DOMContentLoaded', function() {
// do stuff here
}, false);
Finally, you'll need to think about how you're outputting the data. You could either add HTML markup via a Code Block in the body of the target page, or add the markup to the page as part of your JavaScript.
I have included the needed script tag in the global template.html file which contains all dynamic pages for my SPA (written in Sapper/Svelte).
www.ensueco.com
<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
If I load the index page, auto ads load perfectly, but when I click a link navigating to another page/article, client-side routing will change the content in the content window, but won't recreate new autogenerated ads.
If I open a given article/subpage as initial page load, it also loads ads from auto ads perfectly, but clicking "home" in main navigation going back to the homepage, doesn't load new ads in the content window.
Q: How do I ask the adsbygoogle script to execute again on client-side routing to fill in auto ads on all pages?
I currently have a script that subscribes to route change events and forward these informations to Google Analytics:
page.subscribe(({ path, params, query }) => {
gtag("config", "GOOGLE_ANALYTICS", { page_path: path });
});
But not sure if I could do something similar in this to ask adsbygoogle to execute again? (below code has been tested and doesn't work)
page.subscribe(({ path, params, query }) => {
// (window.adsbygoogle = []).push({
// google_ad_client: "ca-pub-XXXXXXXXXXXXX",
// enable_page_level_ads: true,
// tag_partner: "site_kit"
// });
gtag("config", "GOOGLE_ANALYTICS", { page_path: path });
});
Above code at testing gives me this:
I get this error on route change then:
Uncaught
O {message: "adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: Only one 'enab…esyndication.com/pagead/js/adsbygoogle.js:58:409)"}
And if I remove the enable_page_level_ads I get this:
Uncaught
O {message: "adsbygoogle.push() error: All ins elements in the … with class=adsbygoogle already have ads in them.", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: All ins elemen…js/adsbygoogle.js:185:25)↵ at <anonymous>:1:38"}
So basically, I need to execute some method that creates new tags (based on auto ads) so I can execute this method and populate all the new ins elements. I think.
Thanks
ADDITIONAL THOUGHTS
From what I understand, the script is loaded post SSR (server-side rendering), why the content, HTML, CSS, and JS from my site already is loaded once the adsbygoogle script is executed.
From a development POW, I would expect it to be possible to empty the adsbygoogle array and re-initialize the ads by google script in order for the JS, to crawl the now dynamically loaded content and based on the new window.pushed URI (window.history.pushState()), and place new ads as it would have done anyway, should it have been loaded after this particular page's SSR.
Possible Solution with jQuery
Make a file:
If you place the script tag in a separate php/html file call it autoads.html and place you ads script tag inside it. Place this somewhere you can call it from on the server via URL.
<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Call the file:
Using jQuery .click & .load functions we can call the autoads.html via it's URL when a link with the class .myNavButton is clicked which should execute any scripts which the file contains.
As the script isn't visible we can just load it into the body tag, although any existing tag should work.
HTML
Home
Some Page
Another Page
jQuery
$(document).ready(function(){
$(".myNavButton").click(function(){
$("body").load("autoads.html");
});
});
Alternative:
As executing the script multiple times could cause conflict issues an alternative might be target the jQuery to reload any iframes on the page.
Maybe using something like this inside the click function?
$('iframe').attr('src', $('iframe').attr('src'));
Sources:
https://www.w3schools.com/jquery/ajax_load.asp
https://api.jquery.com/load/
https://css-tricks.com/snippets/jquery/force-iframe-to-reload/
I tried to access the javascript basic objects in my AEM 6.0 JS file. But i am getting exception like :
org.apache.sling.api.SlingException: Cannot get DefaultSlingScript: ReferenceError: "window" is not defined.
the js file i am using is
use(function () {
var rets = {};
var href= window.location.href;
rets.href= href;
return rets;
});
I am able to access other javascript functions.
JavaScript Use-API scripts are executed server-side, not client-side, so you can't access the browser DOM or window object.
I downloaded the ember starter kit and want to show a simple REST API data to see how Ember works.
From videos and tutorials I found that there is a model hook that can be used to inject data.
So I did the following:
App.Router = Ember.Router.extend({
model: function ({
return $.getJSON("https://api.foursquare.com/v2/users/self?oauth_token=TOKENHERE&v=20130723");
}),
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/'
})
})
})
And added the following in my index.html
<script type="text/x-handlebars" data-template-name="application">
{{title}}
</script>
However, this didn't work. When I go to index.html I don't see anything there. Additionally, under Network tab of Inspect Element, I don't see any network requests being made to the REST API.
What am I doing wrong? Also, for sample purpose I would simply like to have a data.json json file that will contain some json data. However, I read that Ember lacks support to read a file, thats why I'm trying a sample rest api provided by foursquare.
Is there a way to read a json file using ember? I'm running this simply on my browser without a server.
That looks like it should work. Here is an example using a different API but using the same structure:
JavaScript:
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return $.getJSON("https://api.github.com/repos/emberjs/ember.js/stats/contributors");
}
});
Templates:
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
Ember.js repository contributors
<ul>
{{#each user in controller}}
<li>{{user.author.login}}</li>
{{/each}}
</ul>
</script>
JSBin example