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>
-
1You really don't need AJAX for this. Just use something like $('#preview').attr('src', 'imageftt.php?text=' + text + '&size' + size ......Vladimir– Vladimir2011年12月07日 14:10:26 +00:00Commented Dec 7, 2011 at 14:10
-
Vladimir is correct. Unless you're doing some server-side logic with the content you want to insert, you can just use simple jQuery to change the content.U-DON– U-DON2011年12月07日 14:13:03 +00:00Commented Dec 7, 2011 at 14:13
3 Answers 3
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);
2 Comments
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.
Comments
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...