Silverlight Doesn't Call OnLoad Parameter

Silverlight Doesn't Call OnLoad Parameter - javascript

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

Related

ASP.Net barcode reader show data

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/

why the event of asp:button does not fire although all inputs are valid?

I have an aspx page with some asp:textBox.
every TextBox has some validator controls.
I use bootstrap glyphicons for notifying the user about the validation of the input.
for example:
aspx:
<div id="trId" runat="server" class="row">
<div class="col col-md-1 col-xs-1">
</div>
<div class="col col-md-3 col-xs-3>your id</div>
<div class="col col-md-5 col-xs-6">
<div id="divId" class="form-group has-feedback">
<asp:TextBox ID="txtId" CssClass="form-control" runat="server" MaxLength="9" TabIndex="4" EnableViewState="false" ValidationGroup="idValidation" onchange="validateWithFeedback('idValidation','txtId');" CausesValidation="true"></asp:TextBox>
<span class="glyphicon form-control-feedback "></span>
</div>
</div>
<div class="col col-md-2 col-xs-2">
<asp:RequiredFieldValidator ID="RequiredFieldValidatorId" CssClass="validation" Visible="false" ControlToValidate="txtId" ValidationGroup="idValidation" runat="server" ErrorMessage="*" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" CssClass="validation" ControlToValidate="txtId" ValidationGroup="idValidation" runat="server" ValidateEmptyText="true" ErrorMessage="*" ValidationExpression="\d{1,9}" Display="Dynamic"></asp:RegularExpressionValidator>
<asp:CustomValidator ID="CustomValidator3" runat="server" CssClass="validation" ErrorMessage="*" ControlToValidate="txtId" ValidationGroup="idValidation" ValidateEmptyText="true" ClientValidationFunction="ValidateID" Display="Dynamic"></asp:CustomValidator>
</div>
javascript:
function validateWithFeedback(group,id) {
if (Page_ClientValidate(group)) {
$("#" + id).parent('div').removeClass('has-error');
$("#" + id).parent('div').addClass('has-success');
$("#" + id).parent('div').children('span').removeClass('glyphicon-remove');
$("#" + id).parent('div').children('span').addClass('glyphicon-ok');
}
else {
$("#" + id).parent('div').addClass('has-error');
$("#" + id).parent('div').removeClass('has-success');
$("#" + id).parent('div').children('span').addClass('glyphicon-remove');
$("#" + id).parent('div').children('span').removeClass('glyphicon-ok');
Page_IsValid = false;
}
var required = false;
var validators = $(Page_Validators);
if ($("#" + id).val() == "" && $("#" + id).text() == "") {
// debugger;
for (var i = 0; i < validators.length; i++) {
if (Page_Validators[i].controltovalidate==id && $(Page_Validators[i]).attr('data-val-evaluationfunction') == "CustomValidatorEvaluateIsValid")
required = true;
}
if (!required) {
$("#" + id).parent('div').removeClass('has-error');
$("#" + id).parent('div').removeClass('has-success');
$("#" + id).parent('div').children('span').removeClass('glyphicon-remove');
$("#" + id).parent('div').children('span').removeClass('glyphicon-ok');
}
}
}
submit button:
<asp:Button runat="server" ID="btnSubmit" CssClass="btn-sm btn-info" Text='submit' TabIndex="19" CausesValidation="true" OnClientClick="return Validate();" OnClick="btnSubmit_Click" UseSubmitBehavior="false"></asp:Button>
javascript:
function validateWithFeedback(group,id) {
if (Page_ClientValidate(group)) {
$("#" + id).parent('div').removeClass('has-error');
$("#" + id).parent('div').addClass('has-success');
$("#" + id).parent('div').children('span').removeClass('glyphicon-remove');
$("#" + id).parent('div').children('span').addClass('glyphicon-ok');
}
else {
$("#" + id).parent('div').addClass('has-error');
$("#" + id).parent('div').removeClass('has-success');
$("#" + id).parent('div').children('span').addClass('glyphicon-remove');
$("#" + id).parent('div').children('span').removeClass('glyphicon-ok');
Page_IsValid = false;
}
var required = false;
var validators = $(Page_Validators);
if ($("#" + id).val() == "" && $("#" + id).text() == "") {
// debugger;
for (var i = 0; i < validators.length; i++) {
if (Page_Validators[i].controltovalidate==id && $(Page_Validators[i]).attr('data-val-evaluationfunction') == "CustomValidatorEvaluateIsValid")
required = true;
}
if (!required) {
$("#" + id).parent('div').removeClass('has-error');
$("#" + id).parent('div').removeClass('has-success');
$("#" + id).parent('div').children('span').removeClass('glyphicon-remove');
$("#" + id).parent('div').children('span').removeClass('glyphicon-ok');
}
}
}
javascript:
function Validate() {
validateWithFeedback('idValidation', 'txtId');
var isValid = true;
isValid = isValid && Page_ClientValidate('idValidation');
return isValid;
}
everything is perfect, except of fact that when I click on btnSubmit the event in server side doesn't fire although all inputs are valid.
what can be the problem?

Custom splash screen doesn´t display

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">

jquery children attach remove edit input

to get more than what you expect may be nice on your birthday - but this in script drives you crazy... :(
i've got the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="id1" class="fragenMainDiv" style="width: 80%; margin: 0px;">
<input type="button" id="id1_edit" class="editIcon" value="change">
<span id="id1_Label" class="fragenLabel">
<p>
<span style="margin-left:5px;">
<b>something</b>
</span>
</p>
</span>
</div>
</div>
</form>
</body>
<script type="text/javascript">
$(document).ready(function () {
showMain();
});
function showMain() {
$('.editIcon').css("cursor", "pointer").click(function () {
edit($(this).attr("id"));
});
$('.editfinish').css("cursor", "pointer").click(function () {
editFinish($(this).attr("id"));
});
}
function edit(idTemp) {
//alert(fragenidTemp);
var IdArray = idTemp.split("_");
var Id = IdArray[0]
var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text();
$('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<input id=input" + Id + " type=text size=70 style=margin-left:4px;></input><input type=button id=" + Id + " class=editfinish value=change />");
$('input[id|="input' + Id + '"]').val(inputValue);
$('.editIcon').hide();
showMain();
}
function editFinish(Id) {
var inhaltFrage = $('input[id|="input' + Id + '"]').val();
$('.editIcon').show();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<b>" + inhaltFrage + "</b>");
showMain();
}
</script>
</html>
what I want is an input field that reacts like a normal input field - but after the first (correct) change of value the form shows three times the input field...
Does someone have an idea? As it is a condensed script of a larger script so I need the structure of functions. Thanks for your help :)

Argghhh I finally found it. Dude you cannot use show main after every edit and editFinish. Becuse you are stacking several same event to one click ! The code shoul look like this :
function edit(idTemp) {
//alert(fragenidTemp);
var IdArray = idTemp.split("_");
var Id = IdArray[0]
var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text();
$('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<input id=input" + Id + " type=text size=70 style=margin-left:4px;></input><input type=button id=" + Id + " class=editfinish value=change />");
$('input[id|="input' + Id + '"]').val(inputValue);
$('.editIcon').hide();
$('.editfinish').css("cursor", "pointer").click(function () {
editFinish($(this).attr("id"));
});
}
function editFinish(Id) {
var inhaltFrage = $('input[id|="input' + Id + '"]').val();
$('.editIcon').show();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<b>" + inhaltFrage + "</b>"); }
Hope that you see the error now, if not i can explain in detail.

HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn_change" value="Change" />
<span id="id1_Label" class="fragenLabel">
</span>
<span id="id1_Input">
<input type="text" id="content1_edit" value="default-value" />
</span>
</div>
</form>
</body>
</html>
JAVASCRIPT
$(document).ready(function(){
// Mostly this should be coming from database on page-load;
updateVal();
$("#btn_change").click(function(){
if( $(this).val() == "Change" )
{
editVal();
}
else
{
updateVal();
}
})
});
function editVal()
{
$("#id1_Label").hide();
$("#id1_Input").show();
$("#btn_change").val("Update");
}
function updateVal()
{
$("#id1_Label").html( $("#content1_edit").val()).show();
$("#id1_Input").hide();
$("#btn_change").val("Change");
}
Fiddle for demo: http://jsfiddle.net/dharmavir/5yMZk/

jQuery/AJAX/XML stuck

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?

Develop Reference

JavaScript is the programming language of the Web.

Silverlight Doesn't Call OnLoad Parameter - javascript

Related

ASP.Net barcode reader show data

why the event of asp:button does not fire although all inputs are valid?

Custom splash screen doesn´t display

jquery children attach remove edit input

jQuery/AJAX/XML stuck

Categories

Resources