External JSON data with offline development

Question

I am developing a web app that accesses some external JSON data. I'm currently using jQuery's getJSON to get the data and call the callback.

My internet at home is terrible, so I'm regularly not connected. I am looking for a way to develop this app while disconnected from the internet.

My initial thought was to have an OFFLINE variable that I set, which changes the location of the scripts to a local file, but because jQuery's getJSON uses dynamically named functions for callbacks, it would need some server intelligence.

More info on how getJSON callbacks work here: http://docs.jquery.com/Ajax/jQuery.getJSON

I'm sure there's an easier way. Any suggestions?

** Edit **

Let me try and clarify a bit I'm currently running a local web server. I have to - script tags can't reference a local file, for security reasons.

I'm currently calling getJSON with the url: http://twitter.com/status/user%5Ftimeline/user.json?callback=?

If I downloaded that json response and hosted it on the local webserver, it wouldn't work, because the callback name will change every time, yet the feed will have the function name it was originally fetched with.

Answer 1

local webserver?

Answer 2

Just use a web server (IIS is built into Windows, or use Apache, or XAMP otherwise). That way, you're always connected to your web site (use http://localhost/...).

Answer 3

Quick solution is to just run a local web server. This is a good idea for all sorts of reasons.

If you don't want to do that, just define the URL to get the JSON from somewhere global, and pass it to getJSON(). Just don't forget to set it back before you put your code up on the server.

Answer 4

I have a similar problem. Try xampp for an easy php/apache/mysql install on your machine.

I use dreamhost to host my site. I manage everything with a subversion repository, which allows me to simply do 'svn update' on my live site when I am ready to pull in my changes.

I also define all my paths relative to a base_url variable, which is set depending on the http host, so I don't have to change anything for my site to run on different webservers. I use codeigniter, and my config file looks like this:

switch($_SERVER['HTTP_HOST']) {

    case "claytonhp":
        $config['base_url'] = "http://claytonhp/<project_url>";
        break; 

    // etc.
}

To use that same path in my javascript, I put the following at the top of each html file:

<script type="text/javascript">
  siteUrl = '<?= base_url();?>';
</script>
<script type="text/javascript" src="<?= base_url();?>public/scripts/external/jquery/jquery.js"></script>       

<!-- Local functionality -->
<script type="text/javascript" src="<?= base_url();?>public/scripts/common.js"></script>
<!-- etc -->

Then, my jquery ajax calls look like this:

$.ajax({
     type: "POST",
     url: siteUrl + "index.php/ajax_controller/getSomeData",
     dataType: "json",
     data: "id=5",
     success: successCallback,
     error: errorCallback
   });