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

JavaScript
21

Right un muddeling the mess I had here are the results - I drew a triangle on image one ( id=“points1” ) and square on image 2 ( id=“points2” ) :

I have to change my JavaScript file to ( (“points1”) and it was (“points”) for one image only; otherwise it did not give any output ):

  record = function() {
      $(input).val(points.join(','));
	  // Displays the coordinates on the page
		points.toString();
		document.getElementById("points1").innerHTML = points;
    };

This is the output of the new button ( as you can see the second image points have overwritten the first as points was changed to points1 in the java script file):

“Points 1 contains: 106,142,115,261,271,242,282,149” transform.php:74
"Points 2 contains: "

The original record function was:


    record = function() {
      $(input).val(points.join(','));
    };

I changed it to this to get an output I could use:


    record = function() {
      $(input).val(points.join(','));
	  // Displays the coordinates on the page
		points.toString();
		document.getElementById("points").innerHTML = points;
    };
22

Hi Rubble,

I’m sure it’ll be something simple.
The button test at least removes AJAX from the equation.

Could you send me your files so I can have a look?

23

Hi Rubble,

Thanks for the files.

Had a bit of a face-palm moment when I realised why it wasn’t working.

Change you JS to this:

$.ajax({
  type: "POST",
  url: "pointsT.php",
  data: { 
    "points1": $("#points1").[B]val()[/B],
    "points2": $("#points2").[B]val()[/B]
  },
  success: function(response){
    console.log(response);
  }
});

and all should be good.

24

Thanks Pullo it is working now - I did have a quick panic as the php write to text file was not working, but I had changed the variable name when testing!

25

Currently my code has taken a side track and it has two images:
Left hand image is one suffering from a perspective distortion and the user clicks the corners of the item they want undistorted.
Right hand image is the same image but the user will click the shape they want the undistorted image to be.
The two sets of points are sent to php via Ajax via a button click and the image is run through Imagemagick and an undistorted image is created.
The user clicks a link on the JavaScript page to view the image on a different page and it would be nice if the image was displayed on the original page - is this possible?

26

Sure :slight_smile:

When the “Create image” button is clicked, how does your PHP script name the images on the server.
We will need a way to get at the last image created.

27

The php code create a random file name and currently saves the new image in the same folder - later I will add a folder name to the file name and save the new images in that folder ( I can do that now if it simplifies things ):


$new_name = $key.'.png';
28

I have just thought I can change the original javascript page with the images page to a php page and generate the filename on that page if that is easier. I can then either use a session to take the name across to the php page or do it in the Ajax code?

I could even do a if file exist that is started say a couple of seconds after the button to generate the file is pressed by JavaScript?

29

Morning,

Sorry for not getting back to you sooner, but I started playing Skyrim last night, then suddenly it was late :slight_smile:

I have a couple more questions:

If a user hits the button twenty times, will they be interested in previous attempts (i.e. 1 -19), or are they only ever going to b interested in the latest (i.e. no. 20).

Also, is it bad if one user sees another user’s photos on the server (for example, by guessing a url)?

30

Actually, scratch the above.
A better way would be to have the PHP script return the name of the file it has just created to the JS.

Could you add the following to the last line of points.php:

echo $fileName;

Where $fileName is whatever you have called the image that the PHP script has just created.

Then in your $.ajax() success callback, response should contain the name of the file:

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

Could you try that and let me know if it works (i.e. what response contains).

31

I receive “processed/1405439083_GLD.jpg” in the consul; this is correct as it is the folder and file name.

I have noticed during testing everything I echo on the php page shows up in the consul.

32

Hi Rubble,

That’s good news.
Would you like the image to be inserted into the page straight away, or would you like the user to click on a link and have the image display in a LightBox?

33

I would like it to display on the page straight away - the only problem I can see is that it can take a couple of seconds to create the image .

34

OK, well what happens if you define an empty div “result” on the page:

<div id="result"></div>

Then add the following to your success callback:

success: function(image_url){
  var img = new Image();
  img.src = image_url;
  img.onload = function(){
    $("#result").html(img);
  }
}

This is untested, as I am currently away from my PC.
Let me know how you get on.

35

It is working and takes about 2 seconds for the image to load - I suppose the php echo does not happen until after the exec() has finished; which surprises me. I will test it on some larger images later.

Thanks again - I had better finish off this project now although I am not sure at what point the other developer wants to take over.

36

I forgot to say the output suffers from the cache problem?
Once the image is created it is in the cache; if you redo it the old image shows up and refreshing the page with F5 currently fails as the data is lost. Using a couple of different .htaccess png refreshes has no effect. I think the only way is to have a different file name everytime

37

Can you append a query string to the file name you are returning, e.g.

$img = "http://domain.com/img.png?t=" . time();

That should get around the problem.

38 
$img = "http://domain.com/img.png?t=" . time();

I have never seen this method and need to think how it works. As I see it the time() is just a variable on the end of the image name.
Should it be something like:

$img = "http://domain.com/img". time().".png";

As your example did not work - the image was not generated.

I could generate the new filename on the page that creates the image when the image is created; I am currently generating the name when the file is uploaded. The problem is keeping track of all the names as I was thinking if the user decides to use a different transform method I need to know what their original upload filename was.

39

Try adding the option “cache: false” to your ajax method.

$.ajax({
  type: "POST",
  url: "pointsT.php",
  cache: false,
  data: { 
    "points1": $("#points1").val(),
    "points2": $("#points2").val()
  },
  ... Etc ...
});

Sorry for the brusque reply. I’m on an iPad. I don’t know how anyone manages to work with these things.

40

Thanks but the problem is the image in the cache as the new image is created and saved but does not replace the old one on the screen - the cache can be a pain in the backside in this case!

I get anoyed when using any tablets partialy as my fingers must be dry and nothing happens half the time. Then I try and click on something and the item below where I think I am clicking opens :mad:
It is a lot better if they have a keyboard attached.