JQuery $ .html makes div empty

Question

I make the site mainly to improve coding, but recently I had a problem and I can’t figure out how to solve it.

code:

$("#user-admin-notification-area").blur(function() {
   alert(events[__event].text);
   if(this.value == '')
      $ePreview.html(events[__event].text);
   $ePreview.html(this.value);
});

The code above sets the $ePreviewhtml for the empty string instead of the actual expected html, while the warning gives the correct output ... I tested the same code in the console, but it is fine there. (by the same code, I mean $ePreview.html(events[__event].text).

Events Value:

[
    {
        "id": "2",
        "name": "pozostały czas",
        "start": "0000-00-00 00:00:00",
        "end": "2016-01-31 23:59:59",
        "text": "<b>Uwaga!</b> Jeszcze <span data-end=\"1451606399\" data-reload=\"false\"></span> do końca składania zgłoszeń! Śpiesz się!",
        "type": "5",
        "closeable": "1"
    },
    {
        "id": "3",
        "name": "test",
        "start": "0000-00-00 00:00:00",
        "end": "0000-00-00 00:00:00",
        "text": "I should NOT be displayed! :)",
        "type": "5",
        "closeable": "1"
    },
    {
        "id": "4",
        "name": "test #2",
        "start": "2015-11-08 23:59:59",
        "end": "2015-11-30 23:59:59",
        "text": "Hi m8!",
        "type": "5",
        "closeable": "0"
    }
]

Answer 1

Your code does not make sense. If this.valueempty, you set html to events[__event].text, but then you return an empty value in the next line ( $ePreview.html(this.value);). It should be something like:

$("#user-admin-notification-area").blur(function() {
   alert(events[__event].text);
   if(this.value == '')
      $ePreview.html(events[__event].text); 
   else 
      $ePreview.html(this.value);
});