Dynamic image generation

[eluser]Mat-Moo[/eluser]
I've got a basic form with a couple of text fields that the user can enter text, and a routine that takes the text and turns it into an image. I've been trying to figure out how make this a ajax type thing so that they can click a preview button, and a new image is drawn on the screen... but I'm stumped. I need to send the form data via post and tried jquery / ajax / post but I can't figure out how to actually update the image. I've also tried just having an iframe and updating that, but for some reason this screws up my session data and after a couple of minutes of inactivity I get logged out (Site works fine otherwise)....

I hope someone can give me some clues/pointers, or code to hepl me out!

TIA

[eluser]vitoco[/eluser]
with jquery
- first, you must have a div to load the image, for example

Code:

<div id="dynamic_image"></div>

- second , from jquery, you must "load" the image sending the text as parameter

Code:

[removed]
$(document).ready( function()
{
    $('#button_submit').click( function(e)
    {
        // get text
        var text_to_image = $('#input_with_text').attr('value');
        // call LOAD method on #dynamic_image
        $('#dynamic_image').load(
            "file_to_create_the_image.php",
            {text_to_image: text_to_image },
            function()
            {
                alert("The image has been loaded"); //LIKE 'the bomb has been planted..' XD
            }
        );
    });
});
[removed]

- third , the "file_to_create_the_image.php" file must return valid xhtml with the image code, like :

Code:

<img src="/images/temp/XXXXX.gif"/>

Saludos

[eluser]Mat-Moo[/eluser]
So in the dynamic image create I can't just send the output of the generated file? This is what I was trying to avoid, otherwise I've pretty much done exactly what you said.

Thanks for the input!

[eluser]vitoco[/eluser]
ok...if you're using the jquery form plugin, after the server send the response, you may update the image by "reloading" their source attribute, and in order to this work over the cache, add a random number to the end, like this

Code:

...
   after : function(response)
   {
      $('#img_to_update').attr( 'src' , '<?=base_url().'path/to/image/image.gif?XXXXXXX';?>');
   }
   ...

Saludos

[eluser]Mat-Moo[/eluser]
Same thing no? Still got to create the image in "file_to_create_the_image.php" which has the post data?

[eluser]vitoco[/eluser]
[quote author="Mat-Moo" date="1271685584"]Same thing no? Still got to create the image in "file_to_create_the_image.php" which has the post data?[/quote]

Obviously, in order to "preview" the image, you must create it in the server according to the values passed thought the form via ajax, and then load that image in the client, either loading html code o refreshing the source attribute, that's what you need to ( and want to ) do??? , if not, i didn't understand your approach.

[eluser]Mat-Moo[/eluser]
I guess I'll have to create and cache the dynamic image, I was tring to send the image straight back with header/ImageJpg, but I can't see how I can get that to work.

[eluser]Mat-Moo[/eluser]

Code:

set_message("ok","Creating preview, please wait...");
$.ajax({
    'type' : 'post',
    'dataType' : 'text',
    'data' : {
        'font' : $('#font').val(),
        'topline' : $('#topline').attr('value'),
        'topcolour' : $('#topcolour').attr('value'),
    },
    'url' : '<?=site_url("/photos/jquery_make_preview")?>',
    'success' : function(afile) {
        $('#dynamic_image').html("<img src='"+afile+"' />");
        clear_message();
    }

Ended up using this, pretty much the same thing, afile is returned with a ?uniquenumber to stop cacheing issues. Thanks for your pointers, mose helpful, just a shame I couldn't do this without saving to disk.

[eluser]vitoco[/eluser]
i just realize what you were trying to do, and maybe this may work;

Code:

...
// ENCODE TEXT TO SEND IT IN URL
var text = encode( $('#text_inside_img').attr('value') ) ;
// CHANGE THE SOURCE OF THE IMG WITH THE URL OF THE METHOD + TEXT
$('#img_to_update').attr('src', '<?=base_url().'controller/method/'?>'+text );
...

And in the controller/method , first , get the text to render in the image from uri_segments , then return the image with the image/jpg header.

Saludos

[eluser]Mat-Moo[/eluser]
I thought about using get, but the text could contain ? & or anything which could cause issues with CI, hence why using post.