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.
Related
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/
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
I'm trying to follow Prabir's blog post about Facebook authentication and adapt it in an Xamarin Android-based application. I have a login page that has the following code defined to generate the URL;
private Uri GenerateLoginUrl(string appId, string extendedPermissions)
{
var parameters = new Dictionary<String, Object> ();
parameters.Add("client_id", appId);
parameters.Add ("redirect_uri", "https://www.facebook.com/connect/login_success.html");
parameters.Add("response_type", "token");
parameters.Add("display", "popup");
if (!string.IsNullOrWhiteSpace(extendedPermissions))
parameters.Add("scope", extendedPermissions);
var fb = new FacebookClient();
return fb.GetLoginUrl(parameters);
}
On create of the view, I call this method and assign it to a WebView element:
var browser = this.FindViewById<WebView>(Resource.Id.LoginView);
Uri url = GenerateLoginUrl("<app id>", "");
browser.LoadUrl (url.ToString ());
In the view, I have the following defined:
<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/LoginView" />
When LoadUrl is called, it prompts to open a browser externally (open in Chrome|Firefox|Opera options), not login through the WebView control defined in my view tied to the LoginActivity. I don't know what is going on here, and why this is happening. How can I display the request within the webview control, within the application itself and not externally?
So it sounds like the system URL handling is getting in your way. What you need to do is set a WebViewClient on your WebView. This will allow you to return true from shouldOverrideUrlLoading (which I believe is the default) which will then allow the requested resource to be loaded by your application.
See the relevant documentation here in WebViewClient, shouldOverrideUrlLoading specifically. But the takeaway is
If WebViewClient is not provided, by default WebView will ask Activity Manager to choose the proper handler for the url.
Which in the case of an http-based URI, will most certainly be the system browser.
Our company wants to include a LinkedIn Share Button in the news section of our website. It is relatively simple and consists of a carousel that open up the news items individually in Colorbox windows. We want the LinkedIn button to be within the Colorbox windows so that we can share the details of each news item.
So, I have successfully got the hashchange event to work when Colorbox is activated in order to show the correct url for each news item and the LinkedIn button does return the correct url when the news item is shared, however Colorbox doesn't open, it simply links to the index page of our site. My question is how do I fire up Colorbox from this shared link?
I have researched a lot of similar questions but cannot seem to get it working. Any help would be much appreciated. Thank you.
Below is my js and also a jsfiddle: http://jsfiddle.net/stegern/WvfsA/11/
$(document).ready(function()
{
//Carousel for news items
$('#news-carousel').show();
$('#news-carousel').jcarousel({
vertical:true,
scroll:true,
wrap:'circular'
}
);
$('.popup').colorbox({
title: function()
{
var url = $(this).attr('href');
return '#' + url;
},
onOpen:function()
{
window.location.hash = $(this).attr('href');
},
onClosed:function()
{
window.location.hash = "";
},
opacity: 0.7,
transition: 'fade'
}
);
//Attempt to open ColorBox when url is shared
$(function(){
var hash = window.location.hash;
if ('onhashchange' in window)
{
window.onhashchange = hashChanged;
}
else
{
setInterval(function(){
if (window.location.hash != hash)
{
hash = window.location.hash;
hashChanged();
}
}, 500);
}
var hashChanged = function(){
$.colorbox();
}
}
);
});
UPDATE
I have done some more research and discovered that I need to load my content in an iframe rather than using Ajax. I then need to add a querystring to my news item links and parse the parameters from the querystring in order to pass them to ColorBox.
However I am now getting a semantic issue with my js (line 8 Expected ')' token) which I don't know how to resolve. Can someone please explain.
Here is my html markup:
<ul>
<li>News Item One
</li>
<li>News Item Two
</li>
<li>News Item Three
</li>
And here is my js:
function getParameters() {
var
settingsObject = {},
hash,
hashes = location.search.substring(1).split(/&/),
i;
for (i = 0; i & lt; hashes.length; i++) {
hash = hashes[i].split('=');
settingsObject[hash[0]] = hash[1];
}
return settingsObject;
}
$('a.cb').colorbox($.extend({
iframe: true,
width: '800',
height: '600'
}, getParameters()));
I also have a jsfiddle setup at: http://jsfiddle.net/stegern/NtSvg/7/
Try putting some example code in a fiddle at http://jsfiddle.net/ then share here.
You posted your js, but we don't have the markup you're trying to use it on, so post the minimum necessary html code to make your example work in a fiddle.
It will help others visualize your problem much easier and quite possibly get you a solution a lot faster.
Ajax isn't loading because browsers typically disallow cross-origin file access for security reasons.Since the main code is hosted on jsfiddle, it forbids you to load pages from your site via ajax.
A quick workaround, if you're using Chrome, you can start it in a less secure mode, like indicated here: https://superuser.com/questions/593726/is-it-possible-to-run-chrome-with-and-without-web-security-at-the-same-time
I just tested now by opening a command prompt in the folder where chrome.exe is located and ran chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
Then I opened http://jsfiddle.net/WvfsA/12/ , where I stripped down your js to the minimum. You'll see your content is now loaded via ajax by colorbox, however, you're doing something wrong with those paths, because the images can't be found.
I took a look at http://jsfiddle.net/WvfsA/13/ and I'm not sure exactly why you have 2 nested $(function () {}), I saw that in Framework & Extensions, ondomready is already selected, so you don't really need to wrap your main function(s) in anything.
Here's a quick screenshot as proof that it works:
http://i.imgur.com/jAiUW28.png?1
When you were developing, were you running your example through a server? You need to have a local server in order for anything ajax-related to work.
Install XAMPP http://www.apachefriends.org/en/xampp.html if you haven't already?
Edit: or you could develop on Chrome launched with that flag I mentioned, to bypass the need of a local webserver, but it's not a really good idea.