Mixing
add an alert if div is empty
add an alert if div is empty
I have this code and it works:
$(document).ready(function() {
$('#textDiv:empty').hide();
});
But I want to add a jquery function in case the div #textDiv is not empty. I want to add an alert if it is not empty. I tried this code without success.
#textDiv
$(document).ready(function(){
if ( $('#textDiv').text().length == 0 ){
alert ("please add players below");
}
});
What is the cleanest way to do this?
@ThisGuyHasTwoThumbs
$('#textDiv').text().length, I assume it's text– Alex
Jun 29 at 11:12
$('#textDiv').text().length
But in his first code that 'works' he used
:empty which is for HTML– Rehban Khatri
Jun 29 at 11:13
:empty
OP:
$('#textDiv:not(:empty)') is CSS pseudo-selector for non-empty divs– Alex
Jun 29 at 11:13
$('#textDiv:not(:empty)')
the div is sometimes empty of text.
– verlager
Jun 29 at 11:13
5 Answers
5
you need to use the text() text function to get the html/text inside the div
text()
$(document).ready(function(){
if ($('#textDiv').text() == '') // Change the condition for emapty and not empty
{
alert ("please add players below");
}
});
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
you should add an explanation so OP understands the issue and knows how to avoid in future. Avoids a copy/paste generation of coders
– ThisGuyHasTwoThumbs
Jun 29 at 11:16
Yes @ThisGuyHasTwoThumbs added will add more in details
– DsRaj
Jun 29 at 11:19
Consider using
.text() instead of .html()– Yuri
Jun 29 at 11:20
.text()
.html()
@Yuri Ohhh Yes, Updated
– DsRaj
Jun 29 at 11:24
The result of the .text() method is a string containing the combined text of all matched elements. It is different from the .html() functions. Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.
You are better off with creating a function which checks if the div has any html or not and return true or false respectively.
(function($){
jQuery.fn.checkEmpty = function() {
return !$.trim(this.html()).length;
};
}(jQuery));
Use :
On document ready, call this function with your div and it would alert according to the condition.
$(document).ready(function(){
if($("#selector").checkEmpty()){
alert("Empty");
}else{
alert("Not Empty");
}
});
$(document).ready(function(){ if ( $('#textDiv').html() == 0 ) {alert ("please add players below");} });
– Joseph Stalin
Jun 29 at 11:15
you should add an explanation so OP understands the issue and knows how to avoid in future. Avoids a copy/paste generation of coders
– ThisGuyHasTwoThumbs
Jun 29 at 11:16
You can use CSS Pseudo-Classes to access items in jQuery:
CSS Pseudo-Classes
jQuery
if ($('.textDiv:empty')) {
alert('First Empty');
}
if ($('.textDiv:not(:empty)')) {
alert ("Second not Emptynplease add players below");
}
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
Empty : No child elements
<br>
Not Empty : Has child elements
Check length before hide else alert.
length
hide
if ($('#textDiv:empty').length !== 0)
$('#textDiv:empty').hide();
else
alert ("please add players below");
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
Test Contain For AlertMaybe like this:
$(document).ready(function(){
if (!$('#textDiv').text().length){
alert ("please add players below");
}
});
https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
empty div regarding html? or empty div regarding text?
– ThisGuyHasTwoThumbs
Jun 29 at 11:12