3

I'am doing some form validation and noticed that Internet Explorer don't works correctly (as always). If I attach some text and CSS into a div-element and delete it again (when the input is ok) the Explorer doesn't correct the display again. I mean the text gets deleted, but there still remains a blank row (as if there is br-element). I've checked the source-code and the CSS was deleted correctly, but the display isn't correct. Why?

Other browsers have no problems.

    if(bla)
    { 
      $("div[bez='avz_kw_err']").eq(index).html("Mindestens 3 Zeichen"); 
      $("div[bez='avz_kw_err']").eq(index).attr("style","color:red; font-size:12px; line-height:12px; position:relative; top:5px; left:25px;");
    }
    else
    { 
      $("div[bez='avz_kw_err']").eq(index).html(""); 
      $("div[bez='avz_kw_err']").eq(index).attr("")
    }
Improve this question

2 Answers 2

Reset to default
4

Don't use ".attr()" to set the style property with jQuery 1.6 or newer. Use ".prop()" instead:

$("div[bez='avz_kw_err']").eq(index).prop("")

The "style" property is a property. IE is very picky about the difference. Use ".prop()" for anything that, when dealing directly with the DOM element un-wrapped by jQuery, you'd treat as an ordinary property of the object: "name", "id", "className", "tagName", etc.

edit because I'm slow this evening — that said - and it's all true - the "style" property in particular is not a string-valued property. It's an object in its own right, and setting it to "" doesn't really make sense (to Firefox or IE). But you can zap all the CSS properties:

$("div[bez='avz_kw_err']").eq(index).each(function() {
  for (var cssp in this.style) {
    this.style[cssp] = '';
  }
});

edit again — hey gang stop upvoting me until I figure out the right answer - this may not work in IE ...

edit boy is IE weird ... OK in IE8 this works:

$("div[bez='avz_kw_err']").eq(index).each(function() {
  for (var cssp in this.style) {
    try { this.style[cssp] = null; } catch (who_cares) {}
  }
});

It's apparently important to use null instead of the empty string; at some point setting something to the empty string caused IE to seize up and spin the CPU for a few seconds.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Had no effect. But this seems like something which I should keep in mind. Thanks.
Really?? No effect at all? Are you sure the selector is working, etc? The underlying issue is that jQuery (since version 1.6 - are you using something older?) uses the "setAttribute()" native DOM method for ".attr()", and IE treats that as a completely separate namespace from the properties on a DOM element object.
OK answer updated. Sorry for wasting your time :-). Also thanks for accepting anyway :-)
Crap except that STILL doesn't work in IE. I'm starting to agree with your assessment of IE and its developers. Hold on a sec and I'll see if I can find the answer ...
OK I updated it again. Tonight I learned another reason to dislike Internet Explorer :-)
|
1

Using .attr("") won't delete the style, as you haven't specified what attribute to change. Use .attr("style", "") to clear the style attribute.

Demo: http://jsfiddle.net/Guffa/tvL42/2/

Side note: You don't need to create a new jQuery object to set the HTML and the style, just chain the calls:

if(bla) { 
  $("div[bez='avz_kw_err']").eq(index)
    .html("Mindestens 3 Zeichen") 
    .attr("style","color:red; font-size:12px; line-height:12px; position:relative; top:5px; left:25px;");
} else { 
  $("div[bez='avz_kw_err']").eq(index)
    .html("") 
    .attr("style", "");
}
Improve this answer

3 Comments

Right, thanks. But it also doesn't solve the problem. Also thanks the side note.
Ok, then try to hide the entire element instead of just emptying it: $("div[bez='avz_kw_err']").eq(index).hide();
Wooow!! It f***ing works this way. Can't believe it, thanks :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.