Question

I am new to Jquery. I have an upload form that when something is uploaded the upload-button changes class from:

<a class="upload-button upload buy" id="upload-button"><span>Upload a document</span></a>

To:

<a class="upload-button buy white" id="upload-button"><span>Upload a document</span></a>

I have tried to write a function that adds a div called ‘done’ if a file has already been uploaded(the class in the button has changed).

Here is what I have got so far:

$('a#upload-button').ready(function() {
            if ($(this).hasClass('white')) {
                $('#three')
                    .append('<div class="done rotateone wiggler"></div>')
                    .addClass('grey');
        }
        })

I am not sure why it is not working. Please could somebody help?

Answer 1

You should do (if you want to check if a button has a class when the page is loaded, otherwise just take the if part and put it where you need it

//this is a shorthand methot for $(document).ready() 
//you should use this to wait for the dom to load
$(function(){
 //if the link has the class
  if($('a#upload-button').hasClass('white')){
     //append the button
     $('#three')
        .append('<div class="done rotateone wiggler"></div>')
        .addClass('grey');
  }
});

EDIT – you should modify your script

function verifyFileUploadState(up) {
    if ($(".file-title").length == 0) {
        $("#upload-button span").html("Upload a document");
        $("#upload-button").addClass("upload");
        $("#upload-button").removeClass("white");
    } else {
        $("#upload-button span").html("Upload another document");
        $("#upload-button").removeClass("upload");
        $("#upload-button").addClass("white");
         $('#three')
            .append('<div class="done rotateone wiggler"></div>')
            .addClass('grey');
    }
    up.refresh();
}