How can I get some values created in JavaScript into php, use AJAX?

JavaScript
41

Hi Rubble,

So it didn’t work?

Now I am on my PC again, here’s what your entire AJAX call should look like:

$.ajax({
  type: "POST",
  url: "pointsT.php",
  cache: false,
  data: { 
    "points1": $("#points1").val(),
    "points2": $("#points2").val()
  },
  success: function(image_url){
    var img = new Image();
    img.src = image_url;
    img.onload = function(){
      $("#result").html(img);
    }
  }
});

Normally, setting “cache:false” will force requested pages not to be cached by the browser by appending a timestamp to them.

42

You should only use my example to generate the file name you return to the browser.
Do everything as before, but change your last line (the one that generates “processed/1405439083_GLD.jpg”) to return “processed/1405439083_GLD.jpg?t=123456” (where 123456 is a timestamp).

This might help, too: http://davidwalsh.name/prevent-cache

43

By jingo I think I have got it!

The JavaScript part I could understand but I was thinking I should be adding the time stamp after the image name being generated; but of course that crashed the imagemagick program. I have now added it to the extra echo I added to the php file around post #34 in this thread.

It takes a while to sink in sometimes (:

44

By Jove, I think you have as well!
Spiffing work old bean.

:slight_smile:

45

I just think I understand how the Ajax part works and try to add something and it fails!

I wanted to add some radio buttons to the page to specify a background colour and added this to the form:


    <input name="pixel" id="pixel" type="radio" value="black" checked />
    <input name="pixel" id="pixel" type="radio" value="edge" />

The button now contains this:


   <script>
    $("#createFile").on("click", function(){
		$.ajax({
		type: "POST",
		url: "points.php",
		cache: false,
		data: { 
		"points1": $("#points1").val(),
		"points2": $("#points2").val(),
"pixel": $("#pixel").val()		
		},
		success: function(image_url){
		var img = new Image();
		img.src = image_url;
		img.onload = function(){
      $("#result").html(img);
    }
  }
});
      });
    </script>

The pixel line has been added and I have tried different variations of formatting that line.

I have this in my php page to get the value of pixel:


$pixel = ( isset($_POST['pixel'])) ? $_POST['pixel'] : 'transparent';
echo "pixel = ".$pixel;

Now the value of pixel will not be displayed and the above two lines stop the resulting image from being displayed. It is being created but the pixel is having no effect on the output as though it is not being passed over to the php.

The output on the consul is:


GET http://localhost:1234/jQuery_fred/Array(%20%20%20%20%5Bpoints1%5D%20=%3E%20126,141,256,142,340,210,305,280,230,301,156,295%20%20%20%20%5Bpoints2%5D%20=%3E%20174,401,174,273,237,228,318,220,343,290,340,379%20%20%20%20%5Bpixel%5D%20=%3E%20black)pixel%20=%20blackprocessed/1_1405783000_AHZ.png [HTTP/1.1 403 Forbidden 16ms]

Posting the above I notice I have the pixel in the GET but it looks like it is screwing up the Ajax contents

46

Hi Rubble,

Your JS looks correct although, if you have many more fields to pass across to the PHP script, it is better to have a function such as getFormValues, which creates and returns an object.

But anyway, leave the first part of your JS as it is, then in your PHP script, delete everything (temporarily) and replace it with:

print_r($_POST);

After that, change your success callback to:

success: function(response){
  console.log(response);
}

and let me know what gets logged.

I imagine the error here could be being caused by the random echos in your PHP script.
You should really work out what it is that you want to return, then echo it as the final statement in the PHP script.

47

I do not get anything back from:


    <script>
    $("#createFile").on("click", function(){
		$.ajax({
		type: "POST",
		url: "points.php",
		cache: false,
		data: { 
		"points1": $("#points1").val(),
		"points2": $("#points2").val(),
"pixel": $('pixel').val()		
		},
success: function(response){
  console.log(response);
}
});
      });
    </script>

Except:

reflow: 0.26ms
reflow: 0.3ms

If I go back to the start I get:

A form was submitted in the windows-1252 encoding which cannot encode all Unicode characters, so user input may get corrupted. To avoid this problem, the page should be changed so that the form is submitted in the UTF-8 encoding either by changing the encoding of the page itself to UTF-8 or by specifying accept-charset=utf-8 on the form element. upload.php
reflow: 0.19ms
Unknown property ‘-moz-border-radius’. Declaration dropped. transform.css:116
Unknown property ‘-moz-border-radius’. Declaration dropped. transform.css:124
SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:1
reflow: 0.31ms
reflow: 0.56ms
Error: http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js is being assigned a //# sourceMappingURL, but already has one
GET http://localhost:1234/jQuery_fred/css/graphics/layout-two-liquid-background.gif [HTTP/1.1 404 Not Found 15ms]
reflow: 0.23ms function b.support</<, jquery.min.js line 3
reflow: 0.1ms function b.support</<, jquery.min.js line 3
reflow: 0.05ms function b.support</<, jquery.min.js line 3
reflow: 0.06ms function b.support</<, jquery.min.js line 3
GET http://localhost:1234/jQuery_fred/css/graphics/checkerboard.png [HTTP/1.1 404 Not Found 16ms]
reflow: 0.7ms
reflow: 0.12ms
reflow: 0.47ms
Use of getPreventDefault() is deprecated. Use defaultPrevented instead. jquery.min.js:3

But still not output from print_r($_POST);

48

Can you PM me a link to your current files and I’ll have a look.

49

Hi Rubble,

Which file am I looking at - transform.php?

50

Yes transform.php is the javascript that sends the Ajax request to points.php which currently just has print_r($_POST)

51

Hi,

You have:

"pixel": $('pixel').val()

should be:

"pixel": $('#pixel').val()

You forgot the hash :slight_smile:

52

Right I think I am sorted now after fighting the code for another hour or so!

I had tried “pixel”: $(‘#pixel’).val() but it still did not work and as you said earlier the echo’s were causing a problem. I was echoing out $pixel to see what it contained and it was being added onto the filename; removing the echo and adding the # sorted that out. Also at some point I had deleted Session_start which was also a problem! This php error did not show up until the pixel problem was sorted.

Thanks again for the help.

53

I should really stop now but I found another small problem. The first radio button was being used no mater what was selected so I change:

"pixel": $('#pixel').val()

to

"pixel": $('input:radio[name=pixel]:checked').val()
54

Hi Rubble,

I just looked at your code again.
You need to lose the id, as ids should be unique to the page.
Change the radio buttons to this:

<input type="radio" name="pixel" value="black" checked> Black
<input type="radio" name="pixel" value="edge"> Edge

Then you will be able to get the value of whichever is selected, thus:

$('input[name="pixel"]:checked').val();

and in your AJAX:

"pixel": $('input:radio[name="pixel"]:checked').val()

Sorry, I should have spotted that first time round.

55

Thanks Pullo; all seems to be working now.