<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Products.aspx.cs" Inherits="jQuery1.Products" %>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<?xml version="1.0" encoding="UTF-8"?>
<products>
<product>
<id>P-22345</id>
<name>LCD Television</name>
<price>$500</price>
<discount>5%</discount>
</product>
<product>
<id>P-13245</id>
<name>Mac Mini</name>
<price>$700</price>
<discount>2%</discount>
</product>
<product>
<id>P-52346</id>
<name>Home Theatre</name>
<price>$500</price>
<discount>1%</discount>
</product>
<product>
<id>P-78385</id>
<name>Laptop Computer</name>
<price>$1500</price>
<discount>5%</discount>
</product>
<product>
<id>P-78385</id>
<name>Desktop Computer</name>
<price>$1000</price>
<discount>7%</discount>
</product>
</products>
js
$(document).ready(function() {
$('#loadBtn').click(function() {
$.ajax({
url:'Product_details.xml',
type:'get',
datatype:'xml',
error:function(jqxHR,textstatus,errorThrown){
Console.log('Error:',+errorThrown);},
success:function(xml){
xmlDoc = $.parseXML( xml );
$xml = $( xmlDoc );
if($xml.find("product").length>0&&$.trim("id").length>0)
{
var id = $.trim($("#txtID").val());
var product="Product: Contains('"+id+"')";
if(product.length>0)
{
console.log('AJAX Request is succeded.');
var productsTable = '';
productsTable += '<table id="productsTable" cellspacing="0" cellpadding="2" border="1">';
productsTable += '<thead><td>Id</td><td>Name</td><td>Price</td><td>Discount</td></thead>';
productsTable += '<tr>';
productsTable += '<td>'+$(xml).find(product).text()+'</td>';
productsTable += '<td>'+$(xml).find(product).next("name").text()+'</td>';
productsTable += '<td>'+$(xml).find(product).next("price").text()+'</td>';
productsTable += '<td>'+$(xml).find(product).next("discount").text()+'</td>';
productsTable += '</tr>';
productsTable += '</table>';
$("#products").append(productsTable);
}
else
{
$("#products").append("No elements found"+product);
}
}
},
});
});
});