Perfect MVC code

Problem
The select object's value property doesn't give the selected value

Browser
Internet Explorer

Example
The select drop down:
[HTML]<select name="test" id="test">
<option>1
<option>2
</select>[/HTML]
The Javascript code:

Expand|Select|Wrap|Line Numbers

var selObj = document.getElementById("test");
var val = selObj.value;

Solution
Give values to the option elements:
[HTML]<select name="test" id="test">
<option value="1">1
<option value="2">2
</select>[/HTML]
Alternative Solution
Change the Javascript to:

Expand|Select|Wrap|Line Numbers

var selObj = document.getElementById("test");
var val = selObj.options[selObj.selectedIndex].text;

acoder

The table row not getting added to the table in IE is a common problem. Well, here's the answer: add it to the tbody instead. Who would've thought IE would be so rigid?

acoder

Two more bugs for IE's buggy (i.e. non-standard) implementation of the select element's add() method.

acoder

IE doesn't respect "checked" property when dynamically adding checkboxes. Added to the list.

acoder

Opera has a quirk relating to onload and onunload which may catch some people out. It's useful to know in case you have some functionality which is triggered by one of these two events. Oh yes, and two more IE bugs with many more to follow I'm sure.

cheogt

Problem
Not possible to prototype the Object() object
Browser
Internet Explorer
Example
The Javascript code:

Expand|Select|Wrap|Line Numbers

//create an Alias (via protoype) for getElementById, or getElementByTagName
Object.prototype.byTag=Object.prototype.getElementsByTagName;
t=document.byTag('input');

Some relevant HTML:

Expand|Select|Wrap|Line Numbers

<input id="anyName1" type="text" ...>
<input id="anyName2" type="text" ...>

Solution
Create a simple function, and use the object as parameter (not nice!)... :

Expand|Select|Wrap|Line Numbers

function byTag(o,s) {
  return o.getElementsByTagName(s)
}
t=byTag(document,'input');

acoder

Problem
Not possible to prototype the Object() object

Yes, but is it such a good idea? See Object.prototype is verboten (I don't know where the fascination with German words started!)

hsriat

Problem
Not able to use innerHTML for a dynamically created row.

Browser
Internet Explorer

Example

Expand|Select|Wrap|Line Numbers

var rowX = tableObject.insertRow(tableObject.rows.length);
rowX.innerHTML = '<td id="td01" class="cells" onclick="doSomething()">This is the cell</td>';

Solution
Use insertCell()

Expand|Select|Wrap|Line Numbers

var rowX = tableObject.insertRow(tableObject.rows.length);
var cellX = rowX.insertCell(0);
cellX.id = "td01";
cellX.className = 'cells';
cellX.onclick = function () {
    doSomething()
}
cellX.innerHTML = 'This is the cell';

acoder

Problem
Not able to use innerHTML for a dynamically created row.

Spot on. However, if you're going to use insertRow(), most likely you'd use insertCell too. Good to know all the same. Thanks.

acoder

Split out each one into their own page. Easier to read and link to.

Perfect MVC code

Monday, 18 March 2013

Tips and tricks

No comments:

Post a Comment

Angular Tutorial (Update to Angular 7)

Search This Blog