Loading JSON from local file?

[spiritfly]

Is it possible to load json from a local file and not from a remote server?

I simply copied the file ParisHilton.JSON which loads from the twitter demo's url into a local file and set the url function as such:

url: function (offset)
{
return "ParisHilton.json";
},

But nothing gets loaded from that file. But if I put back the direct link to the twitter JSON feed like in the example content is loaded just fine.

So is it possible for this plugin to work with a local file? I want to create a JSON file and load it locally as I have mentioned before. How would I go to achieve this?

Thanks

[SamJoan]

Hi spiritfly!

Where are you holding the file?

I think that if you put it in the same directory as the html file, it should be fine:

e.g.

if the html is in
C:\html_test\index.html
the json should be in
C:\html_test\hilton.json

if the hilton file were in

C:\hilton.json

that wouldn't work!

Let us know how it goes.

[spiritfly]

Hey droope, thanks for your fast response,

The files are in the very same folder as you suggested. I have tried it with both your API's twitter and flickr. None of them works when the file is on local. I simply saved the file from the flickr url in the demo as photos_public.gne into the same folder as the index.html. No go. It seems like the function template doesn't fire up at all.

The same was with the twitter api. I'm guessing the script cannot work with local files?

[SamJoan]

Hi man!

No worries, glad to help.

Not sure whether it's a limitation with auto-browse or a cross-origin safety issue. Might help a lot if you paste the output of the JS console here!

Cheers,
Pedro

[spiritfly]

This is the error which comes up at the console, but the same error is displayed when I use your demo with the original link when in fact the script is working.

Uncaught TypeError: Cannot call method 'error' of undefined jquery.esn.autobrowse.js:185
jQuery.fn.autobrowse.each.scrollCallback jquery.esn.autobrowse.js:185
jQuery.fn.autobrowse.each._startPlugin jquery.esn.autobrowse.js:197
jQuery.fn.autobrowse jquery.esn.autobrowse.js:224
c.extend.each jquery-1.4.2.min.js:30
c.fn.c.each jquery-1.4.2.min.js:24
jQuery.fn.autobrowse jquery.esn.autobrowse.js:96
(anonymous function) /archerytalk_autobrowse/:120

[spiritfly]

Actually this is the error I get when I set the url to load from the local file:

Uncaught TypeError: Object # has no method 'error' jquery.esn.autobrowse.js:185
jQuery.fn.autobrowse.each.scrollCallback jquery.esn.autobrowse.js:185
jQuery.fn.autobrowse.each._startPlugin jquery.esn.autobrowse.js:197
jQuery.fn.autobrowse jquery.esn.autobrowse.js:235
c.extend.each jquery-1.4.2.min.js:30
c.fn.c.each jquery-1.4.2.min.js:24
jQuery.fn.autobrowse jquery.esn.autobrowse.js:96
(anonymous function) /archerytalk_autobrowse/:120

[SamJoan]

Oh my, I gather it's a bug with the code I added. :(

jQuery.getJSON(options.url(currentOffset), ajaxCallback).error(options.onError);

Unless, look at this quote from the jquery docs:

As of jQuery 1.5, the success callback function receives a "jqXHR" object (in jQuery 1.4, it received the XMLHttpRequest object). However, since JSONP and cross-domain GET requests do not use XHR, in those cases the jqXHR and textStatus parameters passed to the success callback are undefined.

Are you using jquery 1.5 or above? Just out of curiosity really, most likely will be something completely unrelated.

[SamJoan]

This brings to my mind that we should use a diff branch for deving @msjolund :$

[spiritfly]

Not sure what it is, but I'm using jquery-1.4.2.min.js. Downloaded from the link at the demo website, so it's essentially the same.

[SamJoan]

Hi there!

My theory is that I fucked up quite a bit: 1.4 was released not too long ago, and it would make complete sense for us to support that version. What I overlooked is that the getJson method didn't return the jqXHR object on which I depended on to add the erroring functionality.

I've added a development branch, which is what I will use now to add all not-completely tested in different environments, which contains a commit that fixes the issue:

https://raw.github.com/msjolund/jquery-esn-autobrowse/development/jquery.esn.autobrowse.js

You can look at the changes I did here:

d999661

Let me know how that goes! It's a temporary fix so as to solve the fact that it completely broke everything else, later I'll add support to onError to jQuery 1.4.x, shouldn't take too long.

Let me know if it works! If it does, I'll put that into the master branch so everyone else can make use of it. :)

[spiritfly]

Just tried it with the local file again, and it's a no go. But it does work with the remote file as in the demo, only this time no error comes up in both cases.

I can't understand why is it different when loading a local JSON file or a remote one. How could it work one way, and not the other?

Are you sure it's related to that bug you just fixed?

[SamJoan]

Hi spiritfly,

From what I gathered from the error above, I was pretty sure. Now, not so much. :(

I have done some tests locally and there's no impediment for doing something like

$.getJSON("public_timeline.json", function (data) {console.log(data)})

Though I couldn't get around with doing the final test.

Are you still getting the same error?

Cheers!
Pedro

[spiritfly]

No, I'm not getting any error now, but the script still doesn't work when I set the url to load the feed from a local file as such:

url: function (offset)
{
return "ParisHilton.json";
},

But if I use a remote link directly from the twitter JSON, the results appear with no problems.

The question is why wouldn't it work with a local file, and works with a remote?

[SamJoan]

Heh, I am trying to debug the issue, but I can't even get my own code to run. :$

<html>
    <head>
        <script src="jquery.js"></script>
        <script src="jquery.esn.autobrowse.js"></script>
        <script>
            $("#elem").autobrowse(
            {
                url: function (offset)
                {
                    return "http://api.twitter.com/1/statuses/public_timeline.json";
                },
                template: function (response)
                {
                    return response;
                },
                itemsReturned: function (response) { return 300; },
                offset: 0,
                loader: '<div class="loader"></div>',
            }
            );
        </script>
    </head>
    <body style="height: 1000px;">
        <div id="elem" style="height:800px;">adada</div>
        asdasdad    
    </body>
</html>

Doesn't spit any errors, but it doesn't work. I could blame it on a cold I think I might be getting, but I don't know if it'd be cool.

[spiritfly]

Yup, I can confirm that it doesn't work with your code. But it did work before you made that change, although it showed the error in question.

Well here's the Call Stack where Chrome pauses the function this time:

c.extend.ajax (jquery-1.4.2.min.js:130)
c.extend.get (jquery-1.4.2.min.js:122)
c.extend.getJSON (jquery-1.4.2.min.js:122)
jQuery.fn.autobrowse.each.scrollCallback (jquery.esn.autobrowse.js:193)
jQuery.fn.autobrowse.each._startPlugin (jquery.esn.autobrowse.js:206)
jQuery.fn.autobrowse (jquery.esn.autobrowse.js:233)
c.extend.each (jquery-1.4.2.min.js:30)
c.fn.c.each (jquery-1.4.2.min.js:24)
jQuery.fn.autobrowse (jquery.esn.autobrowse.js:96)
(anonymous function) (/archerytalk_autobrowse/:120)

Well as odd it may sound, but I think blaming on the cold would not be cool. Just getting the cold itself isn't cool at all. :)

[SamJoan]

Huh weird, it doesn't work for me even wit the old version of the lib. Just doesn't do anything.

I have it running on a quite simple project of mine, works perfectly there.

[SamJoan]

@spiritfly Hi there! How's development going?

Any news?

[SamJoan]

I ran current master with the latest master autobrowse and it went fine, and I ran the latest development and it went fine as well.

I have good news for me, and it's that I didn't break the master branch, which is always good.

[spiritfly]

I still cannot solve the problem with a local json file. Can't see what could be the issue there. It works perfectly fine when I set the URL to be the link from the given example in the demo working with the flicker json. THEN I save the very same json file and load it locally in the script. Nothing happens. No items are loaded.

How could this be? I really cannot understand.

I tried logging and concluded that it stops here: template: function (response) . This doesn't fire up at all. So it has something to do with the template, but what??

[spiritfly]

Actually it's because of the callback function.

[SamJoan]

Managed to nail the issue? where is it?

[spiritfly]

Actually the plugin works VERY well. I will upload it once I'm completely finished. It was all due to one my lame mistake. blushed

Added offset limit in my json.php and all works well now, except that it won't stop. Not sure how to set the max option though. If the last page of php items is 1,2,3 it loads them several times. Not sure why..

[SamJoan]

Uh. Can't remember very well, but I think I added to the latest version an option called stopFunction. Perhaps you could make use of that?

Can't remember why I added it though.

[SamJoan]

Ahh I remember it now. The feed had too little elements, so it would reach the end and create an infinite loop. Don't know if that's what's happening with you!

[spiritfly]

Yes it's something like that. When the feed has too little elements(tested with one or two at the moment), it gets repeated 2 more times. Tried using the stopFunction, same thing. This time is really strange.

[spiritfly]

I believe that the function (response) gets called three times when set in itemsReturned. Did console.log, I believe this could be the reason. 🐹

btw ItemsReturned is set like in the demo:

itemsReturned: function (response) { return response.news.length; },

did a console.log() in there like this:

itemsReturned: function (response) {console.log("foo"); return response.news.length; },

and it seems like the function (response) fires up three times everytime. Thinking might have something to do with the original problem. But, then again why does it only happen when response.news.length returns 1 or 2?

[spiritfly]

Let's say I have four pages of JSON elements. 10 items in the first three pages and 2 items in the last page.

That is 32 items in total. I set max to 32, works as expected. Stops after the fourth call.

Now the question is, how do I make max dynamic? What variable should I set max with, or how will I calculate that variable?

[SamJoan]

What I did was

[...]
stopfunction: function (response) {
if(response.length < 10) { 
return false;
} else {
return true;
}
[...]

in the options passed to autoscroll (that is if I recall correctly, I'm not quite sure)

[spiritfly]

Didn't work. Tried a few different logics with stopfunctions with no avail.

Guess I solved it with:

+Math.ceil(offset/10)

instead of

+Math.round(offset/10)

The reason why the last page got repeated a a few times was because if the number of items was smaller than 5 the Math.round(offset/10) got the same value as the previous page. So for example:

there are 32 items listed on pages by 10.

offset = 30, Math.round(offset/10) = 3
page 3 renders,

offset = 31, Math.round(offset/10) = 3
again page 3 renders

offset = 32, Math.round(offset/10) = 3
page 3 is requested for the third time.

With Math.ceil offset gets rounded at the highest ten, which is 4 instead of 3.
Therefore page 4 tries to load which is null and the function stops.

Mistery solved! 👯

[SamJoan]

Awesome, good to see it solved! 👍

[spiritfly]

Yup, me too! Can't believe I spent so much time on something so simple..

Thanks a lot for all your support droope, it meant a lot! ✋

[SamJoan]

No worries, just slacking off at work. ;)

2012/11/20 spiritfly [email protected]

Yup, me too! Can't believe I spent so much time on something so simple..

Thanks a lot for all your support droope, it meant a lot! [image: ✋]

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-10541547.

http://is.gd/droope http://is.gd/signature_