Using Ajax with PHP to send image to the page

Question

The user will enter some dimensions, click a button and see an image created with PHP (without a page refresh). The code I have so far is not putting the image on the page, any idea would be greatly appreciated.

draw.html:

<html>

 <head>
    <title>PHP Draw Test</title>
    <script src = "http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src = "draw.js"></script>
 </head>
 <body>
 <h1>Test the PHP GD module</h1>

 <div>
    <label>Height:</label>
    <input type="number" id="height" min=36 max=42 step=6 required />
    <label>Width:</label>
    <input type="number" id="width" value="50"/>
    <button id="SubmitRailing" type="button">Draw!</button>
    <button type="reset">Reset</button>
 </div>

 <div id="DrawBox"></div>
</body>
</html>

draw.js:

$(document).ready(function() {

    $('#SubmitRailing').click(function(){

        $.post("draw.php",
            {Height: $('#Height').val(), Width: $('#Width').val()},
            function(data){
                $('#DrawBox').html(data);
            }
        );
    }); 

});

draw.php:

<?php

$height = $_POST['Height'];
$width = $_POST['Width'];
$im = imagecreatetruecolor($width, $height);
$sand = imagecolorallocate($im, 222, 184, 135);
$white = imagecolorallocate($im, 255, 255, 255);

imagefill($im, 0, 0, $white);
imagecolortransparent($im, $white);
imagefilledrectangle($im, 4, 4, 50, 25, $sand);

imagepng($im, './drawtest.png');
imagedestroy($im);

echo '<img src="drawtest.png" />';
?>

UPDATE syntax syntax syntax I finally got this to work, modified from @gibberish example

data: { Height : Height, Width : Width},
success: function(data) {alert('This was sent back: ' + data);}

But when I tried to substitute my original statement:

function(data){$('#DrawBox').html(data);}

it would kill the script. Finally this worked, I didn't think it should be neccessary but there you have it:

success: function(data){$('#DrawBox').html(data);}

D4V1D · Answer 1 · 2015-03-27T19:53:00.090

This is because your inputs IDs are different from the ones retrieved in your $.post call: you've set your IDs to be both width and height and yet, you are retrieving them as #Width and #Height.

Have your jQuery code like so:

jQuery(function($) {
    $('#SubmitRailing').on('click', function(){

        $.post("draw.php",
            {Height: $('#height').val(), Width: $('#width').val()}, // note #height and #width
            function(data){
                $('#DrawBox').html(data);
            }
        );
    }); 

});

or have your HTML like so:

 <div>
    <label>Height:</label>
    <input type="number" id="Height" min=36 max=42 step=6 required /> <!-- note the uppercase in the ID -->
    <label>Width:</label>
    <input type="number" id="Width" value="50"/> <!-- note the uppercase in the ID -->
    <button id="SubmitRailing" type="button">Draw!</button>
    <button type="reset">Reset</button>
 </div>

One of either solution will work.

score 0 · Answer 2 · edited May 23 '17 at 12:06

This is not an answer, just some tips:

(1) Divide and conquer. Break up the problem into simple examples, and get each part working independently. For example, first just get the button to reveal a hidden div -- that shows that jQuery and the code are loaded and working properly.

$('#SubmitRailing').click(function(){
    $("hiddenDIV").show()
});

(2) Next, mod your draw.php page just to echo out the drawing to the screen. Ensure it is doing what you expect.

(3) Use the full $.ajax() format, instead of shorthand forms such as $.post(), $.get() or $.load(). Not only is the structure easier to troubleshoot, but you get additional capabilities.

See these posts for simple examples of AJAX:

A simple AJAX example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

UPDATE:

Further to your question, refactor your code thus:

<?php 
    $ht = $_POST['height']; //initially, very good idea to keep the 3 vars different, for ease of reference
    echo $ht;
?>

$(document).ready(function() { 
    $('#SubmitRailing').click(function(){ 
        var Height = $('#height').val(); <-- missing ending semi-colon
        var Width = $('#width').val(); <-- missing ending semi-colon
        $.ajax({ 
            type: "POST", 
            url: "draw.php", 
            data: 'height='+Height+ '&width=' +Width, // <=== changes
            success:function(data){ 
                alert('This was sent back: ' + data); 
            } 
        }); 
    }); 
});

NOTE THAT: AJAX cannot post to the same page -- it must post to a different PHP page. See this SO question.

Also ensure that you have loaded the jQuery libraries, usually in the head tags something like this:

<head>
    <!-- other stuff in head -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

If you use a CDN to load jQuery, as in the above example, it is probably already pre-loaded from other websites - especially if you load from googleapis or jquery.com CDN sites.

If you want some fast, free, 10-min refresher lessons on jQuery, find free video tuts here:

https://www.thenewboston.com/videos.php?cat=32

or at

https://phpacademy.org/videos/jquery-basics

Thanks for the tips. I used the$.ajax() format and modified the PHP just to echo the Height - still no joy. Can you see any flaws? '' '$(document).ready(function() { $('#SubmitRailing').click(function(){ var Height = $('#height').val() var Width = $('#width').val() $.ajax({ type: "POST", url: "draw.php", data: Height + Width, success:function(data){ alert('This was sent back: ' + data); } }); }); });' — Bart Bremmers, Mar 31 '15 at 17:37
This comment syntax is a bitch :( @D4V1D draw.php: `` draw.js `$(document).ready(function() { $('#SubmitRailing').click(function(){ var Height = $('#height').val() var Width = $('#width').val() $.ajax({ type: "POST", url: "draw.php", data: Height + Width, success:function(data){ alert('This was sent back: ' + data); } }); }); });` — Bart Bremmers, Mar 31 '15 at 17:45
@BartBremmers See response added to my answer. In future, to add formatted code as above, just use the **edit** link under the original question and just add an UPDATE to the bottom of the question with any new code. *To separate the new UPDATE info from body of main answer, just make an isolated line that has nothing but three dashes at beginning (creates horizontal line).* — cssyphus, Mar 31 '15 at 19:18
Thanks gibberish. I incorporated your corrections with no joy. I got so frustrated I straight copied your code to draw.php & draw.js and still no joy. When I click the button nothing happens. I know the php works, I use `$height = 300;` & `width = 300;` and point the browser directly to draw.php it works. So something is not working with the js but I am baffled. Could it be the ` — Bart Bremmers, Mar 31 '15 at 22:52
@BartBremmers This may be it -- see new addition at bottom of answer. — cssyphus, Apr 01 '15 at 00:00
I put `` in the head, your code `success:function(data){alert('This was sent back: ' + data);}` works, I get message **This was sent back **, when I replace your success:function with my code `function(data){$('#DrawBox').html(data);}` it dies quietly. We're close to something :-) — Bart Bremmers, Apr 01 '15 at 20:58

Using Ajax with PHP to send image to the page

2 Answers2