Trigger jQuery function after submit

Question

I need to trigger a function after the submit function has been executed. In the first PHP file I choose an image, after this it calls the second file which echos the image and some input elements after the upload. At this point I also want a colopicker. The code I'm using I found here. The code in the first file is:

<script type="text/javascript" >
 $(document).ready(function() { 
 $('#photoimg').live('change', function() { 
 $("#preview").html('');
 $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
 $("#imageform").ajaxForm({
 target: '#preview'
 }).submit();
 $('#color1').colorPicker();
 });
 }); 
</script>

The file which is called echos then the image, which is showed in the first file in the div element "preview".

echo "<img src='uploads/".$actual_image_name."' class='preview'><br />";
echo "<input id='color1' type='text' name='color1' value='#333399' />;

At the moment it calles the colorpicker function before the elements are echoed.how can i let it run after it is all echoed? Thanks for any help!

Answer 1

Try moving the .colourPicker() initialisation inside the success callback of the ajaxForm plugin. This will then be exectued after the AJAX request has completed:

$(document).ready(function() { 
 $('#photoimg').live('change', function() { 
 $("#preview").html('');
 $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
 $("#imageform").ajaxForm({
 target: '#preview',
 success: function() {
 $('#color1').colorPicker();
 }
 }).submit();
 });
});