javascript - Code working in IE but not in FF -
i have requirement user type in textbox , textbox filed suggestions database. user select option , on clicking add button text added tag in dynamic html table can removed later. have working fine problem code working in ie. when running page in firefox not running , not showing error. testing purpose have replaced hiddenfields textboxes. can type in "text" , "value" textboxes , click on add skill buttons. work in ie not in ff. waiting suggestions. here 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 skill.'); return false; } else { var addedid = $("#addedid").val(); if (addedid != '') { if (addedid.indexof(',' + selectedvalue + ',') != -1) { alert('skill 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 supposed hidden fields. testing purpose used 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>
document.all not available in firefox. it's proprietary ie method, that's adopted webkit , opera, not firefox.
you should try sticking jquery, cross browser, instead of mixing native js , jquery!
Comments
Post a Comment