Values change after JSON AJAX POST (percentage symbol)

Question

I got a problem. I am building some kind of a slide editor with AJAX. I have a PHP script which has many functions which can be selected with different GET parameters. Everything works fine. But when I try to post the slides to save them, a value called transformorigin changes from 50% 50% 0 to 50500.

GET slide.php?action=get&id=1

[{"slideid":1,"position":1,"background":{"id":"3","name":"http:\/\/test.com\/uploads\/1\/img\/20140729_174513.jpg"},"delay":4000,"timeshift":0,"active":true,"transition2d":[2,7,9],"transition3d":[],"layers":[{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":80,"offsety":0,"duration":1000,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50% 50% 0","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":-80,"offsety":0,"duration":400,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50% 50% 0","easing":{"id":14,"name":"easeInOutQuint"}}},{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":80,"offsety":0,"duration":1000,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50% 50% 0","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":-80,"offsety":0,"duration":400,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50% 50% 0","easing":{"id":14,"name":"easeInOutQuint"}}}]},{"slideid":2,"position":2,"background":{"id":"4","name":"http:\/\/test.com\/uploads\/1\/img\/20140729_174608.jpg"},"delay":4000,"timeshift":0,"active":true,"transition2d":[2,7,9],"transition3d":[],"layers":[]}]

POST slide.php?action=post&id=1

[{"slideid":1,"position":1,"background":{"id":"3","name":"http:\/\/test.com\/uploads\/1\/img\/20140729_174513.jpg"},"delay":4000,"timeshift":0,"active":true,"transition2d":[2,7,9],"transition3d":[],"layers":[{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":80,"offsety":0,"duration":1000,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50500","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":80,"offsety":0,"duration":400,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50500","easing":{"id":14,"name":"easeInOutQuint"}}},{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":80,"offsety":0,"duration":1000,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50500","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":80,"offsety":0,"duration":400,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50500","easing":{"id":14,"name":"easeInOutQuint"}}}]},{"slideid":2,"position":2,"background":{"id":"4","name":"http:\/\/test.com\/uploads\/1\/img\/20140729_174608.jpg"},"delay":4000,"timeshift":0,"active":true,"transition2d":[2,7,9],"transition3d":[],"layers":[]}]

I don't understand why transformorigin changes after the POST. When I click on the firebug post tab of the post request, it is still 50% 50% 0. But server side I get 50500 when I do a

echo file_get_contents('php://input');

at the begining.

Here is my Javascript/jQuery:

function saveSlides(success,error) {
  $.ajax({
    url: '/slide.php?action=post&id=' + lid,
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify(slides),
    contentType: "application/json; charset=UTF-8",
    success: function(data) {
      if ("undefined" == typeof(data.error)) {
        slides = data;
        if (isFunction(success))
          success(data);
      } else {
        if (isFunction(error))
          error(data);
      }
    },error: function() {
      if (isFunction(error))
        error({"error":{"id":100,"message":"Could not retrieve data."}});
    }
  });
}

And even when I specify contentType it doesn't change the content type.

Thank you in advance

UPDATE 1:

After encoding everything with JavaScript, this is what I send to the php script:

[{"slideid":"1","position":"1","background":{"id":"3","name":"http%3A//test.com/uploads/1/img/20140729_174513.jpg"},"delay":"4000","timeshift":"0","active":"true","transition2d":[2,7,9],"transition3d":[],"layers":[{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":"80","offsety":"0","duration":"1000","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":"-80","offsety":"0","duration":"400","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}}},{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":"80","offsety":"0","duration":"1000","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":"-80","offsety":"0","duration":"400","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}}}]},{"slideid":"2","position":"2","background":{"id":"4","name":"http%3A//test.com/uploads/1/img/20140729_174608.jpg"},"delay":"4000","timeshift":"0","active":"true","transition2d":[2,7,9],"transition3d":[],"layers":[]}]

This is what I get back from the php script:

[{"slideid":1,"position":1,"background":{"id":"3","name":"http:\/\/test.com\/uploads\/1\/img\/20140729_174513.jpg"},"delay":4000,"timeshift":0,"active":false,"transition2d":[2,7,9],"transition3d":[],"layers":[{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":80,"offsety":0,"duration":1000,"delay":0,"fade":false,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"5025205025200","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":80,"offsety":0,"duration":400,"delay":0,"fade":false,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"5025205025200","easing":{"id":14,"name":"easeInOutQuint"}}},{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":80,"offsety":0,"duration":1000,"delay":0,"fade":false,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"5025205025200","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":80,"offsety":0,"duration":400,"delay":0,"fade":false,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"5025205025200","easing":{"id":14,"name":"easeInOutQuint"}}}]},{"slideid":2,"position":2,"background":{"id":"4","name":"http:\/\/test.com\/uploads\/1\/img\/20140729_174608.jpg"},"delay":4000,"timeshift":0,"active":false,"transition2d":[2,7,9],"transition3d":[],"layers":[]}]

So now it changes from 50%25%2050%25%200 to 5025205025200.

After i added a urldecode to my php script it returned 50500 again.

UPDATE 2:

Now I am trying to test the php file.

When I do this:

echo file_get_contents('php://input');
die;

I get back the same I send:

[{"slideid":"1","position":"1","background":{"id":"3","name":"http%3A//test.com/uploads/1/img/20140729_174513.jpg"},"delay":"4000","timeshift":"0","active":"true","transition2d":[2,7,9],"transition3d":[],"layers":[{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":"80","offsety":"0","duration":"1000","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":"-80","offsety":"0","duration":"400","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}}},{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":"80","offsety":"0","duration":"1000","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":"-80","offsety":"0","duration":"400","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}}}]},{"slideid":"2","position":"2","background":{"id":"4","name":"http%3A//test.com/uploads/1/img/20140729_174608.jpg"},"delay":"4000","timeshift":"0","active":"true","transition2d":[2,7,9],"transition3d":[],"layers":[]}]

And when I do this:

$slides = json_decode(file_get_contents('php://input'),true);
print_r($slides);
die;

I get this:

So now I have to decode it somehow.

UPDATE 3:

I had to use encodeURIComponent() inside javascript and urldecode() inside php.

Thank you very much now it works.

After your edit, it seems like something may be going wrong in your PHP script. What is the code for the script? You say the part with % is the response, correct? — Spork, Aug 12 '14 at 13:14
I edited my text, maybe you understand it better. Now I will upload add parts of the php script. — Rispa57, Aug 12 '14 at 13:24

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

Your text is being interpreted as character encoded as it it prefaced by a % sign. See also this stackoverflow question. Can you escape it before it is processed?

You can encode your text after you stringify the object, and then decode it when it reaches you. Check the higher voted answer on this question.

edited May 23 '17 at 12:29

Community

1
1

answered Aug 12 '14 at 09:10

Spork

1,631
1
21
37

Do you mean to escape it server side with PHP ? Or with Javascript before the post ? – Rispa57 Aug 12 '14 at 09:15
My suggestion is to do it with JavaScript pre-post, but I am considering if I may be wrong. Let me know, if it doesn't work it may be best for me to remove my answer so you can get new ones in more easily. Could you try to put the escape around the JSON stringify result? Like so: http://stackoverflow.com/questions/5506000/javascript-json-stringify-doesnt-escape – Spork Aug 12 '14 at 09:19
Nope, it doesn't work for me. I have to escape every value and call JSON stringify after that. – Rispa57 Aug 12 '14 at 09:37
You got it to work by escaping the values, then using JSON stringify, instead of the other way around? That's a bit odd. – Spork Aug 12 '14 at 09:48
Not yet. I got some problems. – Rispa57 Aug 12 '14 at 11:18
I am not able to escape it. I always get ["%5Bobject%20Object%5D", "%5Bobject%20Object%5D", "%5Bobject%20Object%5D"]. – Rispa57 Aug 12 '14 at 11:36
The order is going wrong. Consider the difference in output between escape({la:"la"}); and escape(JSON.stringify({la:"la"})); – Spork Aug 12 '14 at 11:42
When I add urldecode to my php script. The result is the same as when I wouldn't escape it. – Rispa57 Aug 12 '14 at 12:51

Values change after JSON AJAX POST (percentage symbol)

1 Answers1