We are trying this in ie11 and we are getting syntax error .
function transformToHtmlText(xmlFormId, xsltFormId) {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(document.getElementById(xmlFormId).innerHTML, "application/xml");
//Below line throwing Syntax Error
var xsltDoc = parser.parseFromString(document.getElementById(xsltFormId).innerHTML, "application/xml");
//var htmlContent = xmlDoc.transformNode(xsltDoc);
var xslt = new ActiveXObject("Msxml2.XSLTemplate");
var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
xslDoc.loadXML((new XMLSerializer()).serializeToString(xsltDoc));
xslt.stylesheet = xslDoc;
var xslProc = xslt.createProcessor();
xslProc.input = xmlDoc;
xslProc.transform();
return xslProc.output;
//return htmlContent;
}
XML is :
<form FormID="63" FormTableName="xx_resolution" IssueName="XX Resolution">
<is_trainable required="Y" state="Req"></is_trainable>
<Follow_Up_Req required="Y" state="Req"></Follow_Up_Req>
<Follow_Up_Date></Follow_Up_Date>
<Refer_Out_Req required="Y" state="Req"></Refer_Out_Req>
<Refer_To></Refer_To>
<Refer_To_Name></Refer_To_Name>
<Refer_To_TN TNType="xxx-xxx-xxxx"></Refer_To_TN>
<Action_history_list NameList="Y" style="Section"></Action_history_list>
<Action_Date></Action_Date>
<Action_User></Action_User>
<Action_summary></Action_summary>
<Call_Category></Call_Category>
<Call_Category_1_></Call_Category_1_>
<Call_Category_2_></Call_Category_2_>
<Call_Category_3_></Call_Category_3_>
<Call_Category_4_></Call_Category_4_>
<Call_Category_5_></Call_Category_5_>
<Add_Cat></Add_Cat>
<CA_ID></CA_ID>
<CA_SUP_ID></CA_SUP_ID>
<CA_CENTER_ID></CA_CENTER_ID>
</form>
and the XSLT that we are using is :
<div xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:for-each select="Action_history_list/row">
<span style="width: 32px;"></span>
<span class="copy" style="width: 81px;">
<xsl:value-of select="_Action_User"></xsl:value-of>
</span>
<span style="width: 7px;"></span>
<span class="copy" style="width: 181px;">
<xsl:value-of select="_Action_Date"></xsl:value-of>
</span>
<span style="width: 11px;"></span>
<span class="copy" style="width: 95px;">
<span class="label" id="Action_summary_label_row_">Action summary</span>
</span>
<span style="width: 9px;"></span>
<span class="copy" style="width: 197px;">
<xsl:value-of select="_Action_summary"></xsl:value-of>
</span>
<br>
</xsl:for-each>
</div>
as per our understanding even though the tag is empty, at least empty span should be displayed . But we are getting error in the line we mentioned in the comment.
Please help.
Related
I would like to find and replace the text in my textbox.
this is my script
<script>
function findnReplace() {
var str = document.getElementById("source").value;
var find = document.getElementById("find").value;
var replace = document.getElementById("replace").value;
var resultString = str.replace(find, replace);
var numreplace = new RegExp(find, 'g');
document.getElementById("source").innerHTML = resultString;
//find the number of words found and replaced
var num = str.match(numreplace).length;
if (num == 0) {
var no = "No words are replaced.";
document.getElementById("num").innerHTML = no;
} else {
var n = num + " word(s) replaced.";
document.getElementById("num").innerHTML = n;
}
}
</script>
and here is my html code
<html>
<body>
<table>
<textarea name="text" id="source" rows="3" cols="20" required>Hello Testing
</textarea><br><br>
<tr>
<td>Find:</td>
<td>
<input type="text" id="find" name="find" onkeyup="replaceNum()" size="30">
</td>
</tr>
<tr>
<td>Replace:</td>
<td>
<input type="text" id="replace" name="replace" onkeyup="replaceNum()" size="30">
</td>
</tr>
</table>
<input id="findnReplaceButton" type="button" value="Find & Replace"
onclick="findnReplace()" title="Fill in both textbox"/>
<span id="num"></span>
</table>
</body>
</html>
expected result:
however, this is what i am getting:
ALTHOUGH it says "3words replaced" but the text in the textbox didnt get replaced.
On your script, you have run str.replace function without regex. So it will replace the first match only.
You have defined numreplace regex but have not used it.
So to make it work, it is needed to place str.replace after numreplace variable definition and use that regex inside str.replace function as follows.
function findnReplace() {
var str = document.getElementById("source").value;
var find = document.getElementById("find").value;
var replace = document.getElementById("replace").value;
var numreplace = new RegExp(find, 'g');
var resultString = str.replace(numreplace, replace);
document.getElementById("source").innerHTML = resultString;
//find the number of words found and replaced
var num = str.match(numreplace).length;
if (num == 0) {
var no = "No words are replaced.";
document.getElementById("num").innerHTML = no;
} else {
var n = num + " word(s) replaced.";
document.getElementById("num").innerHTML = n;
}
}
<table>
<textarea name="text" id="source" rows="3" cols="20" required>Hi Hi Hi Hi Testing</textarea><br><br>
<tr>
<td>Find:</td>
<td>
<input type="text" id="find" name="find" size="30">
</td>
</tr>
<tr>
<td>Replace:</td>
<td>
<input type="text" id="replace" name="replace" size="30">
</td>
</tr>
</table>
<input id="findnReplaceButton" type="button" value="Find & Replace" onclick="findnReplace()"
title="Fill in both textbox" />
<span id="num"></span>
</table>
Newbie here. Using html and Javascript. It was working until I added a side menu. I had it set up with the submit button inside the side menu under the download function. I only included code for the first few questions and answers. The image local storage work sometimes. I'm running it on notepad++ and with chrome.
function save() {
//question1
var question1 = document.getElementById("question1")
var correctanswer1 = document.getElementById("correctanswer1");
var incorrect11 = document.getElementById("incorrect11");
var incorrect12 = document.getElementById("incorrect12");
var incorrect13 = document.getElementById("incorrect13");
try {
//question1
localStorage.setItem("question1", question1.value);
sessionStorage.setItem("question1", question1.value);
localStorage.setItem("correctanswer1", correctanswer1.value);
sessionStorage.setItem("correctanswer1", correctanswer1.value);
localStorage.setItem("incorrect11", incorrect11.value);
sessionStorage.setItem("incorrect11", incorrect11.value);
localStorage.setItem("incorrect12", incorrect12.value);
sessionStorage.setItem("incorrect12", incorrect12.value);
localStorage.setItem("incorrect13", incorrect13.value);
sessionStorage.setItem("incorrect13", incorrect13.value);
//question 1
question1value = "";
correctanswer1value = "";
incorrect11.value = "";
incorrect12.value = "";
incorrect13.value = "";
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
console.log("Error: Local Storage limit exceeds.");
} else {
console.log("Error: Saving to local storage.");
}
}
}
<div id="sidebar">
<ul>
Top of Page
<p>Download </p>
<p>
Submit </ul>
</p>
</div>
<div class="center">
Enter Question 1:
<input type="text" id="question1" name="Question 1" size="40">
<br>
<br> Next, add a correct answer
<font color="#51096F"> FIRST </font> and then the incorrect answers for your question.
<br>
<p>
<input type="text" id="correctanswer1" name="correctanswer1" size="50" style="border:2px solid #660570">
</p>
<p>
<input type="text" id="incorrect11" name="incorrect11" size="50">
</p>
<p>
<input type="text" id="incorrect12" name="incorrect12" size="50">
</p>
<p>
<input type="text" id="incorrect13" name="incorrect13" size="50">
</p>
<br>
<img id="uploadPreview1" style="width: 100px; height: 100px;" />
<input id="uploadImage1" type="file" name="myPhoto1" onchange="PreviewImage1();" />
<script type="text/javascript">
function PreviewImage1() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage1").files[0]);
oFReader.onload = function(oFREvent) {
document.getElementById("uploadPreview1").src = oFREvent.target.result;
sessionStorage.setItem("image", oFREvent.target.result);
localStorage.setItem("image", oFREvent.target.result);
};
};
</script>
</div>
I have this code, it allows me to pick the quantities for the days and when I click on add to cart and go back to the meal, I can still see my quantities, but as you can see I have different meal options, is there a way to make the quantities consistent with the ids? that if my quantity for beef is 2 2 1, and then I go back to click chicken, it will start with the quantities I have for that meal option ?
<span>
<span class= "prices">
$15.00 - $17.00 </span>
<div class="price-options">
<span id = "price_option-1101" class="none prices">$15.00</span>
</div>
<div class="price-options">
<span id = "price_option-1102" class="none prices">$16.00</span>
</div>
<div class="price-options">
<span id = "price_option-1103" class="none prices">$17.00</span>
</div>
<br>
</span>
<button price=15 label_option= 1101 class="view1 white cbtn1 open_sansbold option protein-option">Tofu <span id="price-difference-for-1101"></span></button><button price=16 label_option= 1102 class="view1 white cbtn1 open_sansbold option protein-option">Chicken <span id="price-difference-for-1102"></span></button><button price=17 label_option= 1103 class="view1 white cbtn1 open_sansbold option protein-option">Beef <span id="price-difference-for-1103"></span></button> </center>
<br>
<div class="textCenter" style="font-weight:700">
Add this meal to the delivery days below:
<br><br>
</div>
<table>
<div class="satin background_option">
<p style="display:inline-block;margin-right:150px">Monday, May 15th</p>
<span style="float:right;">
<i id="qty-minus1" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
<input id="qty1" type="number" value="2" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
<i id="qty-plus1" class="fa fa-plus-circle controls" style="color: #d7d6d0"></i>
</span>
</div>
<div class="satin background_option" style="margin-top:10px;height:50px;">
<p style="display:inline-block;margin-right:150px">Wednesday, May 17th</p>
<span style="float:right;">
<i id="qty-minus3" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
<input id="qty3" type="number" value="2" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
<i id="qty-plus3" class="fa fa-plus-circle controls" style="color: #d7d6d0"></i>
</span>
</div>
<div class="satin background_option" style="margin-top:10px;height:50px;">
<p style="display:inline-block;margin-right:150px">Friday, May 19th</p>
<span style="float:right;">
<i id="qty-minus5" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
<input id="qty5" type="number" value="3" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
<i id="qty-plus5" class="fa fa-plus-circle controls" style="color: #d7d6d0"></i>
</span>
</div>
</table>
<center>
<a style="color:white;text-decoration:none;" href="../deliveries"><button class=" view-add white cbtn1 open_sansbold option">Back </button></a>
<button id= "add-to-cart" class=" view-disable white cbtn1 open_sansbold option" disabled> ADD TO CART </button>
</center>
</article>
I already have this JavaScript to do the pricing on the buttons
$(".protein-option").click(function() {
var this_id = $(this).attr("label_option");
var this_price = parseInt($(this).attr("price"), 10);
console.log("this_id" + this_id + "-- " + this_price);
$("#totalprice").val($(this).attr("price"));
$(".protein-option").each(function() {
var loop_id = $(this).attr("label_option");
var loop_price = parseInt($(this).attr("price"), 10);
var difference = loop_price - this_price;
var sign = Math.sign(difference);
difference = Math.abs(difference);
difference = parseFloat(difference).toFixed(2);
if(sign == 0) {
difference = "$0.00";
} else if (sign == 1) {
difference = "+$" + difference;
} else if (sign == -1) {
difference = "-$" + difference;
}
console.log(loop_id + " -- " + loop_price + " -- " + difference + " -- " + sign);
$("#price-difference-for-"+loop_id).html(difference);
});
$("#price-difference-for-"+this_id).html(" ");
});
I put this code after the onclick (I declared my array on the top of the page)
var meal_label_qty = $(this).attr("label_option");
var id_mon_qty = $("#qty1").val();
var id_tues_qty = $("#qty2").val();
var id_wed_qty = $("#qty3").val();
var id_thur_qty = $("#qty4").val();
var id_fri_qty = $("#qty5").val();
//gets meal id and qty
label_options.push(meal_label_qty);
qty_options.push(id_mon_qty,id_tues_qty,id_wed_qty,id_thur_qty,id_fri_qty);
meal_qty.push(label_options,qty_options);
alert(meal_qty);
I get the alerts correct, but how can I make them change depending on the label_option id?
here is how my code looks like
So you may want to store it in an object ( much better then searching an array ) and then restore on every change?
var quantperproduct={};
var meal_label_qty="1011";
$(".protein-option").on("click",function(){
var elements=[1,2,3,4,5].map(el=>$("#qty"+el));
var quantities=elements.map(el=>el.val());
//store them:
quantperproduct[meal_label_qty]=quantities;
//restore the new label ( if possible)
meal_label_qty = $(this).attr("label_option");
elements.forEach((el,i)=>el.val((quantperproduct[meal_label_qty]||[])[i]||0));
});
I'm trying to create a cross browser XSLT code that will work with all version of IE/Edge, FireFox and Chrome.
the following code works with IE but not with firefox and chrome.
can anyone please give me a clue about what I'm doing wrong?
var XML_DOC = "../../xmlfiles/sample.xml";
var XSL_DOC = "../../xslfiles/sample.xsl";
function loadXMLDoc(){
var xmlObject;
var xmlDoc;
var xslDoc;
try //Internet Explorer
{
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xslDoc = new ActiveXObject('Microsoft.XMLDOM');
xslDoc.async = false;
xmlDoc.load(XML_DOC);
xslDoc.load(XSL_DOC);
xmlObject = xmlDoc.documentElement.transformNode(xslDoc);
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc = document.implementation.createDocument("","",null);
xmlDoc.async = false;
xslDoc = document.implementation.createDocument("","",null);
xslDoc.async = false;
xmlDoc.load(XML_DOC);
xslDoc.load(XSL_DOC);
xmlObject = xmlDoc.documentElement.transformNode(xslDoc);
}
catch(e)
{
try //Google Chrome
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xmlDoc = this.responseXML;
}
};
xhttp.open("GET", XML_DOC, true);
xhttp.send();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xslDoc = this.responseXML;
}
};
xhttp.open("GET", XSL_DOC, true);
xhttp.send();
xmlObject = xmlDoc.transformNode(xslDoc);
}
catch(e)
{
error=e.message;
}
}
}
return xmlObject;
}
here is the sample.xml file:
<?xml version="1.0" encoding="windows-1255"?>
<menu>
<entity id="02_01_00_00_00">
<description>chapter a</description>
<image>../images/plus.gif</image>
<imageOpen>../images/minus.gif</imageOpen>
<ref>chap02/htm/s02_01_01_01_00_0010</ref>
<contents>
<entity id="02_01_01_00_00">
<description>chapter a1</description>
<image>../images/plus.gif</image>
<imageOpen>../images/minus.gif</imageOpen>
<ref>chap02/htm/s02_01_01_01_00_0010</ref>
<contents>
<entity id="02_01_01_01_00">
<description>chapter a11</description>
<image>../images/plus.gif</image>
<imageOpen>../images/minus.gif</imageOpen>
<ref>chap02/htm/s02_01_01_01_00_0010</ref>
<contents>
<entity id="02_01_01_01_01">
<description>blue</description>
<image>../images/empty.gif</image>
<imageOpen>../images/empty.gif</imageOpen>
<ref>chap02/htm/s02_01_01_01_01_0010</ref>
</entity>
</contents>
</entity>
</contents>
</entity>
</contents>
</entity>
</menu>
here is the sample.xsl file:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" language="JavaScript">
<xsl:template match="menu">
<xsl:apply-templates select="entity"/>
</xsl:template>
<xsl:template match="entity">
<div onclick="window.event.cancelBubble = true;clickedMenuEntry(this);" onselectstart="return false" ondragstart="return false">
<xsl:attribute name="id">div<xsl:value-of select="#id"/></xsl:attribute>
<xsl:attribute name="image"><xsl:value-of select="image"/></xsl:attribute>
<xsl:attribute name="imageOpen"><xsl:value-of select="imageOpen"/></xsl:attribute>
<xsl:attribute name="ref"><xsl:value-of select="ref"/></xsl:attribute>
<xsl:attribute name="open">false</xsl:attribute>
<xsl:attribute name="selected">true</xsl:attribute>
<xsl:attribute name="title"><xsl:value-of select="description"/></xsl:attribute>
<xsl:attribute name="STYLE">
padding-right: 7px;
cursor: hand;
<xsl:if expr="depth(this) > 2">
display: none;
</xsl:if></xsl:attribute>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" >
<img border="0">
<xsl:attribute name="id">img<xsl:value-of select="#id"/></xsl:attribute>
<xsl:attribute name="SRC"><xsl:value-of select="image"/></xsl:attribute>
<xsl:attribute name="alt"><xsl:value-of select="description"/></xsl:attribute>
</img>
</td>
<td valign="middle" nowrap="true" onmouseover="this.style.fontWeight='bold';" onmouseout="this.style.fontWeight='normal';">
<xsl:attribute name="STYLE">
padding-right: 7px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
color: #0B467A;
</xsl:attribute>
<span onclick="clickedText();">
<xsl:value-of select="description"/>
</span>
</td>
</tr>
</table>
<xsl:apply-templates select="contents/entity"/>
</div>
</xsl:template>
</xsl:stylesheet>
the is suppose to create an index menu in which the user can navigate in some kind of e-book.
I have written a function in Javascript which will be fired on page load.
The function works fine for the first time. But if I come back to index page after visiting other pages, it does not work properly.
It does work correctly upto a certain point but skips code after that.
following is my function
<script>function populate() {
//alert("The Flag is "+$('#flag').val());
val =document.getElementById('flag').value;
xml =document.getElementById('xml').value;
alert(xml);
if (val === "M") {
if (window.ActiveXObject) {
doc = new ActiveXObject('Microsoft.XMLDOM');
doc.async = 'false';
doc.loadXML(xml);
alert("ActiveX");
} else {
var parser = new DOMParser();
doc = parser.parseFromString(xml, 'text/xml');
// alert("DOMparser");
}
alert("Value true");
/* upto here function works correctly each time
* I have also seen the values of both val and xml are coming correctly
*/
passportNo = doc
.getElementsByTagName('PASSPORT_NO')[0].childNodes[0].nodeValue;
//alert('passportNo ' + passportNo);
document.getElementById('passportNo').value = passportNo;
pass_type = doc.getElementsByTagName('PASS_TYPE')[0].childNodes[0].nodeValue;
// alert("Pass_type = " + pass_type);
if (pass_type === "I") {
document.getElementById('in').checked = true;
} else if (pass_type === "O") {
document.getElementById('out').checked = true;
}
jobNo = doc.getElementsByTagName('JOB_NO')[0].childNodes[0].nodeValue;
//alert("jobNo = "+jobNo);
document.getElementById('job_no').value = jobNo;
jobDt = doc.getElementsByTagName('JOB_DT')[0].childNodes[0].nodeValue;
//alert("jobDT "+jobDt);
document.getElementById('DT').value = jobDt;
//Clear xml
nationality =doc.getElementsByTagName('NATIONALITY')[0].childNodes[0].nodeValue;
document.getElementById('nationality2').value = nationality;
element = document.getElementById('nationality');
element.value = nationality;
}
} </script> `
and this is how I am calling it
<body onload="populate()">
<table width="1270" align="center">
<tr>
<td width="1010" height="46" colspan="3" align="center"><h1>Currency
Declaration Form</h1></td>
</tr>
</table>
<input type="hidden" id="flag" value="<%=code%>" />
<input type="hidden" id="xml" value="<%=xml%>" />
<form name="myForm" action="Entry.do" method="post"
onsubmit="return validateAll()" class = "autocompleteOff">
<table width="1042">
<tr class="heading">
</tr>
<tr>
<td width="256" align="left"><input type="radio" name="inout"
id="in" value="I" /> <label>INCOMING </label> <input type="radio"
name="inout" id="out" value="O" /> <label>OUTGOING </label></td>
<td width="774" align="right"><label>JobNo/DT</label> <input
type="text" name="job_no" id="job_no" readonly="readonly"
tabindex="-1" /> <input type="text" name="DT" id="DT"
readonly="readonly" tabindex="-1" value="<%=Convert.getSysDate()%>" /></td>
</tr>
</table>`
I can't see neither passportNo id neither PASSPORT_NO tag (getElementsByTagName) in your HTML code. Same problem with pass_type, nationality and many other elements. Do you miss some code? Or, maybe, this is dynamic output from PHP (for example) and after first run it returns different HTML?