0

I am using :empty on a span that is loaded via a jQuery $.post().

In Internet Explorer 11 when the span gets filled the :empty CSS definition is still applied to the span. When I click anywhere in the body of the page, the :empty definition is removed and the page is styled the way it should be.

It seems to work as expected in Chrome.

Is there a way in javascript/jQuery to force IE to remove the :empty pseudo class from the span when the jQuery call completes?

Below is the CSS definition in question;

#widgetContainer span[id^="wdg_"]:empty, .widget_placeholder:empty {
    background-color: #ccc;
    border: 5px dashed #999;
    border-radius: 0px;
    width: 300px;
    line-height: 300px;
    text-align: center;
}

And here is a the javascript function I run to load the "widgets" note: I am using ASP.NET MVC so that is why the load functions first parameter looks a little funky;

function loadWidget(id) {
    var $wdgt = $("<span id='wdg_" + id + "'>");
    $wdgt.appendTo($("#widgetContainer"));
    $wdgt.load('@Url.Action("GetWidget", "Dashboard")', { widgetID: id }, function (data) {
        var init = window["initWidget" + $(this).find("#widgetID").val()];
        if (typeof init === 'function') {
            init();
        }
        $("#widgetContainer").sortable("refresh");
    });
}
Steve0
  • 2,233
  • 2
  • 13
  • 22
  • Can you provide a snippet that demonstrates the issue. – Mr Lister Sep 16 '15 at 17:16
  • You might want to try an old IE repaint hack and see what happens. `$("#widgetContainer").toggleClass("repaint");` – epascarello Sep 16 '15 at 17:28
  • @epascarello, still testing but it looks like the toggle some css or style on the element hack seems to work. If you want to add it as an answer I will mark it as working. – Steve0 Sep 16 '15 at 17:55
  • possible duplicate of [:empty pseudo class issue with added/removed content and sibling combinators](http://stackoverflow.com/questions/22761550/empty-pseudo-class-issue-with-added-removed-content-and-sibling-combinators) – Reyraa Sep 16 '15 at 20:17
  • @alihaghighatkhah, I'm not sure this is a duplicate. The linked question seems to primarily deal with sibling's to to the :empty element. perhaps I could set the element in question to animate, but I think that toggling a class in the javascript already causing the issue makes the most sense. – Steve0 Sep 16 '15 at 21:12

0 Answers0