I've implemented a simple example of the Twitter #anywhere api to display user hovercards. The example works great in Internet Explorer and Chrome. However, whenever I the page loads in Firefox I receive the following message in an alert window:
To set up #anywhere, please provide a
client ID
Surely if the results are correct in Chrome and IE then everything must be setup correctly?
Here is a simple code block which I've tested recreates the problem in Firefox only:
<script src="http://platform.twitter.com/anywhere.js?id=WMg5kRMlIw807lRTsktnNQ&v=1" type="text/javascript" >
</script>
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter().hovercards();
});
</script>
This problem is showing up in various forums and mailing lists. I'm seeing it on Firefox 3.0.5 (but not 3.6). Looks like Twitter didn't do enough testing before springing this one on the world.
(Later: Try clearing hour cookies. Yeah, that's a very 90's thing to have to do.)
Related
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
I'm creating a progressively enhanced design with CSS3 media queries, responsive to small screen sizes first, and then larger, using media queries.
Of course, media queries don't work on IE8 and below. My attempted solution is to use modernizer and respond.js.
I have this in my head:
<script type="text/javascript">
Modernizr.load({
test: Modernizr.mq,
nope: '/js/respond.min.js'
});
</script>
In firefox, I can see no JS errors in the console. The network bar indicates that modernizr is being delivered.
In IEtester, I have an IE8 panel open. The page is behaving as if respond.js is not present. In IETester's debug bar, I go to 'links'. Respond.min.js is not listed.
What am I doing wrong?
From the Modernizr docs: http://www.modernizr.com/docs#mq -- the string argument seems to be required to use the media query testing. You could use a test such as:
Modernizr.mq('only screen')
You might want to look at this comment from Alex Sexton (creator of Modernizr.load) that recommends against asynchronous loading of Respond.js due to its highly visual impact on a website.
https://github.com/scottjehl/Respond/issues/14#issuecomment-1017652
I tried the classic ajax approach, but that throws an access denied javascript exception when trying to add a script stored on another domain.
Now, I'm sure this is possible since google populates google ads via js only; so does twitter, and the list can continue.
How I thought of it so far:
<div id="divId"></div>
<script type="text/javascript" src="http://mysite.com/script.js"></script>
The script in script.js should have changed the innerHTML attribute of the div above. Instead, I get the following message in fireBug: Access to restricted URI denied code: 1012
I googled around a bit but only found workarounds that are useless, like php proxies and such, whereas I want this widget to be copy-pasted into other peoples sites, blogs, forums, etc..
Thanks in advance for any helpful replies. :)
The behavior that you are seeing is intended and there for security reasons. You wouldn't want a third party script to make any changes to your page as that can be exploited heavily.
Instead, give your users a JavaScript snippet to embed on their page.
<script>
// do stuff here
</script>
Note that inside this snippet you can create a script tag dynamically, set the src attribute and load the actual JavaScript. This snippet that your users embed on their page has access to the entire DOM, but the script loaded externally does not.
Here's an example of the profile widget that Twitter gives out to embed on web pages:
<!-- external js, can't access or change the DOM -->
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<!-- local js, does that -->
<script>
new TWTR.Widget({
version: 2,
..
..
}).render().setUser('hulu').start();
</script>
The first script tag loads the library, while the second one which actually manipulates the page is added as code directly.
I finally found a solution that doesn't involve ajax.
I simply use
<div id="objectId"></div>
<script type="text/javascript" src="http://mysite.com/getAndDisplayData.php"></script>
<script type="text/javascript">getAndDisplayData();</script>
And in getAndDisplayData.php I generate a JS script that will create my widget inside the div above. The php file also connects to the database and retrieves all required widget data.
Apparently this is how google ads works, though I am not sure. It is certain though that they don't use ajax.
I am developing web-application using Google Maps API and ASP.NET Ajax. Here is my JavaScript-code for PageLoad:
map.openInfoWindowHtml(map.getCenter(),'Hello, <b>world</b>!');
First run is successful. But after execution some ASP.NET Ajax-function we have strange effect: In Internet Explorer, Mozilla Firefox and Opera everything is good, but in Google Chrome and Safari text with html-tags is invisible. In other words in Google Chrome we have text: “Hello, !”
I want to make the application that would normally in Google Chrome and Safari too. How can I do it?
Update:
String "Hello, <b>world</b>, <strong>world</strong>, <span style='font-weight: bold;'>World</span>, <a href='http://ya.ru'>Link</a>." transform to "Hello, , , , . " (I examined the DOM). Words really are disappearing.
I observed this strange effect on any Ajax-function with request to server.
Update2:
Many thanks to Koobz for many leading questions. They helped me a more detailed understanding of the problem.
First of all, full description of actions:
Load the page. GMap have several markers with dblclick-event in JavaScript. Dblclick event exec marker.openInfoWindowHtml(/My text/). /My text/ is located in JavaScript of my Page.
I double-click on the marker. I see a infoWindow with a normal formatting
Exec __doPostBack (starndard ASP.NET PostBack)
In server side JavaScript is updated with same
Server return some information with /My text/ to my page
I doouble-click on the marker. I see a infoWindow with a wrong formatting.
An interesting fact, which puts me in embarrassing:
I try set to “Hello, <b>world</b>, <b>test</b>”
Before Ajax function in all browser I have: “Hello, world, <b>test</b>”
After Ajax function in Google Chrome and Safari: "Hello, ,test"
After Ajax function in Mozilla, Opera and IE: “Hello, world, <b>test</b>”
What Chrome and Safari have features that may cause such behavior? Now I can write separately necessary infoWindow-text for each browser. But I would like to find a normal way to solve my problem.
Hit ctrl+shift+j to open up your chrome developer tools.
Set a breakpoint right before the function call that breaks everything.
Attempt to reproduce the bug.
After the break point hits, step through your code until the text disappears.
Set a breakpoint after the text first disappeared.
Repeat this process. Refine your breakpoints until you've narrowed down where the bug is occurring.
It could be any number of things. I have no idea what kind of Ajax things you're doing. Are you dynamically updating content on your page after doing the request? It's possible that this update code is modifying dom elements that it shouldn't be. Tracing through using the methodology above will help nail it if this is the case.
If you're using jQuery, maybe one of your selectors is out of whack and it's eating up content. Chrome is very good and I'm hesitant to believe it's a javascript bug or anything like that.
Validate your HTML. If you're traversing the dom, invalid markup might result in chrome "seeing" a different picture than other browsers. Just look for broken tags and ignore all the other things a validator complains about.
Wild guess: but the way it's stripping out HTML might point to some kind of XSS protection. Is the Ajax script that's returning the new HTML code on another domain than the one the visitor is viewing?
Some info here:
http://groups.google.com/group/chromium-dev/browse_thread/thread/d2931d7b670a1722/d56bdfccfcef677f
Do you see the problem with any html tags in the info window? As an experiment, try:
<span style="font-weight: bold;">World</span>.
I am wondering if there is a unclosed bold tag somewhere in the DOM?
I am messing around with this problem, but I haven't been able to reproduce it. Having a look at what the Ajax function does would be helpful.
Try this:
map.openInfoWindowHtml(map.getCenter(),'Hello, <strong>world</strong>!');
the strong tag is more standards compliant, worth a shot
As others have said, you need to post your code.
I normally do my web dev using Firefox - I periodically test for cross browser compatability of my pages by using FF and IE.
I have just found that one of my AJAX pages stopped working in IE - although it works fine in FF. With FF, I always use FireBug to debug my Ajax interactions. I am looking for a similar tool to use with IE - to see what it is causing it to fail, even though it is a straightforward AJAX process on the page.
I downloaded Firebug Lite and that was very helpful, as it brought a familiar dev environment into IE. Unfortunately, I have not been able to debug my AJAX interactions following the ForebugLite's documentation:
firebug.watchXHR: Use this function to watch the status of XmlHttpRequest objects.
var req = new XmlHttpRequest;
firebug.watchXHR(req);
I inserted that in my page - so the top of my page looks like this:
<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'>
var req = new XmlHttpRequest;
firebug.watchXHR(req);
</script>
However, I still could not debug the AJAX interactions (i.e. nothing shows in the console window when I click on a link that triggers an AJAX call).
Has anyone managed to do this before (IE7 and Firebug Lite)?
Or, you could install Fiddler and watch all of your web traffic.
Try DebugBar - I think it will capture this.
To use Firebug lite, you have to attach Firebug to each XHR request. So you'll wanna call firebug.watchXHR(req); for each ajax request you make, before you fire the request.
If you are using a library such as Jquery or Prototypejs to make your Ajax requests, you can wire Firebug lite into the process for easy debugging.
charles is another option for studying your network traffic but debugBar would probably be my choice.