my XHR object isn't hitting the 'loading' state, 3. I can't figure out what the problem is, as I can't find any syntax issues. It seems to be some kind of code/syntax error, because the error that I'm getting in the console is "Failed to load resource: the server responded with a status of 500 (Internal Server Error)"
Anyway, here's what I have. The above error triggers on the line 'xhr.send(requestBody);' in 'lecturers.js'.
UPDATE
The original code for "lecturers.js" was this:
function getResults(){
xhr.open("GET", "lecturers.php?id=" + Number(new Date), true);
xhr.onreadystatechange = getData;
xhr.send(null);
}
What I want to do is change the above code to use the POST protocol.
lecturers.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Course Lecturers</title>
<script type="text/javascript" src="lecturers.js"></script>
</head>
<body>
<form>
<input type = "button" id="butt1" value = "Press for Results" /><br />
</form>
<script type="text/javascript">
var btnResults = document.getElementById("butt1");
btnResults.onclick = getResults();
</script>
<span id="results" /></span>
</body>
</html>
lecturers.js
var xhr = false;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
function getResults(){
if(xhr){
var dataSource = "lecturers.php";
var requestBody = "lecturers.php?id=" + Number(new Date);
xhr.open("POST", dataSource, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = getData;
xhr.send(requestBody);
}
}
function getData ()
{
alert(xhr.readyState);
if ((xhr.readyState == 4) &&(xhr.status == 200))
{
var object = document.getElementById("results");
object.innerHTML = xhr.responseText;
}
}
lecturers.xml
<?xml version="1.0" encoding="iso-8859-1"?>
<Courses>
<Course>
<title>Web Development</title>
<lecturer>Jian Yu</lecturer>
<moderator>Gary Snail</moderator>
<points>25</points>
<group>SCCRL</group>
<Faculty>DCT</Faculty>
</Course>
<Course>
<title>Software Development in Java</title>
<lecturer>SpongeBob SquarePants</lecturer>
<moderator>Patrick Star</moderator>
<points>25</points>
<group>SCCRL</group>
<Faculty>DCT</Faculty>
</Course>
<Course>
<title>Financial Accounting</title>
<lecturer>Squidward Tentacles</lecturer>
<moderator>Mr Crab</moderator>
<points>10</points>
<group>KEDRI</group>
<Faculty>DCT</Faculty>
<Course>
<title>IS Project</title>
<lecturer>Plankton</lecturer>
<moderator>Sandy Cheeks</moderator>
<points>30</points>
<group>IS</group>
<Faculty>DCT</Faculty>
</Course>
</Course>
</Courses>
lecturers.xsl
<?xml version="1.0"?><!-- DWXMLSource="results.xml" -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="/">
<HTML>
<HEAD>
<TITLE> Courses</TITLE>
</HEAD>
<BODY>
Courses with More than 15 Credit Points : <BR/>
<table border="1">
<tr>
<th>Title</th>
<th>Group</th>
<th>Faculty</th>
</tr>
<xsl:for-each select="Course">
<tr>
<td><xsl:value-of select="title"></xsl:value-of></td>
<td><xsl:value-of select="group"></xsl:value-of></td>
<td><xsl:value-of select="Faculty"></xsl:value-of></td>
</tr>
</xsl:for-each>
</table>
----------
<BR/>
Number of Courses Offered by CSSE :
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
lecturers.php
<?php
$xmlDoc = new DomDocument;
$xmlDoc->load("lecturers.xml");
$xslDoc = new DomDocument;
$xslDoc->load("lecturers.xsl");
$proc = new XSLTProcessor;
$proc->importStyleSheet($xslDoc);
echo $proc->transformToXML($xmlDoc);
?>
Related
I have a simple text file:
Text1
Text2
Text3
TextN
And would like to create an interface where each time the user presses the next button the text area will be populated with the next text. I guess I have to use an array for that but I am having problems changing the text with the next button. Moreover the code I have only works on Firefox. Does this mean that when I put the website on a server this will be interpreted by Firefox clients only?
function test() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
var contents = xmlhttp.responseText;
myArray = contents.split("\n");
}
}
xmlhttp.open("GET", "deeds.txt", true);
xmlhttp.send();
}
function nextDeed() {
document.getElementById('deed').innerHTML = myArray[0]
}
<html>
<body>
<h1 align="center" style="font-family:Arial;">RELATION TAGGING </h1>
<textarea id="deed" rows="15" cols="160"></textarea>
<input type="button" value="next" onclick="nextDeed()" /><br/>
<div id="result">Result</div>
</body>
</html>
step = 0;
$("#next").click(function(){
step = step +1;
$.ajax({
url: "./text.php?"+"step="+step,
success: function(data){
$("#deed").val(data);
}
});
});
;
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1 align="center" style="font-family:Arial;" >RELATION TAGGING </h1>
<textarea id="deed" rows="15" cols="160">
</textarea>
<input type="button" id="next" value="next" /><br/>
<div id="result">Result</div>
</body>
</html>
PHP code : <?php $data = file_get_contents("file".$_GET["t"].".txt"); echo $data;?>
I'm trying to load a XML in a simple page and show the contents of a group of tags, but I'm having some problems.
When I press the button to trigger function, nothing happens. I want to get an alert for every tag named "misil_aire_aire_otan" with it's value. What am I doing wrong?
Here's what I have right now:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PracticeDOM</title>
<script type="text/javascript">
function myfunction(){
if (window.XMLHttpRequest) {
var xhttp = new XMLHttpRequest();
}
xhttp.open("GET","avionesPractica.xml",false);
xhttp.send();
var xmlDoc = xhttp.responseXML;
var misil_aire_aire_otan = xmlDoc.getElementsByTagName("misil_aire_aire_otan");
var textAPintar = "Éstos son los misiles aire de la otan : <br>";
for (var i = 0; i < misil_aire_aire_otan.length; i++) {
alert(misil_aire_aire_otan[i].childNodes[0].nodeValue)
}
}
</script>
</head>
<body>
<p id="paragraf_1"></p>
<br>
<form name="formulari1">
<button type="button" id="myBtn" onclick="myFunction()">Try it</button>
<br><br>
<table id="taulaAvions" border=1>
</table>
</form>
</body>
</html>
Here's the code fixed:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>M04 - UF3 – NF2 – pràctica 3 - exercici 1</title>
<script type="text/javascript">
function myfunction(){
if (window.XMLHttpRequest) {
var xhttp = new XMLHttpRequest();
}
xhttp.open("GET","avionesPractica.xml",false);
xhttp.send();
var xmlDoc = xhttp.responseXML;
console.log(xmlDoc);
var misil_aire_aire_otan = xmlDoc.getElementsByTagName("misil_aire_aire_otan");
var textAPintar = "Éstos son los misiles aire de la otan : <br><br>";
for (var i = 0; i < misil_aire_aire_otan.length; i++) {
textAPintar = textAPintar + misil_aire_aire_otan[i].childNodes[0].nodeValue +"<br>";
}
document.getElementById("paragraf_1").innerHTML = textAPintar;
}
</script>
</head>
<body onload="myfunction()">
<p id="paragraf_1"></p>
<br>
<form name="formulari1">
<br><br>
<table id="taulaAvions" border=1>
</table>
</form>
</body>
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.
Upon entering the quantity of an item and clicking the Add to Cart button the toShoppingCart() method is executed. This method will get the values of labels and text fields and insert them into a JSON object and pass it to the Order.php file.
When sending the JSON object from JavaScript to PHP it returns an error:
Undefined index: itemdetails
Onearlist.html:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="Order.php">
<table border="2">
<tr>
<td>
<div style="padding: 40px"><label id="id">001</label> <label id="name">SMS Audio street by 50 on-ear wired</label> <label id="price">179.00$</label> Qty <input type="text" id="qtytxt"><input type="button" value="Add to Cart" onclick="toShoppingCart()" /></div>
</td>
</tr>
<tr>
<td>
<div style="padding: 40px"><label id="id">002</label><label id="name">Beats Solo2 on-ear wired</label> ,<label id="price">199.00$</label> Qty<input type="text" id="qtytxt"><input type="button" value="Add to Cart" onclick="toShoppingCart()" /></div>
</td>
</tr>
<tr>
<td>
<div style="padding: 60px"></div>
</td>
</tr>
</table>
<input type="submit" value="Check Out">
</form>
<script type="text/javascript">
function toShoppingCart() {
console.log("toShoppingCart");
var id = document.getElementById("id").innerHTML;
var name = document.getElementById("name").innerHTML;
var qty = document.getElementById("qtytxt").value;
var price = parseFloat(document.getElementById("price").innerHTML);
console.log(id);
console.log(name);
console.log(qty);
console.log(price);
var request;
var itemdata = {
"id": id,
"name": name,
"qty": qty,
"price": price
};
open("Order.php", "window1");
send({
itemdetails: JSON.stringify(itemdata)
});
}
</script>
</body>
</html>
Order.php:
<?php
$data = json_decode($_GET['itemdetails']);
echo $data;
?>
To send ajax request do this:
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
var DONE = this.DONE || 4;
if (this.readyState === DONE){
alert(request.responseText); // get response form the server
}
};
request.open('GET', 'Order.php?itemdetails='+JSON.stringify(itemdata), true);
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
request.send(null);
or if you use jQuery then:
$.get('Order.php?itemdetails='+JSON.stringify(itemdata), function(response) {
});
This section of code is to first get the data and display the data from the XML file. After that there is a button below named submit. When I press submit, it calls the function add() and it will copy the first node from the XML file:
<html>
<body>
<link rel="stylesheet" type="text/css" href="test.css" />
<table>
</tr class="top">
<td>ID</td>
<td>Orgin</td>
<td>Type</td>
<td>Color</td>
</tr>
<script type="text/javascript">
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","test.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("product");
for (i=0;i<x.length;i++)
{
document.write("<tr class=a><td>");
document.write(x[i].getElementsByTagName("orgin")[0].getAttribute("id"));
document.write("</td><td>");
document.write(x[i].getElementsByTagName("orgin")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("color")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
function add()
{var id=document.getElementById('idProduct').value;
var time=document.getElementById('Time').value;
var org=document.getElementById('orgin').value;
var color=document.getElementById('color').value;
var type=document.getElementById('type').value;
xmlDoc=loadXMLDoc("test.xml"); //Problem happen here, the code doesn't functioning
oldNode=xmlDoc.getElementsByTagName('product')[1];
newNode=oldNode.cloneNode(true);
xml.Doc.documentElement.appendChild(newNode);
}
</script>
<br>
Inputs:
<br>
Time: <input type="text" id="time"><br>
ID: <input type="text" id="idProduct"><br>
Orgin: <input type="text" name="orgin"><br>
Type: <input type="text" name="type"><br>
Color: <input type="text" name="color"><br>
<input type="button" value="submit" onclick="add()"></input>
</body>
</html>
This is the XML file:
<?xml version="1.0" encoding="Big5" ?>
<set>
<product time="5">
<orgin id="1">sony</orgin>
<type>comp</type>
<color>red</color>
</product>
<product time="6">
<orgin id="2">apple</orgin>
<type>others</type>
<color>blue</color>
</product>
</set>
Here is the W3Schools loadxmldoc.js file:
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}
Add that to your script block and it may start working (or get you a little further along).