Hope this is the right place to post this and someone can help.
I have a simple app that uses the PHP GD library to display text in a set font at a set size.
When it's working you can select the text and size and press set and it will be displayed in the grey box.
When doing this WITHOUT Ajax I simply used this php to echo the img tag with the php function as the src.
echo '<img src="imageftt.php?text='.$myText.'&size='.$mySize.'&font='.$theFont.'">';
imageftt.php - PHP, This is the GD library function that creates the image.
<?php
header('Content-Type: image/png');
$im = imagecreatetruecolor(1000, 200);
$gray = imagecolorallocate($im, 240, 240, 240);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 1000, 199, $gray);
$theText = $_POST['text'];
$theSize = $_POST['size'];
$theFont = $_POST['font'];
imagefttext($im, $theSize, 0, 15, 160, $black, $theFont, $theText);
imagepng($im);
imagedestroy($im);
?>
=
My problem is I want to do this using jQuery and Ajax so the page doesn't have to reload.
I have this jQuery that collects the values from the form
<script type="text/javascript" >
$(function(){
$('.button').click(function(){
var text = $('#text').val();
var size = $('#size').val();
var font = $('corbelb.ttf');
//alert(text);
//alert(size);
//
var dataString = 'text=' + text + 'size=' + size + 'font=' + font;
$.ajax({
type: 'POST',
url: 'imageftt.php',
data: dataString,
success: function(){
alert()
}
});
return false;
});
});
</script>
My Problem is I can't see how to use my php function with the jQuery function.
Hope this makes sense - Any help
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$('.button').click(function(){
var text = $('#text').val();
var size = $('#size').val();
var font = $('corbelb.ttf');
//alert(text);
//alert(size);
//
var dataString = 'text=' + text + 'size=' + size + 'font=' + font;
$.ajax({
type: 'POST',
url: 'imageftt.php',
data: dataString,
success: function(){
alert()
}
});
return false;
});
});
</script>
</head>
<body>
<div id="wrap">
<form action="" method="">
<select name="text" id="text">
<option value="<?php echo $_POST['text'];?>">Text</option>
<option value="ABCDEFGHJIKLMNOPQRSTUVWXYZ">ABCDEFGHIJKLMNOPQRSTUVWXYZ</option>
<option value="abcdefghijklmnopqrstuvwxyz">abcdefghijklmnopqrstuvwxyz</option>
<option value="0123456789">0123456789</option>
</select>
<select name="size" id="size">
<option value="<?php echo $_POST['size'];?>">Size</option>
<option value="72">72</option>
<option value="84">84</option>
<option value="96">96</option>
<option value="108">108</option>
</select>
<input type="submit" name="submit" class="button" value="Set →" />
</form>
<div id="top">
<?php
$theFont="corbelb.ttf";
if(!empty($_POST['submit'])){
$myText = $_POST['text'];
$mySize = $_POST['size'];
echo '<img src="imageftt.php?text='.$myText.'&size='.$mySize.'&font='.$theFont.'">';
}
?>
</div>
</div>
</body>
</html>
* UPDATE *
With help I've got further with this and I'm working on something like the suggestions here, but it still not working
With this code below the values are all alerted correctly but the text doesn't show. A grey box is produced which makes me think it's calling the PHP and the results are returned but the values "var dataString = 'text=' + text + 'size=' + size + 'font=' + font;" are not being sent or received by the php.
<script type="text/javascript" >
$(function(){
$('.button').click(function(e){
e.preventDefault();
var text = $('#text').val();
var size = $('#size').val();
var font = 'corbelb.ttf';
//alert(text);
//alert(size);
//alert(font);
//
var dataString = 'text=' + text + 'size=' + size + 'font=' + font;
$("#top").find("img").remove();
$("#top").append("<img src='imageftt.php?"+dataString+"'/>");
});
});
</script>
You cant do it with ajax. What you should do is just change the image src to the new uri to fit the new font properties and it will download the new image without reloading the whole page.
Something like:
var text = $('#text').val();
var size = $('#size').val();
var font = $('corbelb.ttf');
var dataString = 'text=' + text + '&size=' + size + '&font=' + font;
$('#imageTagId').attr('src', 'imageftt.php?'+dataString);
You can extract the POST data in your target PHP code. The result of the call should be the HTML returned from rendering the PHP.
$.ajax({
type: 'POST',
url: 'imageftt.php',
data: dataString,
success: function(result){
$("#target_div").html(result);
}
});
Edit: Upon further inspection, you don't seem to need AJAX for your purposes here, but if you ever do, this is how you'd do it...
I think there is an easier way:
Collect the form data and change the img source with the new request:
'imageftt.php?text='+newText+'&size='+newSize+'&font='+newFont
I mean the "img" tag will be static.