Javascript Function not working in IE but works in Firefox
Question
<script type="text/javascript">
$(document).ready(function () {
showHome();
});
function findTemplate() {
var selectedIndustry = $("#industrySelected option:selected").text();
var selectedTemplate =$("#templateCode").val();
$.ajax({
type: "post",
url: "/_layouts/TBSharePointProject/SharePointTestService.asmx/redirectUserToAppropriateTemplate",
contentType: "application/x-www-form-urlencoded",
dataType: "xml",
data: { industry: selectedIndustry, templateCode: selectedTemplate, checkList: "" },
success: function (result) {
xmlStr = xmlToString(result);
xml = removeFirstAndLastLine(xmlStr)
myJsonObject = xml2json.parser(xml);
//alert(myJsonObject.eccn[0].eccnno);
$("#surveyScreen").empty();
for(var i = 0; i <= myJsonObject.eccn.length; i++) {
$("#surveyScreen").append("<p><input id='" + myJsonObject.eccn[i].guid + "' type='checkbox' checked ='checked'>" + myJsonObject.eccn[i].eccnno + ": " + myJsonObject.eccn[i].title + "</input></p>");
}
$("#surveyScreen").append("<br/><input type='button' id='goHome' value='Back' onclick =\"javascript: showHome();\"/>");
},
error: function (result) {
alert('error occured');
},
async: true
});
}
//Converst xmlString to String
function xmlToString(xmlObj) {
if (navigator.appName == "Netscape") {
return (new XMLSerializer()).serializeToString(xmlObj);
}
if (navigator.appName == "Microsoft Internet Explorer") {
return xmlObj.xml;
}
}
function removeFirstAndLastLine(xmlStr) {
// break the textblock into an array of lines
var lines = xmlStr.split('\n');
// remove one line, starting at the first position
lines.splice(0, 2);
// join the array back into a single string
var newtext = lines.join('\n');
//Removes the last line
if (newtext.lastIndexOf("\n") > 0) {
return newtext.substring(0, newtext.lastIndexOf("\n"));
} else {
return newtext;
}
}
function showHome() {
$("#surveyScreen").empty();
$("#surveyScreen").append("<p>Do you have a saved checklist?</p>");
$("#surveyScreen").append("<p>Submission Code:<input type='text' id='checkListCode'/> </p>");
$("#surveyScreen").append("<p><input type='button' id='getCheckList' value='Get Saved Checklist' onclick =\"javascript: findTemplate();\"/></p><br/><br/>");
$("#surveyScreen").append("<p>Industry</p>");
$("#surveyScreen").append("<select id='industrySelected'>"+
"<option>Computer & Networking</option>"+
"<option>Biotechnology</option>"+
"Industry</select>");
$("#surveyScreen").append("<br/>Or");
$("#surveyScreen").append("<p>Template Code:<input type='text' id='templateCode'/> </p>");
$("#surveyScreen").append("<p><input type='button' id='getTemplate' value='Next' onclick =\"javascript: findTemplate();\"/></p><br/><br/>");
}
</script>
<body>
<div id="surveyScreen">
</div>
</body>
Can someone explain to me why this function call works in Firefox but not IE, and what needs to be done for it to work in IE.
So I updated the post to show more of my code..some pieces are left out...and some others are unimportant
2 answers
solution1
3 ACCPTED 2013-02-22 16:19:29
IE is much pickier when it comes to duplicate ids. ids should (of course) be unique but firefox just grabs the first one and continues. IE ignores attempts to access dupe ids.
You din't post your HTML but this is the direction i'd look first.
solution2
0 2013-02-22 16:25:44
Make sure your not missing a semi-colon anywhere before this line of code is called. I've found that a missing semi-colon (or any other error) will cause IE to stop working at the spot of the error but it will still work in FF.
Your code works fine in IE 9 http://jsfiddle.net/eL2nU/
$("#surveyScreen").append("<p><input type='button' id='getTemplate' value='Next' onclick=\"javascript: findTemplate();\"/></p><br/><br/>");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.