How to flush PHP output buffer properly? - javascript

I need PHP to stream output to Javascript but Javascript keeps the old responses and prints them like so...
Console logs:
[0]: Line to show.
[0]: Line to show.[1]: Line to show.
[0]: Line to show.[1]: Line to show.[2]: Line to show.
[0]: Line to show.[1]: Line to show.[2]: Line to show.[3]: Line to show.
[0]: Line to show.[1]: Line to show.[2]: Line to show.[3]: Line to show.[4]: Line to show.
[0]: Line to show.[1]: Line to show.[2]: Line to show.[3]: Line to show.[4]: Line to show.Array
(
[0] => [0]: Line to show.
[1] =>
[2] =>
[3] => [1]: Line to show.
[4] =>
[5] =>
[6] => [2]: Line to show.
[7] =>
[8] =>
[9] => [3]: Line to show.
[10] =>
[11] =>
[12] => [4]: Line to show.
[13] =>
[14] =>
)
So Javascript console logs state that the responseText is "saving" old responses. However, take a look at the array I saved in PHP and you can see that no previous echos are flushed to JS.
Javascript:
$.ajax({
url: "../controller/controller.php",
type: "POST",
data: {operation: 'rxMode'},
xhr: function(){
var xhr = $.ajaxSettings.xhr();
xhr.onprogress = function(e){ console.log(e.currentTarget.responseText); };
console.log(xhr);
return xhr;
}
});
PHP:
$out = array();
for ($i = 0; $i<5; $i++){
echo "[$i]: Line to show.";
array_push($out, ob_get_contents());
ob_flush();
array_push($out, ob_get_contents());
flush();
array_push($out, ob_get_contents());
sleep(2);
}
print_r($out);
My desired responseText is
[0]: Line to show.
[1]: Line to show.
[2]: Line to show.
[3]: Line to show.
[4]: Line to show.
Edit: I do not want to remove the old responses rather I would prefer that Javascript only gives me my desired responseText.

responseText always contains the entire response from the server. When you use the progress event, it contains the accumulated response so far, not just the incremental string added to the response in the most recent flush from the server.
Save the length of the previous response text in a variable, and then on subsequent calls just print the substring after that.
var responseLen = 0;
$.ajax({
url: "../controller/controller.php",
type: "POST",
data: {operation: 'rxMode'},
xhr: function(){
var xhr = $.ajaxSettings.xhr();
xhr.onprogress = function(e){
console.log(e.currentTarget.responseText.substr(responseLen));
responseLen = e.currentTarget.responseText.length;
};
console.log(xhr);
return xhr;
}
});

Related

Create and edit file javascript with "file_put_contents"?

i would like to create a file.js with php but i think that in my code there are a lot of errors:
i have multidimensional array:
$report= array();
$report= array(array(3,6),array(4,8));
that is:
Array
(
[0] => Array
(
[0] => 3
[1] => 6
)
[1] => Array
(
[0] => 4
[1] => 8
)
)
Set a content-type for js file
$header = "Content-type: text/javascript";
$dir = "outreport/";
$nomefile = "report.js";
//delete a file with same name if exists
foreach (glob($dir."*".$nomefile) as $v){
unlink($v);
}
$percorso = $dir.$nomefile;
file_put_contents($percorso, $report);
header($header);
print($report);
There are two problems:
1) when launching the file.php asks me to download the same file but in javascript
2) in the "outvulcani" it creates the file report.js but is empty
I wish that in the file "report.js" there is the array $report but
written in javascript code:
var reports = [
[3,6]
[4,8]
];
Kindly, you can help me out?
Thanks a lot!
Sorry for my english
PHP has an function to convert Arrays to JSON. You could use this code for "inspiration".
$report = array(array(3,6),array(4,8));
$javascriptContent = json_encode($report);
// Convert to string
$javascriptContent = "var reports = ". $javascriptContent . ";\n";
file_put_contents($percorso, $javascriptContent);
The reason for "Download" is the header, please remove it.

using AJAX query to pass javascript array to php

After reading through quite a few posts here, (and even just straight copying code,) I still cannot figure out why this is not working.
On my main page, I have a textbox that a user pastes data into. Upon paste, this script runs (this and the ajax query below are in the same script function):
var lines = $('textarea').val().split('\n'); //create array from pasted data
I now have a JavaScript array with the pasted data. I'm trying to send this over to a separate PHP file that I will load into a div on this main page by doing the following:
$.ajax({
type: 'POST',
url: 'return.php',
data: {lines:lines},
success:function(data){
$("#info").load("return.php");
}
});
for (i=0; i < lines.length; i++) { // log the output
if (lines[i]){
console.log("line ", i , lines[i]);
}
}
In my return.php file, I have this:
$lines = $_REQUEST['lines'];
echo '<pre>';
echo($lines);
echo '</pre>';
My console.log is outputting the array perfectly, but for some reason it is not making its way over to return.php, as my echo is blank.
What am I doing wrong?
The response I get from return.php is:
<pre>testArrayArray
(
[0] => DL4004-13-F
[1] => S1G-13-F
[2] => ZXMP3A13FTA
[3] => B260A-13-F
[4] => S1J-13-F
[5] => S3B-13-F
[6] => SSN1N45BTA
[7] => GBJ1010-F
[8] => BPW20RF
[9] => T3035H-6I
[10] => ZXMP7A17KTC
[11] =>
)
</pre>
The success handler on your ajax request is calling return.php with nothing and loading it into #info.
Change success to instead do:
$("#info").html(data)
The $lines variable in your PHP code is an array, not a string. If you have the errors turned on, PHP should warn you that you're doing an "Array to string conversion" (at least it does for me using your code).
You can't echo an array like that, you have to iterate through the results somehow.

Properly returning a JSON object with an embedded JS function

Updated Post
I have a solution for that problem which works with me so far (only tested on Firefox).
My main goal was to dynamically update a Flot graph with Ajax. I also need to dynamically update the axis styles and you can do this by the tickFormatter option. To avoid the problems I previously had, I simply insert the desired return string in the PHP array and JSON encode that array. After returned to the Ajax function I create a new function using the javascript Function() constructor (Link). I hope this helps someone.
Ajax
$.ajax({
url: 'someControllerWhichCreatesJSONdata',
data: 'some Value',
type: 'post',
cache: false,
datatype: 'json'
})
.success(function(data) {
var datas = data[0]; // fetch data array
var options = data[1]; // fetch options array
var xReturn = options.xaxes[0].tickFormatter; // fetch return string
var yReturn = options.yaxes[0].tickFormatter;
var xFunc = new Function("val", "axis", xReturn); // create function
var yFunc = new Function("val", "axis", yReturn);
options.xaxes[0].tickFormatter = xFunc; // update tickFormatter with function
options.yaxes[0].tickFormatter = yFunc;
$.plot($("#yw0"), datas, options);
})
.error(function(data) {
$("#error").html(data.responseText); // show error in separate div
});
PHP array
$options = array(
'legend' => array(
'position' => 'nw',
'show' => true,
'margin' => 10,
'backgroundOpacity' => 0.5
),
'grid' => array(
'clickable' => true,
'hoverable' => true
),
'pan' => array('interactive' => true),
'zoom' => array('interactive' => true),
'axisLabels' => array('show' => true),
'xaxes' => array(
array(
'axisLabel' => 'someUnit',
'tickFormatter' => 'return "foo bar"' // enter whatever return value you need
)
),
'yaxes' => array(
array(
'axisLabel' => 'someUnit',
'tickFormatter' => 'return "foo bar"'
)
)
);
I skip the data array as it looks similar. Both arrays get combined and JSON encoded.
public function actionSomeControllerWhichCreatesJSONdata() {
$returnArray = array($data, $options);
echo json_encode($returnArray);
return true;
}
The resulting array looks like the one I've posted in the bottom of this post.
Original Post
I'm trying for hours now, but I can't get this to work.
I have an Ajax request which gets a JSON object as return value on success. This works fine as long as I don't use a JS function in my JSON array. So my JSON array looks as follows (after json_encode):
[{
"data": [{
{1,2},
{3,4},
}],
"function": "function(){return \"foo bar\";}"
}]
In order to get rid of the "'s in the function string. I use str_replace and replace the quoted string with an unquoted one. This then looks like so:
[{
"data": [{
{1,2},
{3,4},
}],
"function": function(){return "foo bar";}
}]
The plain json_encode works fine and my Ajax function reads it as a JSON object. After I replace the string it turns out that the return value is no longer a JSON object but a plain text string. I've tried to parse the string again with jquery.parseJSON() but this results in the syntax error:
SyntaxError: JSON.parse: unexpected keyword at line 1 column 396 of the JSON data
Ajax function:
$.ajax({
url: 'someControllerWhichCreatesJSONdata',
data: 'some Value',
type: 'post',
cache: false,
datatype: 'json' // or text when trying to parse
})
.success(function(data) {
console.log(data);
var dat = jQuery.parseJSON(data); // trying to parse (only when dataType: "text")
var datas = dat[0]; // or data[0] when datType = json
var options = dat[1]; // ---
$.plot($("#yw0"), datas, options); // trying to update a FLOT window
})
.error(function(data) {
console.log("error");
$("#error").html(data.responseText); // show error in separate div
});
So when using this function and setting the return type to "json", it produces an error. If the return type is "text" and I try to parse the string I get the error above. Is there any solution for this problem or am I doing something completely wrong?
Thank's for your help!
UPDATE
Sorry of course my JSON data is not valid! As I said, my JSON object gets created by json_encode which I guess should get the syntax right. The plain array after son_encode looks like:
[[{
"data":[[0.0042612,0.0042612]],
"label":"WISE.W3: Cutri et. al 2012",
"lines":{"show":false},
"points":{"show":true,"radius":3}}],
{
"legend": {
"position":"nw",
"show":true,
"margin":10,
"backgroundOpacity":0.5},
"grid": {
"clickable":true,
"hoverable":true},
"pan":{"interactive":true},
"zoom":{"interactive":true},
"axisLabels":{"show":true},
"axisLabel": {
"unit":"Jy",
"id":null,
"name":null},
"tickFormatter":"$tickFormatter$",
"position":"right"
}]
and after str_replace I get
[[{
"data":[[0.0042612,0.0042612]],
"label":"WISE.W3: Cutri et. al 2012",
"lines":{"show":false},
"points":{"show":true,"radius":3}}],
{
"legend": {
"position":"nw",
"show":true,
"margin":10,
"backgroundOpacity":0.5},
"grid":{"clickable":true,"hoverable":true},
"pan":{"interactive":true},
"zoom":{"interactive":true},
"axisLabels":{"show":true},
"axisLabel":{"unit":"Jy","id":null,"name":null},
"tickFormatter":function(val, axis){return val.toExponential(2)},
"position":"right"
}]
Adeno pointed it out already, your JSON syntax is not valid.
Please try to validate your JSON with a linter, like http://jsonformatter.curiousconcept.com/
This is a bit better:
[{"data":[["1","2"],["3","4"]],"function":"function(){return \"foo bar\";}"}]
And the other thing is: you should not manually deserialize the JSON. All newer versions of jQuery will automatically deserialize JSON based on the response's content-type header.
You already set dataType to json for the ajax request.
The response is JSON and will be de-serialized.
So you can directly use
.success: function(response) {
console.log(response.data);
console.log(response.function);
}
Answer for the questions/issue from the comments:
Now you created invalid JSON again, because "tickFormatter" : function(val, axis){return val.toExponential(2)}, misses the quotes around the function string.
Before you insert the string with str_replace(), you need to take care of escaping and quoting.
You may need a little helper function, which properly escapes a string - to be valid JSON.
you need to use str_replace() correctly: not replacing the outer quotes, just the inner $tickFormatter$.
Wait.. i will provide an example:
// we already have an array, which is JSON encoded
// now you want to insert additional JSON content.
// therefore we use a token replace approach.
// valid JSON - with $token$
$json = '[{"data":[["1","2"],["3","4"]],"tickFormatter":"$tickFormatter$"}]';
// the (future) javascript function is a string.
// it's not properly escaped or quoted to be JSON
// this allows for copy and pasting JS into PHP
$unescaped_functionString = 'function(){return "foo bar";}';
// in order escapre properly, we need a json escaping helper
/**
* #param $value
* #return mixed
*/
function escapeJsonString($value) { # list from www.json.org: (\b backspace, \f formfeed)
$escapers = array("\\", "/", "\"", "\n", "\r", "\t", "\x08", "\x0c");
$replacements = array("\\\\", "\\/", "\\\"", "\\n", "\\r", "\\t", "\\f", "\\b");
$result = str_replace($escapers, $replacements, $value);
return $result;
}
// then we escape the function string
$functionString = escapeJsonString($unescaped_functionString);
// now its ready to be inserted into the existing JSON,
// where token $tickFormatter$ is defined
// the token must be in single quotes. you replace just the $token$ and not "$token$".
$json = str_replace('$tickFormatter$', $functionString, $json);
echo $json;
// The result is valid JSON again:
// [{"data":[["1","2"],["3","4"]],"tickFormatter":"function(){return \"foo bar\";}"}]
Next step:
The ajax request is made, the json data is transferred to the client and you want to execute the function you passed in.
So the new question is "How to call/exec a JavaScript function from a string - without using eval?"
In general tunneling is a bad practice, see: Is it valid to define functions in JSON results?
Anyway, there a different ways to do this:
Referencing: http://everythingfrontend.com/posts/studying-javascript-eval.html
eval() - evil, but works.
setTimeout()
setTimeout(" function ", 0);
new Function()
var codeToExecute = "My.Namespace.functionName()";
var tmpFunc = new Function(codeToExecute);
tmpFunc();
document.write
document.write('<script> JS </script>')
data URI
var s = document.createElement('script');
s.src = 'data:text/javascript,' + encodeURIComponent('alert("lorem ipsum")')
document.body.appendChild(s);
JSON cannot contain functions like this.
You can however use Javascript to inject the function into the DOM, so what you want to do is skip the str_replace part and simply create a <script type="text/javascript"></script> element in the DOM and insert the data.function property into there.

Creating a JSON array starting with index 1

I need to create a JSON array starting with index 1
Here is my code which picks the images from the websites
$image_urls = array();
//get all images URLs in the content
foreach($get_content->find('img') as $element)
{
/* check image URL is valid and name isn't blank.gif/blank.png etc..
you can also use other methods to check if image really exist */
if(!preg_match('/blank.(.*)/i', $element->src) && filter_var($element->src, FILTER_VALIDATE_URL))
{
$image_urls[] = $element->src;
}
}
//prepare for JSON
$output = array('title'=>$page_title, 'images'=>$image_urls, 'content'=> $page_body);
echo json_encode($output); //output JSON data
data.images gives the array bu it starts with 0
Try
$output = array();
$output['1'] = array('title'=>$page_title, 'images'=>$image_urls, 'content'=> $page_body);
echo json_encode($output); //output JSON data
Output would be:
{"1":{"title":(*page_title*),"images":(*img_url*),"content":(*page_body*)}}
Try using array_unshift
$image_urls = array_unshift($image_urls,null);//add an element at the zeroth index
unset($image_urls[0]);//remove the zero index
An single line solution to the image_url array:-
$arr=array(1,2,3,4,5,6);
$arr = array_combine(range(1, count($arr)), $arr);
echo '<pre>';print_r($arr);
Output :
Array
(
[1] => 1
[2] => 2
[3] => 3
[4] => 4
[5] => 5
[6] => 6
)

Getting JSON data out of PHP using .get() in jQuery

I'm trying to get JSON data out of a $.get() jQuery call, but I can't seem to make it work properly.
Here's what my code looks like:
var url = "getDetailsJSON.php?ImageID=" + escape(itemName);
$.get(url, function (data) {
console.log("Success!");
var $detailDiv = $("#description");
var itemDetails = $.parseJSON(data); // Is this how I would get the JSON object in the php code?
console.log("success" + data);
var children = $detailDiv.children();
for (var i = children.length; i > 0; i--) {
$detailDiv.remove(children[i - 1]);
}
var descriptionP = $("<p></p>");
descriptionP.text("Description: " + itemDetails.description);
$detailDiv.append(descriptionP);
var priceP = $("<p></p>");
priceP.text("Price: $" + itemDetails.price);
$detailDiv.append(priceP);
var list = $("<ul></ul>");
$.each(itemDetails.urls, function (index, value) {
var url = itemDetails.urls[index];
var li = $("<li></li>");
var a = $("<a></a>");
a.attr("href", url);
a.text(url);
li.append(a);
list.append(li);
});
$detailDiv.append(list);
});
Here's the PHP code:
<?php
require_once('JSON.php');
$json = new Services_JSON();
$itemGuitar = array(
'id' => 'itemGuitar',
'description' => 'Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.',
'price' => 5695.99,
'urls' => array('http://www.thewho.com/',
'http://en.wikipedia.org/wiki/Pete_Townshend')
);
$itemShades = array(
'id' => 'itemShades',
'description' => 'Yoko Ono\'s sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.',
'price' => 258.99,
'urls' => array('http://www.beatles.com/',
'http://johnlennon.com/',
'http://www.yoko-ono.com/')
);
$itemCowbell = array(
'id' => 'itemCowbell',
'description' => 'Remember the famous "more cowbell" skit from Saturday Night Live? Well, this is the actual cowbell.',
'price' => 299.99,
'urls' => array('http://www.nbc.com/Saturday_Night_Live/',
'http://en.wikipedia.org/wiki/More_cowbell')
);
$itemHat = array(
'id' => 'itemHat',
'description' => 'Michael Jackson\'s hat as worn in the "Bille Jean" video. Not really rock memorabilia, but it smells better than Slash\'s tophat.',
'price' => 1699.99,
'urls' => array('http://www.michaeljackson.com/',
'http://music.yahoo.com/vid-2143030--Billie-Jean')
);
$details = array (
'itemGuitar' => $itemGuitar,
'itemShades' => $itemShades,
'itemCowbell' => $itemCowbell,
'itemHat' => $itemHat
);
$itemDetail = $details[$_REQUEST['ImageID']];
$output = $json->encode($itemDetail);
print($output);
?>
The 500 internal server error shows:
Connection close
Content-Encoding gzip
Content-Length 20
Content-Type text/html
Date Sun, 01 Sep 2013 22:47:32 GMT
Server Apache/2.2.22 (Ubuntu)
Vary Accept-Encoding
X-Powered-By PHP/5.3.10-1ubuntu3.7
One of the problems with this code is that $.get() doesn't work as expected, because I keep getting a 500 internal server error. Once that is solved, I'm not sure how I'm suppose to extract that JSON data in a PHP file that contains JSON data (see the comment question in code). Any solutions for this?
as pointed out by #joshjwalker, you might use
$itemDetail = $details[$_GET['ImageID']];
echo json_encode($itemDetail);
and your js script might be
getJSON("getDetailsJSON.php",
{"ImageID" : escape(itemName)},
function(data){
console.log(JSON.stringify(data))
}
);
The first step is to find your apache error log. That will usually tell you what your 500 server error is, because there is some sort of error happening on your php side code.
Secondly, that is how you parse a json array from php, but are you using json_encode to encode your php data as json in your php file?
http://php.net/manual/en/function.json-encode.php

Categories

Resources