Google fonts - Getting a list of available fonts through ajax? - ajax

I need to get a list of all available fonts on Google Fonts and display them in a dropdown, but i'm having trouble understanding the doc for Google Fonts.
Here's what i got so far.
When i go to this in the web browser i get a json response with all fonts, as expected:
https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key={my-key-here}
But when i ajax it, i get this in the console:
XMLHttpRequest cannot load https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key={my-key-here}. Origin {domain} is not allowed by Access-Control-Allow-Origin.
By the way, i'm using jQuery. Tried both $.ajax and $.getJSON.
After a bit of googling i realized maybe i need to use the webfont loader to retreive the list? Alright, fair enough. So i added the script to the page:
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
But then what? The API only seem to allow getting and applying specific fonts, it doesn't actually return any data, does it?
Can anyone point me in the right direction or show me how to make the request? Parsing the returned data and handling it afterwards is no big deal, but i just can't figure out how to actually get the data.

Ok, I've had the same problem, opening the URL itself in a new window works fine, but it doesn't work as ajax request.
Your ajax/json request is correct:
https://www.googleapis.com/webfonts/v1/webfonts?key={my-key-here}
And you don't need to add this line:
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
Seems like you get nothing because of google servers, not your code. If you newly created an API key or you recently activated your webfont service, give it few minutes, you will be able to use your webfont service soon
Just to confirm it for you, try the below JSON request, it works perfectly:
$(document).ready(function() {
$.getJSON('https://www.googleapis.com/webfonts/v1/webfonts?key=MY_API_KEY', function(response) {
//alert('json object fetched successfully!');
});
});

To retrieve the dynamic list of web fonts offered by the Google Web Fonts service, send the following request:
https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY
Source: Google Web Fonts API - Developer API

Related

Delphi: Log the GET request URLs used in Websites that are updating content via AJAX (TWebbrowser)

Using a TWebBrowser in Delphi, I'm showing a website that uses JSON to update its content. To get the source code of the newly updated content and load it into a Memo, I believe I have to get the URLs of the GET requests. Unfortunately, these are always different and generated with an encrypted Javascript. Is there any way to list the URLs the GET requests go to in a similar way like FireBug does in its console view?
Thanks a bunch!!!

Embed iframe cross domain

I need to have an iframe script which I can give to my different clients, so that they can embed it in their sites. Just like Youtube or facebook does.
But it does not get rendered due to cross domain restrictions.
I have gone through every documentation for x - frame options , crossDomain ajax call.
The problem with crossDomain ajax call is that I have only JSONP to work with.
I have tried this - just go to any youtube video and get its Embed code. Its a plain iframe script e.g. <iframe width="420" height="315" src="http://www.youtube.com/embed/7N5OhNplEd4" frameborder="0" allowfullscreen></iframe>
If you inject the above script in your html, it will get rendered , but as soon as you edit the src of the iframe to youtube.com itself , it will go blank.
Facebook's iframe too gets rendered everywhere smoothly.
I am hell tortured by this thing.
Please guide me on this. Thanks in advance!
IF you look at the response headers from youtube.com it is returning "X-Frame-Options:SAMEORIGIN" so they are adding the header on the server to stop people from displaying youtube (website pages) via a iframe.

Using AJAX to send an email

I am attempting to make an AJAX contact form with Webscript (http://webscript.io), but I am running into a problem. Without AJAX, the form worked well and the email was delivered. After trying to add AJAX functionality, I stopped receiving emails through the form, yet the AJAX appears to run successfully. Here is a JS Bin with my example code: http://jsbin.com/aqahok/1/edit. I have a feeling the problem doesn't lie in the Webscript (which I believe you cannot view) but in the JS since the form worked without AJAX.
Thank you for taking a look at my problem and feel free to ask me any questions you may have.
Your JavaScript is looking for input[name="message"], but it should be looking for textarea[name="message"]. I changed that and tried to send an email. It appears to have worked (no error), so hopefully that's it.
The JS Bin you created makes webscript.io return 500 Internal Server Error (you can see it in Firebug or Chrome Dev Tools). AJAX part just does not check response and show the "Contact Form Submitted!". So problem is on their side.

Load content via ajax in plone page

I'm working on a website which has been developed in plone. Now I'm facing an issue, I would like to load certain content from a template via an ajax call on normal Plone page(on some event trigger).
Do I need to create any python script??If yes where has it to be placed? and moreover how do I integrate it with TAL(I guess that would be needed) but I'm not sure how.
Could anyone guide me on this with necessary pointers/docs that I should look into?It would of great help to come over my issue and get things rolling.
Thanks,
Avinash
In the "Plone Developer Documentation" there's a section for Javascripting in Plone that perfectly fits your needs
Your question is a bit vague:
From your question, it seems that you just want your ajax call to return html to populate data on the page somewhere then?
Also, it sounds like you want to do the development TTW in the ZMI? Most developers would would use an add-on product and return your ajax response.
However, you can do it TTW with page templates just fine.
Create the new page template
populate it with the template code that gives you the desired output when called within the context of content on a site. For example, http://mysite.com/plone/page/my-template
in your javascript, use a url that in the ajax call: $.ajax({url: 'http://mysite.com/plone/page/my-template', success: function(data){ $('#content').append(data);}})
It's not really anything special to do ajax within plone--just use the tools available and piece it together.

Loading Ajax Response Data with Adsense Codes inside

I'm 10000000% sure that this question has been asked before, however, the majority of the responses that I came across were from back in 2005, 2006 and so on. Not to mention, almost all of the questions themselves were too general. Therefore, I'm asking this so that for anyone else needs to find this out, then they won't need to dig through about 50 webpages to get an idea.
My question is simply that I have a webpage that has Google Ads embedded into the HTML of the website. The website was first developed as a static HTML site where each link reloaded a new page. Nevermind the backend technology of the website - the website itself produces purely dynamic content. The website is close to completion and now a fully-ajax listener has been added to all the links. When any of the links are clicked, JavaScript takes over, parses the link and sets that using popstate or the hashbang. The page itself is then queried to the server via AJAX and the content is updated using document.getElementByID('container').innerHTML=ajax.responseText; This way, there is almost a 100% method of accessing content that was replaced by AJAX.
This all works fine, but the responseText itself may, WILL contain Google Ads, and I was just wondering how to display them as if it were a static page. Clearly this doesn't work. Here are the options that I've come across:
Use an IFrame:
An IFrame seems to be an effective way to load the content; just stick the adsense codes a simple adsense.html iframe file and let the browser and
directly into page, it isn't possible
it's against their TOS
there is document.write() omitted in ajax request
Your chance is:
Create simple iframe
<iframe src="advert.html"></iframe>
and in advert.html, add your advert code
It's then loaded fine without problems.
Good luck

Resources