I have a requirement that the user will type in a textbox and the textbox will be filed with suggestions from the database. The user then will select the option and on clicking add button this text will be added as a tag in dynamic html table so that it can be removed later. I have everything working fine but the problem is that my code is only working in IE. When running the page in Firefox it is not running and also it is not showing any error. For the testing purpose i have replaced the hiddenfields with textboxes. You can type in "Text" and "Value" textboxes and click on Add Skill buttons. It will work in IE but not in FF. Waiting for the suggestions. Here is the complete code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddSkills.aspx.cs" Inherits="AddSkills" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AutoComplete</title>
<style type="text/css">
.wrapper
{
background-color: Silver;
width: auto;
}
.selecteditem
{
font-family: Verdana,Arial,Times New Roman;
font-size: 10px;
}
.selecteditemClose
{
font-family: Verdana,Arial,Times New Roman;
font-size: 11px;
font-weight: bold;
color: Red;
cursor: pointer;
}
.selecteditemClose:hover
{
color: Maroon;
}
</style>
<script src="jquery-1.7.1.min.js" type="text/javascript" language="javascript"></script>
<script language="javascript" type="text/javascript">
function addRow() {
var selectedText = $("#txtSkills").val();
var selectedValue = $("#selectedID").val();
var newRow = document.all("tblGrid").insertRow();
var oCell = newRow.insertCell();
if (selectedText == '') {
alert('Please select a skill.');
return false;
}
else {
var addedID = $("#addedID").val();
if (addedID != '') {
if (addedID.indexOf(',' + selectedValue + ',') != -1) {
alert('Skill already selected.');
$("#txtSkills").val('');
$("#selectedID").val('');
return false;
}
else {
oCell.innerHTML = "<span class='wrapper'><span class='selecteditem'>" + selectedText + "</span> <span class='selecteditemClose' onclick=\"removeRow(this,'" + selectedValue + "');\">x</span></span>";
appendSelectedID(selectedValue);
$("#txtSkills").val('');
$("#selectedID").val('');
}
}
else {
oCell.innerHTML = "<span class='wrapper'><span class='selecteditem'>" + selectedText + "</span> <span class='selecteditemClose' onclick=\"removeRow(this,'" + selectedValue + "');\">x</span></span>";
appendSelectedID(selectedValue);
$("#txtSkills").val('');
$("#selectedID").val('');
}
}
}
function removeRow(src, removedValue) {
removeSelectedID(removedValue);
var oRow = src.parentElement.parentElement.parentElement;
document.all("tblGrid").deleteRow(oRow.rowIndex);
}
function appendSelectedID(selectedValue) {
if ($("#addedID").val() == '')
$("#addedID").val(',');
$("#addedID").val($("#addedID").val() + selectedValue + ',');
}
function removeSelectedID(removedValue) {
var addedID = $("#addedID").val();
var modifiedID = addedID.replace(',' + removedValue + ',', ',');
$("#addedID").val(modifiedID);
if ($("#addedID").val() == ',')
$("#addedID").val('');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Text:<asp:TextBox ID="txtSkills" runat="server"></asp:TextBox>
<%--These textboxes are supposed to be hidden fields. For the testing purpose they are used as textboxes--%>
Value:<asp:TextBox ID="selectedID" runat="server"></asp:TextBox>
Collective Values:<asp:TextBox ID="addedID" runat="server"></asp:TextBox>
<input type="button" value="Select Skill" onclick="return addRow();" />
<table id="tblGrid" border="0" cellpadding="2" cellspacing="2" width="250px">
</table>
<br />
</div>
</form>
</body>
</html>