JavaScript | Suhail Kaleem

JavaScript

“Object expected” error in IE. when using $(document).ready(function()

5

To 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

0

If 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

0

This 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>

Go to Top