11 Replies Latest reply: Nov 3, 2010 4:17 AM by Phil_W RSS

    Spry JSONDataset and IE8 cross domain policy

    Phil_W Community Member

      Hi,

       

      I'm using Spry JSON Dataset to retreive feeds of JSON data from Google Picasa and then show the results on our photo page. Works fine in Firefox but not in IE8. Is this a cross domain issue or is something else happening to stop the page rendering the spry regions in IE8? I know IE8 can be quite fussy at times.

       

      Debug tools in IE8 not the best (give me firebug any time)

       

      Page is here www.thehmc.co.uk/photonew.html

       

      Phil

        • 1. Re: Spry JSONDataset and IE8 cross domain policy
          Ben Pleysier CommunityMVP

          Hi Phil,

           

          This is the error message I get for IE

          Capture.JPG

          I can't see anything wrong with that line of code, Lately I have been solving IE problems because of a faulty SpryData.js. It may be an idea to try

          <script src="http://labs.adobe.com/technologies/spry/includes/SpryData.js" type="text/javascript"></script>

          to replace the one you are using.

           

          Sorry not being of any more assistance.

           

          Ben

          • 2. Re: Spry JSONDataset and IE8 cross domain policy
            Phil_W Community Member

            Hi,

             

            Found this

             

            http://msdn.microsoft.com/en-us/library/dd573303(VS.85).aspx

             

            I think it is IE8 cross domain ploicy.  Shame SpryData does not include the IE8 cross domain XDR requests in it's arsenal. Maybe someone will add it in the near future.

             

            Regards

             

            Phil

            • 3. Re: Spry JSONDataset and IE8 cross domain policy
              Arnout Kazemier Community Member

              JSONDataSet indeed uses the XHR call to fetch the data for you. It's a common issue.. But there is a fix for that. About a half year ago I released a SpryYQLDataSet that uses the Yahoo YQL service to allow crossdomains calls through JSON-P.

               

              Get the code @: http://github.com/3rd-Eden/Spry-YQL-DataSet

              Wiki: http://github.com/3rd-Eden/Spry-YQL-DataSet/wiki

              Wiki-Pages: http://github.com/3rd-Eden/Spry-YQL-DataSet/wiki/_pages

               

              Hopes this helps,

              • 4. Re: Spry JSONDataset and IE8 cross domain policy
                Arnout Kazemier Community Member

                Also the XDomain XHR call in IE8 only works for that browser version.. You still would have to deal with IE6/7, Opera 10 / 9, Safari 3, etc

                • 5. Re: Spry JSONDataset and IE8 cross domain policy
                  Phil_W Community Member

                  Thanks Arnout - I'll investigate this as a way forward.

                   

                  I have a couple of questions having had a quick glance over the Wiki

                   

                  1. Does it support the subPath option of JSON Dataset?

                  2. As it is built on top of SpryDataset. Does it support setURL and how does that work?  Do I now need to add the Yahoo query format of Select * from [original dataset feed http address]

                   

                  My page uses both of these options.

                   

                  Thanks

                   

                  Phil

                  • 6. Re: Spry JSONDataset and IE8 cross domain policy
                    Arnout Kazemier Community Member

                    1) No subPaths, but you can adjust the YQL query to do additional filtering for you.

                    2) Instead of setURL you have setQuery and getQuery. So after you have set a new query you just call .loadData() like you would normally do and it will fetch the new data.

                    3) Yes you need to do a "select bla bla".

                     

                    Also you can just parse down data using the onPostLoad observer instead of using subPaths ( I think )

                    • 7. Re: Spry JSONDataset and IE8 cross domain policy
                      Arnout Kazemier Community Member

                      OH I did just notice there are also YQL tables available for picasa. So you just do SELECT * FROM WHERE user='popmonkey' AND album_key_type='album' AND album_key='Cars'

                       

                      • 8. Re: Spry JSONDataset and IE8 cross domain policy
                        Phil_W Community Member

                        Hi

                         

                        Now I'm home I've had a little bit of time to review your YQL Dataset solution for cross domain.

                         

                        I notice that for my JSON dataset it inherits the httpsource dataset function of setDataFromDoc.

                         

                        So I could do something like this, with your YQL dataset havinbg retrieved the JSON string.

                         

                         

                        var dsTags = new Spry.Data.JSONDataSet(null,{path:"feed.entry",  subPaths:["title","gphoto$weight"],
                        sortOrderOnLoad: "ascending", sortOnLoad: "title.$t"} );
                        dsTags.setDataFromDoc(raw JSON String);

                        Is there a way to extract the raw JSON string returned so I can feed it directly to the Spry setDataFromDoc
                        function?  If not I might dig into your Javascript to amend it to do so.

                        I was thinking you could perhaps change the base function to pass it an option of crossdomain. If true then use
                        your code rather than the xmlhttprequest call and feed the result back into the normal flow?

                        Cheers

                        Phil

                         

                         


                        • 9. Re: Spry JSONDataset and IE8 cross domain policy
                          Phil_W Community Member

                          Hi,

                           

                          Now I've had time to play and got my head around what JSON-P really means - I've come up with a lightweight solution. Arnout thanks for your input as that sent me off on the right track.

                           

                          I noticed that Google can provide the JSON string wrapped in a callback function - see format below

                           

                          http://picasaweb.google.com/data/feed/api/user/thehmc.co.uk?kind=tag&alt=json-in-script&ca llback=testit&hl=en_GB

                           

                          Firstly I define my Spry JSONDataset as before but don't give it an url to load the data from

                           

                          var dsTags = new Spry.Data.JSONDataSet(null,{path:"feed.entry",  subPaths:["title","gphoto$weight"],sortOrderOnLoad: "ascending", sortOnLoad: "title.$t"} );

                           

                           

                          So introducing the function below, which dynamically adds a script to the document body pointing top the url you pass it

                           

                          function makeRequest(sUrl) {
                                 
                                  var oScript = document.createElement("script");
                                  oScript.src = sUrl;
                                  oScript.async = true
                                  var done = false;
                                  oScript.onload = oScript.onreadystatechange = function()
                                    {
                                      if ( !done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") )
                                      {
                                        done = true;
                                         oScript.onload = oScript.onreadystatechange = null;
                                         if ( oScript && oScript.parentNode )
                                       {
                                          oScript.parentNode.removeChild( oScript );
                                            }
                                }
                              };
                                  document.body.appendChild(oScript);
                                }  

                           

                          and then calling it, passing the url to the Google feed

                           

                          makeRequest("http://picasaweb.google.com/data/feed/api/user/thehmc.co.uk?kind=tag&alt=json-in-script&ca llback=testit&hl=en_GB");

                           

                          Function testit(root)
                          {
                              dsTags.setDataFromDoc(root);
                          }

                           

                          Since the JSON string is already converted to a JSON object when it arrives at the callback function I had to change the JSONDataset function as below to not to try and parse if already an object

                           

                          Spry.Data.JSONDataSet.prototype.loadDataIntoDataSet = function(rawDataDoc)
                          {
                              if (this.preparseFunc)
                                  rawDataDoc = this.preparseFunc(this, rawDataDoc);

                           

                              var jsonObj;
                              if (typeof rawDataDoc == "object")
                             {
                                  jsonObj = rawDataDoc;
                                  }
                            
                          else
                              {

                                  try    { jsonObj = this.useParser ? this.parseJSON(rawDataDoc) : eval("(" + rawDataDoc + ")"); }
                                  catch(e)
                                  {
                                      Spry.Debug.reportError("Caught exception in JSONDataSet.loadDataIntoDataSet: " + e);
                                      jsonObj = {};
                                  }
                             }

                           

                          This works a treat in IE8 and Firefox.

                           

                          I can see that your YQL version will be more flexible in terms of the number of feeds it'll be able to provide in JSON format but for now I just need this for Google Picasa.  Ideally I'd like a YQL version that retrieves the JSON string and then passes it to a user defined callback function to do with what it wants.

                           

                          I need to change my other JSON datasets but otherwise the page will be good to go soon enough.

                           

                          Cheers for your inputs

                           

                          Phil

                          • 10. Re: Spry JSONDataset and IE8 cross domain policy
                            Arnout Kazemier Community Member

                            Well the YQLDataSet is actually a fork of the SpryJSONPDataSet we are using internally.

                            So I might just release that as well in the near future. But I'm glad you solved your issue

                            • 11. Re: Spry JSONDataset and IE8 cross domain policy
                              Phil_W Community Member

                              Hi,

                               

                              SpryJSONPDataSet sounds like something I'll be using regularly for my website needs in the future then

                               

                              It's only recently I've started to look at JSON instead of XML for data excange and it looking really useful for this kind of stuff.  I'm learning something new about Javascript every day and finally starting to get my head around the code in your Spry Javascript objects!

                               

                              Cheers

                               

                              Phil