jquery ajaxSubmit jquery file tree

Question

Hi, I'm using a jquery file tree and I'd like to allow users to upload files to whatever directory they're currently in. I am having an issue binding the form within the tree, though, since the tree is loading dynamically and obviously can't bind a form that doesn't exist. Any ideas would be greatly appreciated!

Answer 1

Hi, same problem here :

I can upload a file with this setup :

• the "form.js" jQuery Form plugin script

http://jquery.malsup.com/form/jquery.form.js?2.33

• the "files.php" which upload my files and print a validation message

...

move_uploaded_file($_FILES["file"]["tmp_name"], $_POST
["destinationpath"].$_FILES["file"]["name"]);
echo ($_POST["destinationpath"].$_FILES["file"]["name"]);

...

• an "index.php" with html upload form and a div who receive the message.

...

<form id="upload" action="files.php" method="POST" enctype="multipart/
form-data">
  <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
  <input type="hidden" name="destinationpath" value="/path/" />
  <input type="file" name="file" />
  <input type="submit" value="Upload" />
</form>
<div id="output"></div>

...

• my script to manage the upload :

...

$('#upload').bind('submit', function() {
  $(this).ajaxSubmit({
    target: '#output',
    url: 'files.php',
    beforeSubmit: clearOutput,
    success:      writeOutput
  });
  return false;
});

...

It works, I mean "files.php" is called, the file is uploaded and I stay on the "index.php" which receive the message.

Well, now I want to insert the html form on a node of the file tree. Same setup, except I got a js script where I create nodes : ...

$node.append('<form id="upload" action="files.php" method="POST" ...
same form as above ... </form><div id="output"></div>');

...

Every thing works fine, my form appears on the tree, my file is uploaded, I got the message BUT on "http://address/files.php" (which contains only the message...) instead of staying on "http://address/index.php" whith a container filled with files.php result. It seems like my $('#upload').bind() isn't triggered.

How can I use live event to manage this case, if live event is the answer ?

Thanks.

edit : on live() event doc : "Currently not supported: ...submit"