SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Translating Javascript to Jquery

    Can anyone help me convert this line of code to jquery?
    Code:
    $(fileObj.name).innerHTML += "<br clear='left' /><input type='hidden' name='file_"+this.count+++"' value='"+fileObj.name+"' /> ";

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    $(fileObj.name).append(["<br clear='left' /><input type='hidden' name='file_",this.count++,"' value='",fileObj.name,"' /> "].join(""));
    var me = null;

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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,"' /> "]);

  4. #4
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    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 +="
    var me = null;

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow

    Here's another line that I want to translate:

    Code:
    $(fileObj.name).className = "uploadDone";
    Here's what I've tried and it doesn't work.

    Code:
    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?

  6. #6
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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")
    var me = null;

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">...

  8. #8
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    $(fileObj.name).className = "uploadDone";
    That will remove any current class and make it "uploadDone" all in one step rather than using removeClass() and addClass()
    var me = null;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •