Hi,
While testing my application, I was very happy by getting smooth run on the FireFox and Safari. But when I tested that on IE7.0, I was banged with the error popup-
“Expected identifier or string”
on the very first page of the application. I started trying out putting few alerts on the very first javascript file loaded, but failed. After digging a lot, I found the way to get-rid-of this issue. Here is the soultion-
The problem JavaScript code was-
1 function txtCellEditor(){
2 var txt = new YAHOO.widget.TextboxCellEditor({
3 asyncSubmitter: asyncUpdate,
4 validator:YAHOO.widget.DataTable.validateNumber,
5 });
6 return txt;
7 }
The main problem was the “,”(comma) at the line 4. I removed the comma and the application started working fine on IE7 also.
Actually for IE, there should be no comma after the function closing(after the braces{}), or the parameters passed to the functions or the class constructors. IE considers that as a new line.
Enjoy debugging……
While designing the web pages, sometimes you need to show the particular input field or labels or other page element, and show them on some event like click of a button, change the option from combobox ect.
One idea is make the field to be toggled, invisible by default and make it visible on that particular event. Here I am presenting some sample code, to achieve this :
<script language=”javascript” type=”text/javascript”>
function toggle_field()
{
var changed = document.getElementById(‘enter_card’);
var card1 = document.getElementById(‘hide_field1′);
var card2 = document.getElementById(‘hide_field2′);
if(changed.options[changed.options.selectedIndex].value)
{
card1.style.display = ‘block’;
card2.style.display = ‘block’;
}
else
{
card1.style.display = ‘none’;
card2.style.display = ‘none’;
}
}
</script>
<html><body>
<table>
<tr>
<td >Select option to show hidden elements:</td>
<td>
<select id=”enter_card” name=”card_type” onchange=”toggle_field()”>
<option value=”">Choose….</option>
<option value=”Option1″>Option1</option>
<option value=”Option2″>Option2</option>
<option value=”Option3″>Option3</option>
</select>
</td>
</tr>
<tr>
<td><div id=”hide_field1″ style=”display: none;”>Card Number:</div></td>
<td><div id=”hide_field2″ style=”display: none;”><input type=”text” name =”card_number” value=”" size=”40″></div></td>
</tr>
</body></html>
The label “card number” and the input field “card_number” will be invisible by default. When somebody selects any option from the dropdown box, the function toggle_field() makes the invisible fields to visible and vice-versa. This code will help in toggling the page elements. Cheers…
Recent Comments