CODEWITHSUNDEEP
phpjqueryajaxhttp-headers
Nicero
Nicero

Reputation: 4377

'Content-Length' header is not passed to headers

I'm trying to build a Phonegap app which displays a progress indicator while loading JSON data which has been queried from a MySQL db. I did work out the Ajax loading part from a remote server by my self, but now I'm not able find the way out on the progress indicator part.

After lot of searching, I'm trying to make work this script. At present the script does not work for me as lengthComputable is false.

I read that lengthComputable is given by headers which need to be (or can be) set by PHP like this:

ob_start();

// Code...

$length = ob_get_length();
header('Content-type: text/html;charset=utf-8');    
header('Access-Control-Allow-Origin: *');
header('Content-Length: '.$length."\r\n");
header('Accept-Ranges: bytes'."\r\n");

Using Firebug I noticed that all the headers I set such as Access-Control…, Accept-Ranges and Content-Type are actually set, but Content-Length is not.

enter image description here

Why? How can I set the Content-Length header? Will this make the script 'magically' work or am I still groping in the dark to make a progress indicator?

Upvotes: 1

Views: 1564

Answers (2)

Andrew Taylor
Andrew Taylor

Reputation: 692

Your Firebug screenshot shows you have Transfer-Encoding set to chunked. This usually means the content is streamed to the user as it is generated rather than all at once. In this mode, you cannot use Content-Length. Presumably your server is stripping out the disallowed header.

You might be able to reconfigure your server not to stream the response, but the easiest solution would be to add a different header, like X-Filesize and calculate the progress from that. It probably won't work with Phonegap's automatic progress calculation though.

You might be able to find a way of getting Content-Length headers on a chunked encoding server. Don't. Violating the HTTP standard might work in one particular scenario but will cause all sorts of problems down the line.

Upvotes: 4

Ofir
Ofir

Reputation: 141

This might not be the best anwser but I got a simple solution for you.

Find a gif of loading you like, just for example lets say this one:

http://sierrafire.cr.usgs.gov/images/loading.gif

Take the gif and put it in the div/field you want the data to be loaded in.

For example:

<div id="data"><img src='http://sierrafire.cr.usgs.gov/images/loading.gif' alt="loading" /></div>

And in the jQuery code you do:

$(document).ready(function(){
    $.get( "/url/you/load/from", function( data ) {
      $("#data").stop().fadeOut(0).fadeIn("10").html(data);
    });
});

This will over-write the loader gif and display the data once it finished loading.

I hope it helps!

Upvotes: -1

Related Questions