Adding the first file, nothing appears, but adding subsequent files adds them to the list

[GoogleCodeExporter]

What steps will reproduce the problem?
What is the expected output? What do you see instead?

I'm populating a jQuery dialog box with xhtml obtained via AJAX.  So I'm using 
the following code instead of the onReady code in the sample.

jQuery("#files").live("change", function() {
  jQuery("#files").MultiFile({
    STRING : {
      remove : "<div class='trash'>&nbsp;</div>"
    }
  });
});

This div is a child of the form returned in the AJAX call
    <div class="file-upload graybox" id="file-upload">
      <label>FILES</label>
      <input type="file" class="multi" name="files" id="files"/>
      <div id="file-upload-list"></div>
    </div>

When I add the first file, nothing appears, but adding subsequent files adds 
them to the list.

What version of the plugin/jQuery are you using?
PLUGIN VERSION:1.4.2
JQUERY VERSION:1.47

On what browser(s) or operating system?
BROWSER(S): OS X Firefox 7

Original issue reported on code.google.com by joe...@gmail.com on 17 Nov 2011 at 8:32

[GoogleCodeExporter]

I can see from your code that this code:
jQuery("#files").MultiFile({...})

...only executes when the "change" event is triggered in the #files element.
This is not a bug, it's an error in your implementation.

You need to run:
jQuery("#files").MultiFile({...})

...immediatelly after the ajax call completes and you add the new elements to 
DOM.

Original comment by diego.a...@gmail.com on 17 Nov 2011 at 9:05

• Changed state: Invalid

[GoogleCodeExporter]

I apologize for reporting that as a bug.  Your response makes complete sense.  
I'm not having any luck doing so though.  I'm not getting errors in the 
console, but I assume I'm referencing the node wrong since it's not adding the 
file to the list at all.  I realize this isn't your problem, but if you have 
any quick suggestions what I'm doing wrong, it would be appreciated.

          onSuccess : function(doc) {
//          jQuery("#files", doc).MultiFile({
//          jQuery("#files").MultiFile({
           jQuery("#files").html().MultiFile({
              STRING : {
                remove : "<div class='trash'> </div>"
              }
            });
          }

Original comment by joe@glorioso.org on 18 Nov 2011 at 2:32

[GoogleCodeExporter]

No problem. Where's the rest of the code? it doesn't sound as if onSuccess is 
ever executed. But out of those 3, you will difinitelly want 
jQuery("#files").MultiFile...

Something like this:

$.get('/url/', function(doc){
 $(body).append(doc); // <!-- you have to insert it into the document
 jQuery("#files").MultiFile({...});
});

Original comment by diego.a...@gmail.com on 18 Nov 2011 at 2:49

[GoogleCodeExporter]

I updated my code to reflect your idea with no luck.

onSuccess : function(doc) {
console.log("Returned MS Doc Form.");
jQuery('body').append(doc);
jQuery("#files").MultiFile({
STRING : {
remove : "<div class='trash'> </div>"
}
}); 

The html returned by the ajax call is inserted into a dialog from the jQuery UI 
library.  The chain of calls is a bit convoluted since I'm working within a 
library provided by a software vendor, but below is the main method.  I know 
the onSuccess is being called because it's logged in the console and the form 
is rendered.

issueRestRequest: function(data,options) {
var ajaxOptions = jQuery.extend({silent: true, type:"GET",cache:false},options);
ajaxOptions.url = RSuite.config.restURL + data.rest;
delete data.rest;
ajaxOptions.data = jQuery.extend({skey:RSuite.config.skey},data);
ajaxOptions.caller = jQuery(this);
ajaxOptions.success = RSuite.api.handleAjaxSuccess;
ajaxOptions.error = RSuite.api.handleAjaxError;
ajaxOptions.complete = RSuite.api.handleAjaxComplete;
ajaxOptions.moid = data.moid;
ajaxOptions.dataType = (ajaxOptions.responseIsEmpty || 
ajaxOptions.responseIsText) ? "text" : "xml";
ajaxOptions.cache = false;
//add the skey to the uri if a post or a delete
if(ajaxOptions.type.toLowerCase() == "post" || ajaxOptions.type.toLowerCase() 
== "delete" || ajaxOptions.type.toLowerCase() == "put") {
if(ajaxOptions.url.indexOf("?") > -1)
ajaxOptions.url += "&skey="+RSuite.config.skey;
else
ajaxOptions.url += "?skey="+RSuite.config.skey;
}
//silent will prevent spinner images from showing
if(!ajaxOptions.silent && ajaxOptions.caller && ajaxOptions.caller.length) {
ajaxOptions.caller.loading();
}
if(ajaxOptions.showProgressMeter) {
RSuite.progressMeter({title:ajaxOptions.progressMeterTitle});
}
jQuery.ajax(ajaxOptions);
}

This may not tell the whole story, but I don't expect you to review all the 
code.

Original comment by joe@glorioso.org on 18 Nov 2011 at 3:37

[GoogleCodeExporter]

Please disregard.  I moved this code to somewhere else in the convoluted code I 
mentioned and it's working now.  Thanks for your time.

Original comment by joe@glorioso.org on 18 Nov 2011 at 3:48