You are here

Ajax and the eBird web form

This post is only tangentially related to birding but ultimately this web tool I am working on will be a widget to draw data specific to a birding location at Western Maryland Birding from the eBird database. This tool will allow users to generate a table of birds seen at the location by specifying how many days back and how many miles away from that location they want to search (with some limits set so as not to tax the e-bird database).

To create this tool I had to perform an asynchronous XMLHttpRequest from the eBird database. Since my domain is not part of eBird that meant that I needed to make this request work across domains (referred to as a cross-site request. This was a little tricky because there are security safegaurds in place to prevent client-side code from two different domains from interacting together. The solution I found was to create a proxy script in PHP. I found that solution here. The proxy uses Curl to get the data and make it available to my script.

I got this working in Firefox relatively easily and I learned a bit of jQuery in the process (I started doing it with javascript and found that I was writing way too much bad code). For some reason it still wasn't working in Internet Explorer. I googled and googled, read several forum posts from folks with similar issues but was getting nowhere.

Finally I asked a colleague more experienced than myself with these matters to have a look. It appeared that IE wouldn't do anything when the button was clicked. The first useful thing we discovered was when he realized that I was using a form to submit this information and my jQuery and javascript was running with the onSubmit in the form. We could get small bits of jQuery to run but they would then disappear. IE was submitting the form but Firefox was not. The form had attributes of onSubmit='myscript.js' and action='#'.

So I learned that Firefox and Internet Explorer behave differently (who would have guessed) when a form is submitted. I changed my button from a submit control to a plain old button and fired my script from the button's onClick event instead of onSubmit and I was a happy camper.