.hasClass () in dynamically added class not working
I am currently writing a simple script using jQuery that checks if all files (submitted via AJAX) have loaded correctly before submitting the full form. So the deal is this: when the user drops the image to the browser (drag'n'drop), it is sent to the server using AJAX, and when the download is complete, it just adds the " done " class to some div tag.
So whenever the user throws the image, it adds this kind of div:
<div class="preview">/* blablabla other div and span classes */</div>
And when the download is complete, it looks something like this:
<div class="preview done">/* blablabla other div and span classes */</div>
Everything works like a charm, so here's the interesting part from the form:
<form action="target.php" method="post" enctype="multipart/form-data"
onsubmit="return checkUploadFiles();">
It calls this JS function to prevent submission if all files haven't loaded yet:
function checkUploadFiles(){
$(".preview").each(function(i, val) {
if(!val.hasClass('done')){
alert("Something is not fully uploaded yet, please wait");
return false;
};
});
return true;
};
But ... The form is submitted anyway, even though 15 images are loading right now and 15 div tags that have a .preview class but not a .done class .
I'm sure Iv'e made some stupid mistakes or something I don't know about .each () or .hasClass () , can someone please help?
Thanks in advance!
EDIT . Here's a script adjusted to accommodate two mistakes I made:
function checkUploadFiles(){
var ret = true;
$(".preview").each(function() {
var $this = $(this);
if(!$this.hasClass('done')){
alert("Something is not fully uploaded yet, please wait");
ret = false;
};
});
return ret;
};
source to share
To expand on your comment to provide an alternative to ethan's method, you can simply "jQuerify" the dom element you get in each loop, so your code will look like this:
function checkUploadFiles(){
var isDone = true;
$(".preview").each(function(i, val) {
if(!$(val).hasClass('done')){
alert("Something is not fully uploaded yet, please wait");
isDone = false;
};
});
return isDone;
};
This method is useful if you still need the index value and avoids any confusion this
.
Edited also to solve the problem of returning false in every loop by using a boolean variable instead of hardcoded booleans.
source to share
You are returning false
from each loop, not from the check method, so regardless of the check, it always returns true.
Also val
is a reference to a dom element, not a jQuery object, so it has no method hasClass()
.
function checkUploadFiles() {
if (!$(".preview").not('.done').length) {
alert("Something is not fully uploaded yet, please wait");
return false;
};
return true;
};
source to share
In .each, val
(and this
) is a DOM object, not a jQuery-wrapped object. So you want this instead:
function checkUploadFiles(){
$(".preview").each(function() {
var $this = $(this);
if(!$this.hasClass('done')){
alert("Something is not fully uploaded yet, please wait");
return false;
};
});
return true;
};
It's a good idea to create a variable $this
in case you are doing something in callbacks (because you cannot trust the value this
inside internal functions).
source to share