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

Sun Mar 11 07:01:48 UTC 2012

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