Modified image to show from php page in AJAX

JavaScript
1

I have spent a whole evening on this; the code sends the colours to a php page where the image is modified and currently saved to the same folder as the code. When I am up and running I want to save the modified image into a sub folder.

The problem I have is I want the image to display on the same code as the colour picker.

I have been trying some " success:" code @James_Hibbard provided a few years back which works OK with some different code but not this:

var colorInputs = $("input[type='color']");	  
      colorInputs.on("change", function(){
        $(this).next().text(this.value)
      });

      $("form").on("submit", function(e){
        e.preventDefault();
        $.ajax({
          url: 'output.php',
          type: 'POST',
          data: {
            color1: colorInputs[0].value,
            color2: colorInputs[1].value,			
          },
		  success: function(image_url)	{
		    var img = new Image();
		    img.src = image_url;
		    img.onload = function(){
            $("#new_image").html(img);}
										},
        })
        .done(function(data) {
          console.log(data);
        })
								
      .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });
      });

      colorInputs.trigger("change");

I am echoing out the image name in the php after the image is completed: echo $new_image;
There are no errors in the web console:

Array modify_colours.php:54:
(
[color1] => #000000
[color2] => #000000
)
hat1.jpg

complete modify_colours.php:61:11

2

Hey Rubble, seems like it should work. What do you see if you log image_url to the console?

Is there anywhere we can see this in action? (you can also PM me)

Also, you can lose:

.done(function(data) {
  console.log(data);
})
.fail(function() {
  console.log("error");
})
.always(function() {
  console.log("complete");
});

if you’re not using them. I added those to the previous example to demonstrate where you can hook into things.

Also, silly questions, but a) does an element with the id of new_image exist on the page, and b) are you sure the path to the image is correct?

3

Thank you for the reply @James_Hibbard

No I didn’t have an id for new_image and the created image is in the same folder as the code. Putting an id in still does not work; probably due to the image_URL

Logging the image_url it comes up as not defined:

ReferenceError: image_url is not defined [Learn More modify_colours.php:54:29
http://127.0.0.1/ideas/colour/modify_colours.php:54:29
i https://code.jquery.com/jquery-1.12.4.min.js:2:27444
fireWith https://code.jquery.com/jquery-1.12.4.min.js:2:28213
y https://code.jquery.com/jquery-1.12.4.min.js:4:22719
c

I will send you a link later as I should be doing some DIY!

4

Lol, I know that feeling (although it’s tidying up in my case).

5

The problem was twofold: No id to display the image and I had a print_r($_POST); in the php page to confirm the colour details were being posted.

Removing the print_r($_POST); and adding the id fixed the problem.

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.