Response title
This is preview!
I love jquery! I have been using Flex for this stuff but am migrating my stuff but i hit a snag and what to share with the community.
Problem: I have a large xml file that reads in great with the ajax get - xml but I have tried to use selectors like gt(20):lt(200) to limit the number of products exposed to allow quicker loading as there are 400 plus products.
I can get the selector to work on sample files but cannot it limit the number of products. any suggestions are welcome.
The idea is to have smaller sets of products that can be loaded via a next button or some search. You can see how slow it loads at http://site.oakhillgarden.com/astore/index.html
The xml must be loaded in same domain as script of course (I tried that to no avail) the link to the latest xml (they change this periodically for some reason or I would just include the xml output) output is
Script
--------------------------------------------------------
<!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 name="viewport" content="width=470; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<title>iGarden</title>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "objinfo.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Product').each(function(){
var Id = $(this).attr('Id');
var Code= $(this).find('Code').text();
var Url = $(this).find('Url').text();
var Description = $(this).find('Description').text();
var Caption= $(this).find('Caption').text();
var Thumb= $(this).find('Thumb').text();
$('<div class="items" Id="link_'+Id+'"></div>').html('<a href target="_blank" ="'+Url+'">'+Description+'</a> '+Thumb+' <b>Description:</b> '+Caption+' <b>Code: </b>'+Code+' ').appendTo('#page-wrap');
//$('<div class="items"></div>').html'<a href="'+Url+'">'Order'</a> ').appendTo('#page-wrap');
$(this).find('Pricing').each(function(){
var BasePrice = $(this).find('BasePrice').text();
var OrigPrice= $(this).find('OrigPrice').text();
//$('<div class="brief"></div>' ).html(BasePrice).appendTo('#link_'+Id);
//$('<div class="long"></div>').html(Thumb).appendTo('#link_'+Id);
$('<div class="long"></div>').html ('<a href="http://order.store.yahoo.net/cgi-bin/wg-order?yhst-28708183544533+'+Code+' ">Order</a> <i>Sale $ '+BasePrice+' <i> Regular <s>$'+OrigPrice+' </s><hr>').appendTo('#link_'+Id);
});
});
}
});
$(" [id]:gt(50):lt(100)").hide(); // I have tried slice etc all don't work
});
</script>
</head>
<body>
<div id="page-wrap">
<h1>iGarden App</h1>
</div>
</body>
</html>
1