Translating Javascript to Jquery

[forumposters]

Can anyone help me convert this line of code to jquery?

$(fileObj.name).innerHTML += "<br clear='left' /><input type='hidden' name='file_"+this.count+++"' value='"+fileObj.name+"' /> ";

[jtrelfa]

Here's a fun way to do it. I used an array literal plus the join method to speed up the string concatenation and clear up that messiness with the this.count++ action you're doing.

$(fileObj.name).append(["<br clear='left' /><input type='hidden' name='file_",this.count++,"' value='",fileObj.name,"' /> "].join(""));

[forumposters]

That's interesting that you used the jquery functions append and join. Would that be the same things as this:

$(fileObj.name).appendto(["<br clear='left' /><input type='hidden' name='file_",this.count++,"' value='",fileObj.name,"' /> "]);

[jtrelfa]

Not exactly. The .join() method is built-in to the Array object. Strictly speaking, using an array and joining it is faster than using string concatenation, but only for large amounts of concatenation (http://www.codeproject.com/jscript/stringbuilder.asp). Another way to write what I did would be this:

var dat = [
      "<br clear='left' /><input type='hidden' name='file_",
      this.count++,
      "' value='",
      fileObj.name,
      "' /> "
      ];
$(fileObj.name).append(dat.join(""));

The .append method provided by jQuery adds your HTML fragment at the end of the container rather than using what you originally had with "innerHTML +="

[forumposters]

Here's another line that I want to translate:

$(fileObj.name).className = "uploadDone";

Here's what I've tried and it doesn't work.

jQuery("#"+fileObj.name).removeClass();
jQuery("#"+fileObj.name).addClass("uploadDone");

And, by the way I had to use jQuery.noConflict(); at the top of the page because there was a conflict...

Any ideas on why this jquery code doesn't work?

[jtrelfa]

Where is the # coming from? Are you trying to select an object based on it's ID? Why aren't you using the normal selector:

$(fileObj.name).addClass("uploadDone")

[forumposters]

I'm sorry, you probably need more context. Yes, I'm trying to select an object based on it's id which happens to be the filename of the image that is being uploaded. Here's what the generated HTML is supposed to look like at the end:

<li class="uploadDone" id="imagefilename.jpg">...

And, here is what it should look like before:

<li class="uploading" id="imagefilename.jpg">...

[jtrelfa]

Let me recap:

1. You get a filename from the file input
2. You create a <li> with an id equal to the file name and a classname of "uploading"
3. When you know the file upload is complete, you want to change the class of the <li> to "uploadingDone"

There's no absolute need to use JQuery "style" on this. I think the easiest way to handle this will be with the className property:

$(fileObj.name).className = "uploadDone";

That will remove any current class and make it "uploadDone" all in one step rather than using removeClass() and addClass()