jQuery, Ajax, PHP Function

ttmt · December 7, 2011

Hi all

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.

http://www.ttmt.org.uk/

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 would be greatly appreciated.

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>

Sign In

jQuery, Ajax, PHP Function

Recommended Posts

ttmt

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information