[annotator-dev] How to use AnnotateIt.org with Store plugin

Tue Mar 13 15:48:13 UTC 2012

After a great deal of swearing on my part, I've finally worked out
that Chrome has recently become a lot pickier about CORS requests.

In particular, it'll "Cancel" the request, with no particular warning
or error message, if the response doesn't have the Content-Length
header set. Or, more commonly, it does have Content-Length set but the
CORS headers aren't configured to expose that header.

Hopefully this issue should now be fixed.

Best wishes, and apologies for all the hassle, with a raised eyebrow
towards the Chrome team.

-N

On Sun, Mar 11, 2012 at 17:58, Kunal Kadakia <kadakiakunal at gmail.com> wrote:
> Nick,
> I am sorry I forgot to mention the version # of Google Chrome. It is
> 17.0.963.79 and it is up to date.
>
> - Kunal
>
> On Sun, Mar 11, 2012 at 6:55 AM, Nick Stenning <nick at whiteink.com> wrote:
>> Kunal,
>>
>> It's going be really hard to help you unless you help me out here.
>>
>>> What browser (and what version of that browser) are you using?
>>
>> Best wishes,
>> Nick
>>
>> On Sun, Mar 11, 2012 at 07:01, Kunal Kadakia <kadakiakunal at gmail.com> wrote:
>>> I keep on getting this error in Google Chrome:
>>>
>>> XMLHttpRequest cannot load http://annotateit.org/api/token. Origin
>>> http:/localhost is not allowed by Access-Control-Allow-Origin.
>>>
>>> I read issues seen in Google Chrome when doing CORS via localhost. So,
>>> I even tried hosting the files on a different server and access them
>>> as: http://websitename/index.html. But, I still receive the same
>>> error.
>>>
>>> - Kunal
>>>
>>> On Wed, Mar 7, 2012 at 5:57 AM, Nick Stenning <nick at whiteink.com> wrote:
>>>>
>>>> Hi Kunal,
>>>>
>>>> You were not expecting such complications, and such complications are
>>>> not intended. That said, I just copied and pasted your example code,
>>>> and it works, unchanged.
>>>>
>>>> I can only assume that you are using an older browser that doesn't
>>>> correctly send auth credentials to AnnotateIt as it is requested to
>>>> do. What browser (and what version of that browser) are you using?
>>>>
>>>> Best,
>>>> Nick
>>>>
>>>> On Wed, Mar 7, 2012 at 05:46, Kunal Kadakia <kadakiakunal at gmail.com> wrote:
>>>> > Hi Nick,
>>>> > I logged into my www.annotateit.org. I also clicked on "AnnotateIt"
>>>> > button on My Account page. I see a message at the top saying
>>>> > "Annotator is ready!".
>>>> >
>>>> > When I open my simple HTML page which is hosted on XAMPP, I still
>>>> > receive the following errors:
>>>> >
>>>> > GET http://annotateit.org/api/token 401 (UNAUTHORIZED)
>>>> > annotator-full.min.js:1Couldn't get auth token: UNAUTHORIZED
>>>> >
>>>> > I was not expected to receive such complications to start off with a
>>>> > simple example with annotations being stored at annotateit.org.
>>>> >
>>>> > Here my my code snippet:
>>>> >
>>>> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
>>>> > TRANSITIONAL//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
>>>> > TRANSITIONAL//EN">
>>>> > <html>
>>>> > <head>
>>>> > <title>Test Annotator 1.1.0</title>
>>>> > <script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
>>>> > <script type="text/javascript"
>>>> > src="annotator-full-v1.1.0/annotator-full.min.js"></script>
>>>> > <link rel="stylesheet" href="annotator-full-v1.1.0/annotator.min.css" />
>>>> > </head>
>>>> > <body>
>>>> > <div id="content">
>>>> > SAMPLE TEXT
>>>> > </div>
>>>> > <script type="text/javascript">
>>>> > jQuery(function ($) {
>>>> >        var content = $('#content').annotator().annotator('setupPlugins');
>>>> > });
>>>> > </script>
>>>> > </body>
>>>> > </html>
>>>> >
>>>> > Thanks
>>>> > Kunal
>>>> >
>>>> > On Tue, Mar 6, 2012 at 4:35 AM, Nick Stenning <nick at whiteink.com> wrote:
>>>> >> Well, you need to be logged into AnnotateIt. You should see a
>>>> >> notification telling you this, but it seems the filter bar hides it.
>>>> >>
>>>> >> Either way, the solution is simply to log into AnnotateIt.
>>>> >>
>>>> >> -N
>>>> >>
>>>> >> On Tue, Mar 6, 2012 at 04:48, Kunal Kadakia <kadakiakunal at gmail.com> wrote:
>>>> >>> Nick,
>>>> >>> I am using the following code snippet:
>>>> >>>
>>>> >>> jQuery(function ($) {
>>>> >>>        var content = $('#content').annotator().annotator('setupPlugins');
>>>> >>> });
>>>> >>>
>>>> >>> I am getting the following 2 errors in Google Chrome. I have
>>>> >>> developing it on XAMPP on Mac OS X:
>>>> >>>
>>>> >>> 1)
>>>> >>> GET http://annotateit.org/api/token 401 (UNAUTHORIZED)
>>>> >>> f.support.ajax.f.ajaxTransport.send (jquery-1.7.1.min.js:4)
>>>> >>> f.extend.ajax (jquery-1.7.1.min.js:4)
>>>> >>> b.Plugin.Auth.d.requestToken (annotator-full.min.js:1)
>>>> >>> d (annotator-full.min.js:1)
>>>> >>> c.addPlugin (annotator-full.min.js:1)
>>>> >>> b.setupPlugins (annotator-full.min.js:2)
>>>> >>> a.plugin.jQuery.fn.(anonymous function) (annotator-full.min.js:1)
>>>> >>> e.extend.each (jquery-1.7.1.min.js:2)
>>>> >>> e.fn.e.each (jquery-1.7.1.min.js:2)
>>>> >>> a.plugin.jQuery.fn.(anonymous function) (annotator-full.min.js:1)
>>>> >>> (anonymous function) (index.html:17)
>>>> >>> f.Callbacks.n (jquery-1.7.1.min.js:2)
>>>> >>> f.Callbacks.o.fireWith (jquery-1.7.1.min.js:2)
>>>> >>> e.extend.ready (jquery-1.7.1.min.js:2)
>>>> >>> c.addEventListener.B (jquery-1.7.1.min.js:2)
>>>> >>>
>>>> >>> 2)
>>>> >>> Couldn't get auth token: UNAUTHORIZED (annotator-full.min.js:1)
>>>> >>> b.Plugin.Auth.d.requestToken.a.ajax.done.fail.always.c.requestInProgress
>>>> >>> (annotator-full.min.js:1)
>>>> >>> f.Callbacks.n (jquery-1.7.1.min.js:2)
>>>> >>> f.Callbacks.o.fireWith (jquery-1.7.1.min.js:2)
>>>> >>> w (jquery-1.7.1.min.js:4)
>>>> >>> f.support.ajax.f.ajaxTransport.send.d (jquery-1.7.1.min.js:4)
>>>> >>>
>>>> >>> Should I be passing any authentication tokens?
>>>> >>>
>>>> >>> I would appreciate if atleast I could get this working.
>>>> >>>
>>>> >>> Thanks
>>>> >>> Kunal
>>>> >>>
>>>> >>>
>>>> >>> On Mon, Mar 5, 2012 at 1:33 PM, Nick Stenning <nick at whiteink.com> wrote:
>>>> >>>> That's exactly what the snippet I've given you does! Just try it. For
>>>> >>>> further details of what the setupPlugins function does, see the
>>>> >>>> following:
>>>> >>>>
>>>> >>>>  https://github.com/okfn/annotator/blob/master/src/plugin/kitchensink.coffee
>>>> >>>>
>>>> >>>> -N
>>>> >>>>
>>>> >>>> On Mon, Mar 5, 2012 at 18:30, Kunal Kadakia <kadakiakunal at gmail.com> wrote:
>>>> >>>>> Yes, Nick! But, would the default setupPlugins store annotations on
>>>> >>>>> annotateit.org. And, if so, how can I have them stored in my personal
>>>> >>>>> annotateit.org account?
>>>> >>>>>
>>>> >>>>> Thanks
>>>> >>>>> Kunal
>>>> >>>>>
>>>> >>>>> On Mon, Mar 5, 2012 at 1:27 PM, Nick Stenning <nick at whiteink.com> wrote:
>>>> >>>>>> On Mon, Mar 5, 2012 at 18:07, Kunal Kadakia <kadakiakunal at gmail.com> wrote:
>>>> >>>>>>> Hi dev-team,
>>>> >>>>>>>
>>>> >>>>>>> [...snip...]
>>>> >>>>>>>
>>>> >>>>>>> It would be good if someone could supply a working code snippet on how
>>>> >>>>>>> to store annotations in my annotateit.org account. It would highly be
>>>> >>>>>>> appreciated, as I have spent significant time in finding it.
>>>> >>>>>>
>>>> >>>>>> Hi Kunal,
>>>> >>>>>>
>>>> >>>>>> Did you see the two-liner on the front page of AnnotateIt.org =).
>>>> >>>>>>
>>>> >>>>>> (For reference, it's:
>>>> >>>>>>
>>>> >>>>>>    $('#content').annotator()
>>>> >>>>>>                 .annotator('setupPlugins');
>>>> >>>>>> )
>>>> >>>>>>
>>>> >>>>>> -N