Skip to content

Instantly share code, notes, and snippets.

@FND FND/testcase.html
Created Jul 12, 2011

Embed
What would you like to do?
IE7 .clone issue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Case</title>
<style>
#notify {
border: 1px solid #318210;
padding: 5px;
background-color: #C0FAB4;
}
</style>
</head>
<body>
<a href="javascript:;" id="recheck">re-check</a>
<a href="javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&amp;&amp;F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');">Firebug Lite</a>
<h1>Instructions</h1>
<ol>
<li>
click <em>Add Note</em>; observe the notification box reporting the
expected values for the newly created <code>textarea</code>'s
<code>id</code> and <code>name</code> attributes
</li>
<li>
repeat the previous step three times
</li>
<li>
click <em>re-check</em> to check the values for the third note,
independent of the dynamic-creation process - note that the
notification box now reports the expected <code>id</code>, but the
<code>name</code> attribute uses an unexpected index; that of the
very last note element
</li>
<li>
repeat the first step
</li>
<li>
repeat the third step, observing the same erroneous behavior
</li>
<li>
activate <em>Firebug Lite</em> to inspect the DOM, confirming that
the <code>name</code> attribute of all <code>textarea</code>s is
identical
</li>
</ol>
<p id="notify"></p>
<form action="#" method="get">
<fieldset>
<legend>My Notes</legend>
<ol>
<li>
<textarea name="foo0bar" id="foo0bar"></textarea>
</li>
</ol>
<input type="button" value="Add Note">
</fieldset>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>
(function($) {
var noteCount = $("fieldset li").length;
var debug = function(args) {
var msg = Array.prototype.join.call(arguments, " || ");
$("#notify").text(msg);
};
var addNote = function(ev) {
var container = $(this).closest("fieldset");
var template = $("ol li:last-child", container);
noteCount++;
var id = "foo" + (noteCount - 1) + "bar";
var clone = template.clone(true, true);
clone.find("textarea").val("").attr("id", id).attr("name", id);
$("ol", container).append(clone);
var el = $("ol li:last-child textarea", container);
debug("#" + noteCount, el.attr("id"), el.attr("name"));
return false;
};
$(document).ready(function($) {
$("input").click(addNote);
$("#recheck").click(function(ev) {
var el = $("ol li textarea").eq(2);
debug("3rd note", el.attr("id"), el.attr("name"));
});
});
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.