I have silverlight application with custom splash screen. The code of splash is inlined to HTML page. When I´m testing it on my local machine everything is OK.
<!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>
<title>COST_web</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>
<!-- Define XAML content. -->
<script type="text/xaml" id="xamlContent"><?xml version="1.0"?>
<Grid x:Name="LayoutRoot"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="514"
d:DesignWidth="560">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="1"
Margin="0,0,0,50">
<Rectangle Height="5"
Margin="0,10"
HorizontalAlignment="Stretch">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FFBBD2E8"
Offset="0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Height="8"
HorizontalAlignment="Stretch">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FF6BAAE8"
Offset="0" />
<GradientStop Color="#FF216AB1"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1"
ScaleY="1"
x:Name="scaleTransform" />
<SkewTransform AngleX="0"
AngleY="0" />
<RotateTransform Angle="0" />
<TranslateTransform X="0"
Y="0"
x:Name="translateTransform" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
<TextBlock x:Name="textBlock1" TextWrapping="Wrap" FontSize="60" FontFamily="Comic Sans MS" Foreground="#FFFF8200" Text="Web od COST project is Loading..." Opacity="1" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="69,126,69,62" Width="422"></TextBlock>
<Grid.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#CC32D833" Offset="0.093" />
<GradientStop Color="#FFF8F83D" Offset="0.703" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
</script>
<!-- Define JS content. -->
<script type="text/javascript">
function onSourceDownloadProgressChanged(sender, eventArgs)
{
sender.findName("textBlock1").Opacity = eventArgs.progress.toString();
sender.findName("scaleTransform").ScaleX = eventArgs.progress;
}
</script>
<!-- <script type="text/javascript" src="splashscreen.js"></script>-->
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError") {
return;
}
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
</head>
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/COST_web.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<!--<param name="splashscreensource" value="SplashScreen.xaml">-->
<param name="splashscreensource" value="#xamlContent">
<param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged">
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
</body>
</html>
Problem i when I publish it and load to web server. When I´d like to access the page on server (IIS 7) there is no splash screen - only white page before the application is loaded.
Does anybody know, why is behave like this - on local is everything ok, but after deploying to server the there is no custom splash screen.
I think it's work if you copy SplashScreen.xaml manual to the server and set "splashscreensource" parameters like this
<param name="splashscreensource" value="SplashScreen.xaml">
Related
My issue is when I make a call for a 'childNode' in my XML file. Everything works fine if there is information between the tags. If it is 'null' or empty, then my script errors out and doesn't continue processing. How do I get my script to ignore the 'null' childNode and continue running? I'm wanting to ignore the null reference and continue processing my XML file because some fields will be empty.
I'm getting this error:
Unable to get property 'nodeValue' of undefined or null reference.
--- HTML/HTA File - Works in IE 11 or as an .hta file
<!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>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=10"> -->
<meta charset="utf-8">
<title>:: Races ::</title>
<HTA:APPLICATION
SCROLL="no"
SINGLEINSTANCE="yes"
SYSMENU="yes"
BORDER="dialog"
ICON="ms-icon-144x144.png"
>
<!-- *** SETS HTA's WINDOW SIZE *** -->
<SCRIPT LANGUAGE="VBScript">
Sub Window_onLoad
window.resizeTo 1600,700
End Sub
</SCRIPT>
<!-- END SETS HTA's WINDOW SIZE *** -->
</head>
<body onload="LoadXML();">
<!-- *** XML - WRITE TO LOCAL FILE SCRIPT - XML *** -->
<script type ="text/javascript">
function WriteToFileXML()
{
try
{
var WshNetwork = new ActiveXObject("Microsoft.XMLDOM");
var userName = WshNetwork.UserName;
var fso, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
if(fso.FileExists("M:/Races/test.xml")){
s = fso.OpenTextFile("M:/Races/test.xml", 2, true);
} else {
s = fso.CreateTextFile("M:/Races/test.xml", true);
}
var one_seq=document.getElementById("OneSeqCheckbox").checked;
var one_race_field=document.getElementById("OneRaceField").value;
var one_county_selected=document.getElementById("OneCountySelected").value;
var two_seq=document.getElementById("TwoSeqCheckbox").checked;
var two_race_field=document.getElementById("TwoRaceField").value;
var two_county_selected=document.getElementById("TwoCountySelected").value;
var three_seq=document.getElementById("ThreeSeqCheckbox").checked;
var three_race_field=document.getElementById("ThreeRaceField").value;
var three_county_selected=document.getElementById("ThreeCountySelected").value;
s.writeline("\<\?xml version\=\"1\.0\" encoding\=\"UTF\-8\" standalone\=\"yes\"\?\>");
s.writeline("\<Races\_data xmlns\:xsi\=\"http\:\/\/www\.w3\.org\/2001\/XMLSchema\-instance\"\>");
if (one_seq==false)
{
s.writeline("");
}
else
{
s.writeline(" \<record\>");
s.writeline(" \<Race\_Name\>" + one_race_field + "\<\/Race\_Name\>");
s.writeline(" \<County\_Selected\>" + one_county_selected + "\<\/County\_Selected\>");
s.writeline(" \<\/record\>");
}
if (two_seq==false)
{
s.writeline("");
}
else
{
s.writeline(" \<record\>");
s.writeline(" \<Race\_Name\>" + two_race_field + "\<\/Race\_Name\>");
s.writeline(" \<County\_Selected\>" + two_county_selected + "\<\/County\_Selected\>");
s.writeline(" \<\/record\>");
}
if (three_seq==false)
{
s.writeline("");
}
else
{
s.writeline(" \<record\>");
s.writeline(" \<Race\_Name\>" + three_race_field + "\<\/Race\_Name\>");
s.writeline(" \<County\_Selected\>" + three_county_selected + "\<\/County\_Selected\>");
s.writeline(" \<\/record\>");
}
s.writeline("\<\/Races\_data\>");
s.Close();
}
catch(err)
{
var strErr = 'Error:';
strErr += '\nNumber:' + err.number;
strErr += '\nDescription:' + err.description;
document.write(strErr);
}
}
</script>
<!-- *** XML - END WRITE TO LOCAL FILE SCRIPT - XML *** -->
<h1>Races</h1>
<form id="myForm" onkeypress="return (event.keyCode !== 38);" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off>
<div style="width:1300px;height:485px;overflow:auto;">
<input name="OneRaceField" type="text" id="OneRaceField" size="30" /></td>
<select name="OneCountySelected" id="OneCountySelected">
<option value="" selected="selected"></option>
<option value="Mars County">Mars County</option>
<option value="Jupiter County">Jupiter County</option>
</select>
<input name="TwoRaceField" type="text" id="TwoRaceField" size="30" /></td>
<select name="TwoCountySelected" id="TwoCountySelected">
<option value="" selected="selected"></option>
<option value="Mars County">Mars County</option>
<option value="Jupiter County">Jupiter County</option>
</select>
<input name="ThreeRaceField" type="text" id="ThreeRaceField" size="30" /></td>
<select name="ThreeCountySelected" id="ThreeCountySelected">
<option value="" selected="selected"></option>
<option value="Mars County">Mars County</option>
<option value="Jupiter County">Jupiter County</option>
</select>
</div>
<br />
<br />
<br />
<div style="width: 150px; height: 200px; position:absolute; left: 1350px; top: 135px;">
<input style="width: 150px; height: 200px;" name="write_to_file" type="button" id="write_to_file" onClick="Validate(); WriteToFileXML(); RunExe();" value="Save Changes" />
<img src="please_wait.jpg" id="loading_image" name="loading_image" style="display:none" />
</div>
<div style="width: 150px; height: 200px; position:absolute; left: 1350px; top: 367px;">
<input style="width: 150px; height: 200px;" name="Reset_Form" type="button" id="Reset_Form" onClick="resetForm(); WriteToFileXML(); RunExe();" value="Reset Form" />
</div>
<!-- <div style="width: 150px; height: 200px; position:absolute; left: 693px; top: 367px;">
<input style="width: 150px; height: 200px;" name="upload_to_website" type="button" id="upload_to_website" onClick="RunExe();" value="Upload to Website" />
</div> -->
</form>
<script type="text/javascript">
function LoadXML()
{
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var fso = new ActiveXObject("Scripting.FileSystemObject");
//if(fso.fileExists("M:/Races/test.xml"))
{
xmlDoc.load("M:/Races/test.xml");
document.getElementById("OneRaceField").innerText =
xmlDoc.getElementsByTagName("Race_Name")[0].childNodes[0].nodeValue;
document.getElementById("OneCountySelected").value =
document.getElementById("TwoRaceField").innerText =
xmlDoc.getElementsByTagName("Race_Name")[1].childNodes[0].nodeValue;
document.getElementById("TwoCountySelected").value =
document.getElementById("ThreeRaceField").innerText =
xmlDoc.getElementsByTagName("Race_Name")[2].childNodes[0].nodeValue;
document.getElementById("ThreeCountySelected").value =
xmlDoc.getElementsByTagName("County_Selected")[2].childNodes[0].nodeValue;
}
}
</script>
</body>
</html>
--- test.xml - File Works fine
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Races_data xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<record>
<Race_Name>Mayor 1</Race_Name>
<County_Selected>Mars County</County_Selected>
</record>
<record>
<Race_Name>Mayor 2</Race_Name>
<County_Selected>Jupiter County</County_Selected>
</record>
<record>
<Race_Name>Mayor 3</Race_Name>
<County_Selected>Mars County</County_Selected>
</record>
</Races_data>
--- test.xml - Script stops/errors out because of missing information here:
<Race_Name></Race_Name>
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Races_data xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<record>
<Race_Name>Mayor 1</Race_Name>
<County_Selected>Mars County</County_Selected>
</record>
<record>
<Race_Name></Race_Name>
<County_Selected>Jupiter County</County_Selected>
</record>
<record>
<Race_Name>Mayor 3</Race_Name>
<County_Selected>Mars County</County_Selected>
</record>
</Races_data>
For ajax you have to do something like that :
var my_url = 'M:/Races/test.xml';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (4 === this.readyState) { /* DONE */
if (200 === this.status) { /* LOADING */
fctCallBack(this);
}
else {
console.warn("Error %d loading %s !", this.status, my_url);
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function fctCallBack(xml) {
var xmlDoc = xml.responseXML;
xmlDoc.querySelectorAll('record').forEach(
function (record) {
console.log( 'Race_Name =' , record.querySelector('Race_Name').value )
console.log( 'County_Selected =' , record.querySelector('County_Selected').value )
}
)
}
I've set up my Silverlight ASPX page like so:
<%# Page Language="C#" MasterPageFile="~/ASPResources/MasterPage.master" AutoEventWireup="true"
CodeBehind="SilverlightPage.aspx.cs" Inherits="Adapt.Presentation.AssetInventory.SilverlightPage"
Title="Xivic" %>
<%# MasterType VirtualPath="~/ASPResources/MasterPage.master" %>
<%# Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" runat="server">
<script type="text/javascript" id="silverlightport">
var silverlightControl = null;
function pluginLoaded(sender, args)
{
silverlightControl = sender.getHost();
}
function externalCommand(data)
{
if (silverlightControl != null)
{
silverlightControl.Content.JSR.ExternalCommand(data);
}
else
{
alert("Couldn't get silverlight host object in SilverlightPage.aspx");
}
}
</script>
<asp:Silverlight ID="SilverlightLaunchPage" EnableGPUAcceleration="true" runat="server"
Source="~/ClientBin/Xivic.xap" Width="100%" Height="100%" InitParameters="onLoad=pluginLoaded" />
Silverlight starts up and the pluginLoaded function must not be being called because when I call the externalCommand function the silverlightControl variable isn't set. So either my Silverlight page hasn't loaded, which I'm quite sure it has or my onLoad event must not be hooked in properly which is more likely because I have little-to-none ASP knowledge.
Could someone please fill me in on what I'm doing wrong here?
Here is an example of a Silverlight 5 control. I adapted it to what you have in your example
<head runat="server">
<script type="text/javascript" src="..\Scripts\Silverlight.js"></script>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError") {
return;
}
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n";
errMsg += "Code: " + iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
<script type="text/javascript" id="silverlightport">
var silverlightControl = null;
function pluginLoaded(sender, args)
{
silverlightControl = sender.getHost();
}
function externalCommand(data)
{
if (silverlightControl != null)
{
silverlightControl.Content.JSR.ExternalCommand(data);
}
else
{
alert("Couldn't get silverlight host object in SilverlightPage.aspx");
}
}
</script>
</head>
<body>
<form id="form1" runat="server" style="height: 100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="../ClientBin/Xivic.xap" />
<param name="onError" value="onSilverlightError" />
<param name="onLoad" value="pluginLoaded" />
<param name="background" value="#F2F2F2" />
<param name="minRuntimeVersion" value="5.0.61118.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration: none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style: none" />
</a>
</object>
<iframe id="_sl_historyFrame" style="visibility: hidden; height: 0; width: 0; border: 0"></iframe>
</div>
</form>
</body>
The paths may need to change to match your file structures
I am working on a WCF service application that required to get the Barcode reader characters and show data of it on UI for user. My problem is that when I write data on textbox with keyboard is OK but when read from barcode reader overwrite it and show 3 times data in UI.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
<title>سرویس و بارکد خوان</title>
<script src="Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function setFocusToTextBox() {
$(document).ready(function () {
document.getElementById('txtFirst').focus();
});
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#txtFirst").keydown(function (e) {
if (e.which == 17 || e.which == 74) {
e.preventDefault();
} else {
console.log(e.which);
}
})
});
</script>
<script type="text/javascript" language="javascript">
function JqueryAjaxCall(val) {
$("#contentHolder").empty();
$(".form-errors").empty();
if (val != null && val.length === 20) {
document.getElementById("txtFirst").select();
var pageUrl = '<%= ResolveUrl("~/Default.aspx/jqueryAjaxCall") %>';
var parameter = { "myVal": val}
$.ajax({
type: 'POST',
url: pageUrl,
data: JSON.stringify(parameter),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
dateFormat: 'dd/mm/yy',
success: function (data) {
onSuccess(data);
},
error: function (data, success, error) {
var myitems = jQuery.parseJSON(data.responseText);
$(".form-errors").text(myitems.Message).show();
}
});
return false;
}
function onSuccess(data) {
var items = data.d;
var fragment = "<ul>"
var BLNumber = items.BLNumber;
var ContainerNumber = items.ContainerNumber;
var Destination = items.Destination;
var SerialNumberVerification = items.SerialNumberVerification;
var TempPermission = items.TempPermission;
var VehicleNumber = items.VehicleNumber;
var VehicleType = items.VehicleType;
var VoyageID = items.VoyageID;
var value = new Date(parseInt(items.ExitDate.substr(6)));
var ExitDate = value.getMonth() + 1 + "/" + value.getDate() + "/" + value.getFullYear();
var ExitPermissionNumber = items.ExitPermissionNumber;
var myvalue = new Date(parseInt(items.SpecialZoneOrCustomPermissionDate.substr(6)));
var SpecialZoneOrCustomPermissionDate = myvalue.getMonth() + 1 + "/" + myvalue.getDate() + "/" + myvalue.getFullYear();
var SpecialZoneOrCustomPermissionNumber = items.SpecialZoneOrCustomPermissionNumber;
fragment += "<li> " + " شماره بارنامه : " + BLNumber + " <br> "
+ " شماره کانتینر : " + ContainerNumber + " <br> "
+ " مسافت : " + Destination + " <br/> "
+ " شماره تائیدیه : " + SerialNumberVerification + " <br/> "
+ " شماره مجوز موقت : " + TempPermission + " <br/> "
+ " شماره وسیله نقلیه : " + VehicleNumber + " <br/> "
+ " نوع وسیله نقلیه : " + VehicleType + " <br/> "
+ " VoyageID : " + VoyageID + " <br/> "
+ " تاریخ خروج : " + ExitDate + " <br/> "
+ " شماره خروج : " + ExitPermissionNumber + " <br/> "
+ " تاریخ مجوز : " + SpecialZoneOrCustomPermissionDate + " <br/> "
+ " شماره مجوز : " + SpecialZoneOrCustomPermissionNumber + " <br/> "
+ "</li>";
$("#contentHolder").append(fragment);
}
}
</script>
</head>
<body onload="setFocusToTextBox();" bgcolor="#E6E6FA">
<form id="myForm" runat="server" dir="rtl" >
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<div>
<table cellpadding="1" cellspacing="0" style="width: 80%;">
<tr>
<td>
</td>
<td>
<asp:Label ID="lblFirst" runat="server" Text="لطفا شماره سند را وارد نمائید : " Font-Bold="True"></asp:Label>
<input type="text" id="txtFirst" onfocus="setFocusToTextBox" onkeyup="return JqueryAjaxCall(this.value);" class="col-xs-4" style="background-color:#ede0dd"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="contentHolder" >
<asp:Label ID="lblError" runat="server" Text=""></asp:Label>
</div>
</td>
<td>
<div class="form-errors" style="margin-right:-175%;font-style:oblique" dir="rtl" align="right"></div>
</td>
</tr>
</table>
</div>
</form>
<br />
<br />
<br />
<br />
<br />
<hr />
</body>
</html>
on this line code you call your ajax on every key click
onkeyup="return JqueryAjaxCall(this.value);"
and so on each click you have data output, 3 times and maybe more, on each key press. Redesign your code so only when you are finish typing you make the render.
I Understand it just now. problem was for this line of code
$("#contentHolder").append(fragment);
I add .empty() to that.
$("#contentHolder").empty().append(fragment);
I find it from this link
https://www.joezimjs.com/javascript/jquery-html-youre-doing-it-wrong/
I've tried this a bunch of different ways, stuck on the call to XML data. I've debugged it, code comes out clean, but when I execute, it does nothing.
Here is the JS
//----------------------THE MAIL FORM---------------------------
function mailMe(form) {
return true;
}
//----------------------ADD ITEM---------------------------
function addItem() {
var id = document.getElementById("id").value;
$("#itemCont").append("<div id='item" + id + "' class='service'><span style='font-weight: bold;'>Item: </span><select name='ITEM" + id + "' style='width: 300px;'><option value=' '>Select an item...</option></select><span style='font-weight: bold;'> S/N: </span><input name='SN' type='text' style='width: 100px;'><p><span style='font-weight: bold;'> Parts: </span></p><div id='partCont'></div><a href='#' onClick='addPart(test.xml); return false;'>Add Part</a><div class='ri'><p><a href='#' onClick='removeItem(\"#item" + id + "\"); return false;'>Remove Item</a></p></div></div>");
id = (id - 1) + 2;
document.getElementById("id").value = id;
}
function removeItem(id) {
$(id).remove();
}
//----------------------ADD PART---------------------------
function addPart(url) {
var pn = document.getElementById("pn").value;
var xmlhttp;
var txt, x, xx, i;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
txt = "<select name='test'><option value=''>Make a selection...<option>";
x = xmlhttp.responseXML.documentElement.getElementsByTagName("part");
for (i = 0; i < x.length; i++) {
txt = txt + "<option value='";
xx = x[i].getElementsByTagName("lawson");
try {
txt = txt + xx[0].firstChild.nodeValue + "'>";
}
catch (er) {
txt = txt + "'>";
}
}
xx = x[i].getElementsByTagName("desc");
try {
txt = txt + xx[0].firstChild.nodeValue + "</option>";
}
catch (et) {
txt = txt + "</option>";
}
}
};
txt = txt + "</select>";
$("#partCont").append("p);
xmlhttp.open("POST", url, true);
xmlhttp.send();
pn = (pn - 1) + 2;
document.getElementById("pn").value = pn;
}
function removePart(id) {
$(id).remove();
}
And the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>EIS Kodak - Service Parts Form</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="addInput.js"></script>
</head>
<body>
<div id="nav">
<h1>Service Parts Form</h1>
</div>
<div id="content">
<p>Add Item</p>
<form id="form1" action="mailto:letichiak.broderick#kodak.com?subject=Service Parts Form" method="post" onsubmit="return mailMe( this.form )" enctype="text/plain">
<input type="hidden" id="id" value="1">
<input type="hidden" id="pc" value="1">
<input type="hidden" id="pn" value="1">
<div id="itemCont"></div>
<p style="margin-top: 20px;">
<input type="submit" value=" Submit " >
<input type="reset" value="Reset" name="reset">
</p>
</form>
</div><!--Content-->
</body>
</html>
And the XML:
<service>
<part>
<desc>Part 1 Description</desc>
<lawson>L#1</lawson>
<partnum>P#1</partnum>
<category>Category1</category>
</part>
<part>
<desc>Part 2 Description</desc>
<lawson>L#2</lawson>
<partnum>P#2</partnum>
<category>Category2</category>
</part>
<part>
<desc>Part 3 Description</desc>
<lawson>L#3</lawson>
<partnum>P#3</partnum>
<category>Category3</category>
</part>
<part>
<desc>Part 4 Description</desc>
<lawson>L#4</lawson>
<partnum>P#4</partnum>
<category>Category3</category>
</part>
</service>
I'm either missing something in the syntax or I don't know what I'm doing. Or both?
txt = txt + "</select>";
Shouldn't that line be inside the AJAX success function and also the append? Or I am missing something here. Are you atleast getting the AJAX to post properly and get the response data?
I have an xml file which i want to convert to an unordered list using jquery.
so far I managed to get the list working, except for the third level of the xml. Currently my code writes all child items of 'Navigation_sub_3'.
What I'm trying to figure out is how to write only the child nodes that are in level_2, so the output would be
Strategy
Views
IBM
etc.
UML
Development
Architecure
etc
Platform
Model
BPEL
OSLO
etc
Service
Google
Live
etc.
Below is my html/jquery file and the xml. Can anyone help me out how to display the 3rd level?
Cheers
Chris
test.html
<!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 id="Head1" runat="server">
<title></title>
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
function XmlOnLoad(xmlData, strStatus)
{
var jData = $(xmlData);
var jccNav = jData.find("Navigation");
var jSections = jccNav.children();
var jList = $("#Navi");
jSections.each(function(intSectionIndex)
{
var jSection = $(this);
var jTerm = $("<li></li>");
var jDef2 = $("<ul></ul>");
var jLevel2 = $("<b></b>");
var jLevel3 = $("<b></b>");
jSection.children().children().each(function(intPartIndex)
{
var jPart3 = $(this);
var jText3 = $("<li></li>");
// Set the li text.
jText3.html("<a>" + jPart3.attr("tooltip") + "3.level</a>");
// Append to list.
jLevel3.append(jText3);
});
jSection.children().each(function(intPartIndex)
{
var jPart2 = $(this);
var jText2 = $("<li></li>");
// Set the li text.
jText2.html("<a>" + jPart2.attr("tooltip") + " 2.level </a><ul>" + jLevel3.html());
// Append to list.
jLevel2.append(jText2);
});
jTerm.html("<a>"
+ $(this).attr("tooltip")
+ "1.ebene</a>"
+ "<ul>"
+ jLevel2.html()
);
jList.append(jTerm);
$("#homer").html(jList.html());
});
};
$(document).ready(function()
{
$.get("content.xml", {}, XmlOnLoad);
});
</script>
</head>
<body>
<div id="homer"></div>
</body>
</html>
Content.xml
<?xml version="1.0" encoding="utf-8"?>
<Navigation>
<Navigation_sub_1 tooltip="Strategy">
<!--1 Button-->
<level_2 name="Nav1" number="5" tooltip="Views">
<level_3 name="Nav1_5" number="15" tooltip="IBM" />
<level_3 name="Nav1_5" number="13" tooltip="Mainframe" />
<level_3 name="Nav1_5" number="7" tooltip="Novell" />
<level_3 name="Nav1_5" number="6" tooltip="Open- Source"/>
<level_3 name="Nav1_5" number="1" tooltip="Oracle" />
<level_3 name="Nav1_5" number="9" tooltip="SAP" />
<level_3 name="Nav1_5" number="8" tooltip="Sun" />
</level_2>
</Navigation_sub_1>
<!--2 Button-->
<Navigation_sub_2 tooltip="UML">
<level_2 name="Nav2" number="5" tooltip="Development">
<level_3 name="Nav2_5" number="10" tooltip="Architecture"/>
<level_3 name="Nav2_5" number="6" tooltip="Patterns" />
<level_3 name="Nav2_5" number="1" tooltip="SOA" />
</level_2>
</Navigation_sub_2 >
<!--3 Button-->
<Navigation_sub_3 tooltip="Platform">
<level_2 name="Nav3" number="1" tooltip="Model">
<level_3 name="Nav3_1" number="15" tooltip="BPEL" />
<level_3 name="Nav3_1" number="9" tooltip="BPMN" />
<level_3 name="Nav3_1" number="7" tooltip="DSL" />
<level_3 name="Nav3_1" number="10" tooltip="Oslo" />
<level_3 name="Nav3_1" number="1" tooltip="UML" />
</level_2>
<level_2 name="Nav3" number="7" tooltip="Service" >
<level_3 name="Nav3_7" number="3" tooltip="Azure Services" />
<level_3 name="Nav3_7" number="11" tooltip="ISB" />
<level_3 name="Nav3_7" number="6" tooltip="Live" />
<level_3 name="Nav3_7" number="8" tooltip="Live Mesh" />
<level_3 name="Nav3_7" number="13" tooltip="REST" />
<level_3 name="Nav3_7" number="9" tooltip="Web- services" />
<level_3 name="Nav3_7" number="1" tooltip="Windows Azure" />
</level_2>
</Navigation_sub_3>
</Navigation>
Have you tried to use some recursion? You could write a javascript function called writeSection. This function would write each node in a section and then if a node has children, it would call itself to write those children.