-1

I have a div listOfTodos that is empty by default. No white space inside the html. I also have a textbox that when enter is pressed it appends text to listOfTodos. For some reason is:empty doesn't work and it always says it's empty.

My code for checking is:

if ($('#listOfTodos').is(':empty')) {
    console.log("empty");
} else {
    console.log("not empty");
}

Then above this code I also have:

$("#someTextbox").keypress(function(e) {
        if (e.keyCode == 13) {
            $('#listOfTodos').append('<label>Some text</label>'); } 
});

The label above is saved and is retrieved on every reload. What's going on?

Jamie
  • 371
  • 2
  • 17

2 Answers2

3

Doesn't JS run code from top to bottom? I have the keypress above the if statement inside my js file.

Yes, but the event handler is not executed until the event is triggered, which is not possible until after the whole script executed.

I.e. 

$("#someTextbox").keypress(function(e) {
    if (e.keyCode == 13) {
        $('#listOfTodos').append('<label>Some text</label>');
    } 
});

if (....) { }

will execute the if statement only once after the event handler was bound.

You have to put the if statement inside the handler if you want to run it after the event fired:

$("#someTextbox").keypress(function(e) {
    if (e.keyCode == 13) {
        $('#listOfTodos').append('<label>Some text</label>'); 

        if ($('#listOfTodos').is(':empty')) {
            console.log("empty");
        } else {
            console.log("not empty");
        }
    } 
});

Or put it in a function if you want to run that logic in multiple places:

function isEmpty() {
    if ($('#listOfTodos').is(':empty')) {
        console.log("empty");
    } else {
        console.log("not empty");
    }
}

// run on load
isEmpty();

$("#someTextbox").keypress(function(e) {
    if (e.keyCode == 13) {
        $('#listOfTodos').append('<label>Some text</label>');
        // run on change
        isEmpty(); 
    } 
});
Felix Kling
  • 705,106
  • 160
  • 1,004
  • 1,072
  • Right, but I'd like the `if statement` to run when the page is accessed because I have some information saved and it currently appends to the `listOfTodos` div. So, if there is nothing saved, then `listOfTodos` should be empty and the `if statement` should check that to make sure and send some sort of message... – Jamie Mar 20 '15 at 16:47
  • @Jamie: Then put that logic inside a function and call the function whenever the content could have changed. That's what functions are there for. – Felix Kling Mar 20 '15 at 16:49
0

Use

if ($.trim($('#listOfTodos').text()) == '') {
  alert("empty");
} else {
  alert("not empty");
}

Fiddle

Pratik
  • 10,715
  • 5
  • 33
  • 69
  • Why should they do that? What's is the problem with `:empty`? – Felix Kling Mar 20 '15 at 16:26
  • Curiously I get an error on the first line of `Uncaught TypeError: undefined is not a function` – Jamie Mar 20 '15 at 16:27
  • @FelixKling , if there are whitespaces, `:empty` will still consider Some data is there , so it considers white spaces . So use of trim is proper – Pratik Mar 20 '15 at 16:29
  • @jQuery.PHP.Magento.com: Quoting the OP *"No white space inside the html."* – Felix Kling Mar 20 '15 at 16:30
  • @jQuery.PHP.Magento.com DIdn't work either. Still displayed `empty` even though it wasn't. – Jamie Mar 20 '15 at 16:31
  • @Jamie: Again, please provide a complete example. It's not clear whether the `if` statement is executed *after* the event handler was executed. – Felix Kling Mar 20 '15 at 16:31
  • Doesn't JS run code from top to bottom? I have the `keypress` above the `if statement` inside my js file. – Jamie Mar 20 '15 at 16:33
  • @Jamie: Yes, but the event handler is not executed until the event is triggered, which is not possible until *after* the whole script executed. It seems you have to learn the basics of event handling. – Felix Kling Mar 20 '15 at 16:40
  • I think it is not the answer – Legendary Mar 20 '15 at 16:47