Jquery Using Jcrop Question

JavaScript
1

Hello

I am just learning about jquery so I am not even sure if I am going in the right direction.

I am using DOM to load an image. This works fine. The code is

<script language=‘javascript’>
function imageProcess()
{
//alert(“You Have Reached The imageProcess() Function”);

selectDiv = document.createElement('div');
selectDiv.setAttribute('id', name);
selectDiv.setAttribute('name', name);
selectDiv.style.position = 'absolute';
selectDiv.style.left = '250px';
selectDiv.style.top = '250px';
selectDiv.style.height = '210px';
selectDiv.style.width = '523px';
selectDiv.style.backgroundColor = '#cc0000';
selectDiv.style.border='1px solid #000000';

imageDiv = document.createElement('div');
imageDiv.setAttribute('id', 'menu_image');
imageDiv.setAttribute('name', 'menu_image');
imageDiv.style.position = 'absolute';
imageDiv.style.left = '0px';
imageDiv.style.top = '-225px';
imageDiv.style.height = '300px';
imageDiv.style.width = '300px';
	
button_one = document.createElement('input');
button_one.setAttribute('id', 'image_name');
button_one.setAttribute('name',  'image_name');
button_one.setAttribute('type', 'file');
button_one.style.position = 'absolute';
button_one.style.left = '20px';
button_one.style.top = '70px';
//button_one.setAttribute('value', 'Load Image');
button_one.style.width = '140px';
//button_one.onclick = function(){imageProcessing()};

button_two = document.createElement('button');
button_two.setAttribute('id', 'button_two');
button_two.setAttribute('name',  'button_two');
button_two.setAttribute('type', 'button');
button_two.style.position = 'absolute';
button_two.style.left = '80px';
button_two.style.top = '170px';
button_two.setAttribute('value', 'Load Image');
button_two.style.width = '140px';
button_two.onclick = function(){imageProcessing()};

selectDiv.appendChild(button_one);
selectDiv.appendChild(button_two);
selectDiv.appendChild(imageDiv);

selectDiv.style.visibility = 'visible';
document.body.appendChild(selectDiv);
}

I then use a function to display the image. This also works fine. The code is
function imageProcessing()
{
//alert(“You Have Reached The imageProcessing() Function”);
//alert("Image Name = " + document.getElementById(“image_name”).value);

	document.getElementById("menu_image").innerHTML = '&lt;img id="target" width="200px" height="200px" src = "' +
           document.getElementById("image_name").value + '"&gt;';
}

Now I want to use a jquery plugin, jcrop, to crop the image. In a very simplified form the code is
$(function(){ $(‘#target’).Jcrop(); });

and yes I am loading the requesite js and css files.

I can make the thing work if I use a htm file already containing the image and a script for the jcorp functionality, but I cannot get it to work if I use the script to do the downloading.

I have tried using

&lt;script language='javascript'&gt;
jQuery(document).ready(function($) {
$(function(){ $('#target').Jcrop(); });
});
&lt;/script&gt;

and other variations but I fail. I suspect that I may have a problem in that the image id does not yet exist when the file is first opened.

Am I sort of approaching this in the right way or am I barking up the wrong tree.

Any thoughts world be greatly appreciated.

Thank you