JavaScript
“Object expected” error in IE. when using $(document).ready(function()
5To fix this
check the jquery script tag , if it is like
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
replace it like
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
and the error goes away
why IE gives the error on type=”text/javascript” i really do not know
if any one know the reason do let me know
jquery .click does not work
0If you are adding a html dynamically and then binding the .click event of an element then this will not work
the .click event will never bind
in order to make the events works for the dynamic html or elements use .live like below
$('#ElementID').live('click', function (event) {
if (event.button != 0) {
// left button - ignore it
return true;
} else {
//right button
var id = $(this).attr('id'); // do something
return false; // "capture" the click
}
});
Also you might have noticed that i have a check to see which button was clicked , because in .live method left and right mouse buttons both bind to click event unlike the .click event only right button is bind so we have to check in .live which button was clicked
Dynamically Add and Remove HTML elements works with IE & firefox
0This how to add HTML elements and also assign different attributes to it
first we will create a div then add two text boxes with 1 delete button
when you click delete button it will remove only that div including all HTML elements in it
also it does not use removeNode because it was not working with Firefox only IE so i had to re write the code to work with both major browsers i have not tested with safari or opera but it should work with them also
first we create a HTML div box with two text boxes and 1 add button
<div id=”pdiv” class=”MiddleBox”>
<div id=”div1″>
<div class=”LeftColumn”>
txt1 : <input id=”txtRecName1″ name=”txtRecName1″ type=”text” class=”textboxsty” />
</div><div class=”RightColumn”>
txt2 : <input id=”txtRecEmail1″ name=”txtRecEmail1″ type=”text” class=”textboxsty” /></div>
then we create a container variable which holds the value of parent div elements in this case it is “pdiv”
var container = document.getElementById(‘pdiv’);
then we create another div with in the parent div elements and assigned it a ID
var div = document.createElement(“DIV”);
div.id = “div” + textId;
then we created three divs one for left textbox one for right textbox and one for the delete button also assigned id’s and class to it and added all three divs to “div” like this
var div1 = document.createElement(“DIV”);
div1.id = “DIV1-” + textId;
div1.innerHTML = “txt1 : “;
var first = document.createElement(“INPUT”);
first.setAttribute(“NAME”, “txtRecName” + textId);
first.className = ‘textboxsty’;
div1.appendChild(first);
div1.className = ‘LeftColumn’;var div2 = document.createElement(“DIV”);
div2.id = “DIV2-” + textId;
div2.innerHTML = “txt2 : “;
var middle = document.createElement(“INPUT”);
middle.setAttribute(“NAME”, “txtRecEmail” + textId);
middle.className = ‘textboxsty’;
div2.appendChild(middle);
div2.className = ‘RightColumn’;var btn = document.createElement(“INPUT”);
btn.type = “button”;
btn.value = “Delete”;
btn.className = ‘button1’;btn.onclick = new Function(“removeElement(” + div.id + “);”);
var div3 = document.createElement(“DIV”);
div3.id = “DIV3-” + textId;
div3.className = ‘RightColumn’;
div3.appendChild(btn);div.appendChild(div1);
div.appendChild(div2);div.appendChild(div3);
and then finally added the sub div “div” to the parent “pdiv” container
container.appendChild(div);
also the delete button had a remove element function which is
function removeElement(divNum) {
var Node1 = document.getElementById(‘pdiv’);
Node1.removeChild(divNum);
}
complete HTML page will be
<html>
<head>
<title>Test Page</title>
<style type=”text/css” >.LeftColumn
{
float:left;
padding-right: 5px;
padding-left: 5px;
}.RightColumn
{
float:left;
padding-left: 15px;}
.MiddleBox
{
text-align:left;
float: left;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-top-style: solid;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-width: 1px;
border-right-color: #808080;
border-bottom-color: #808080;
border-left-color: #808080;
border-top-color: #808080;
padding: 7px;
width:490px;
font-family:Verdana;
font-size: 12px;
}
.textboxsty {
border:1px solid #CCCCCC;
BORDER-RIGHT: #CCCCCC 1px solid;
BORDER-TOP: #CCCCCC 1px solid;
FONT-SIZE: 12px;
BORDER-LEFT: #CCCCCC 1px solid;
BORDER-BOTTOM: #CCCCCC 1px solid;
FONT-FAMILY: Verdana;
BACKGROUND-COLOR: #ffffff;
}.button1 {
border: 1px solid #ffffff;
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
CURSOR: hand;
BACKGROUND-COLOR: #f0f0f0;
font-family:Verdana;
color:#111111;
height: 18px;
}</style>
<script language=”JavaScript” type=”text/javascript”>
var textId = 2;
function addInput() {
var container = document.getElementById(‘pdiv’);var div = document.createElement(“DIV”);
div.id = “div” + textId;var div1 = document.createElement(“DIV”);
div1.id = “DIV1-” + textId;
div1.innerHTML = “txt1 : “;
var first = document.createElement(“INPUT”);
first.setAttribute(“NAME”, “txtRecName” + textId);
first.className = ‘textboxsty’;
div1.appendChild(first);
div1.className = ‘LeftColumn’;var div2 = document.createElement(“DIV”);
div2.id = “DIV2-” + textId;
div2.innerHTML = “txt2 : “;
var middle = document.createElement(“INPUT”);
middle.setAttribute(“NAME”, “txtRecEmail” + textId);
middle.className = ‘textboxsty’;
div2.appendChild(middle);
div2.className = ‘RightColumn’;var btn = document.createElement(“INPUT”);
btn.type = “button”;
btn.value = “Delete”;
btn.className = ‘button1’;btn.onclick = new Function(“removeElement(” + div.id + “);”);
var div3 = document.createElement(“DIV”);
div3.id = “DIV3-” + textId;
div3.className = ‘RightColumn’;
div3.appendChild(btn);div.appendChild(div1);
div.appendChild(div2);div.appendChild(div3);
var mdiv = document.createElement(“DIV”);
mdiv.id = “mdiv” + textId;
mdiv.setAttribute(“style”, “clear:both;height:10px”);div.appendChild(mdiv);
container.appendChild(div);
textId++;
}function removeElement(divNum) {
var Node1 = document.getElementById(‘pdiv’);
Node1.removeChild(divNum);
}
</script>
</head><body>
<form >
<div id=”pdiv” class=”MiddleBox”><div id=”div1″>
<div class=”LeftColumn”>
txt1 : <input id=”txtRecName1″ name=”txtRecName1″ type=”text” class=”textboxsty” />
</div><div class=”RightColumn”>
txt2 : <input id=”txtRecEmail1″ name=”txtRecEmail1″ type=”text” class=”textboxsty” /></div>
<div class=”RightColumn”>
<input type=’button’ value=” Add ” onclick=”addInput();” class=”button1″ />
</div><div style=”clear:both; height:10px;” id=”mdiv1″></div>
</div>
</div>
</form></body>
</html>
Recent Comments