Ajax script to lazy-load xml into div

Question

I'm basically trying to lazy-load contents of div in a popular book site.
What I have done so far is:

Scraped the reqiured content using simple_html_dom.php parser and displayed in php file
Created xml file for storing the scraped data(title, author, img) using simpleXml (also tested content by displaying on html page)

The xml tree generation

<?php
include_once('simple_html_dom.php');
$target_url = "http://www.amazon.in/gp/bestsellers/books/1318209031/ref=zg_bs_nav_b_2_1318203031";
$html = new simple_html_dom();
$html->load_file($target_url);

$xml = "<BOOKLIST>";
foreach($html->find('div[class=zg_itemWrapper]') as $post)
{
 $xml .= "<BOOK>";
 foreach($post->find('div[class=zg_itemImageImmersion] img') as $image)
 $xml .= "<IMAGE>".$image->src."</IMAGE>";
  foreach($post->find('div[class=zg_title] a') as $title)
  {
   $xml .= "<TITLE>".$title->href."</TITLE>";
   $xml .= "<TITLENAME>".$title->innertext."</TITLENAME>";
  }
 foreach($post->find('div[class=zg_byline]') as $author)
 $xml .= "<AUTHOR>".$author->plaintext."</AUTHOR>";

/*  I don't know why but the parser doesn't seem to generate 'price' tag
foreach($post->find('strong[class=price]') as $price)
 $xml .= "<price>".$price->text."</price>";
*/
 $xml .= "</BOOK>";
}
$xml .= "</BOOKLIST>";
$sxe = new SimpleXMLElement($xml);
$sxe->asXML("test.xml");
?>

The html file displaying contents from xml tree using simpleXml is as follows:

<html>
<body>
<script>
 xmlhttp=new XMLHttpRequest();
 xmlhttp.open("GET","test.xml",true);
 xmlhttp.send();
 xmlDoc=xmlhttp.responseXML;

document.write("<div class='container' id='result'>");
var x=xmlDoc.getElementsByTagName("BOOK");
for (i=0;i<x.length;i++)
{
 document.write("<div class='span3' id='lazy'>");
 document.write("<div class='span2'>");
 document.write("<img src="+x[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue+"></img>");
 document.write("</div>");
 document.write("<div class='span2'>");
 document.write(x[i].getElementsByTagName("AUTHOR")[0].childNodes[0].nodeValue);
 document.write("</div>");
 document.write("<div class='span3' style='padding:0;margin-left:20px;height:auto'>");
 document.write("<a href="+x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue+">"+x[i].getElementsByTagName("TITLENAME")[0].childNodes[0].nodeValue+"</a>");
 document.write("</div>");
 document.write("</div>");
}
document.write("</div>");
</script>
</body>

<script>
function reloadq()
{
 var position = $("#lazy").offset().top;      
 var scllwidth = $(window).scrollTop() + $(window).height();
 if ( scllwidth > position)
 {
   alert( "Time to Load Content! Ajax request goes here" );
 }
}
$(window).scroll( function() { reloadq() } )
</script>
</html>

When I scroll this page, the alert (in the jquery script for placing ajax later) works.
The part where i need help is how to load content from xml file using ajax for lazy load.
Please do advice a solution, or where I'm going wrong. Thank you :)

hendr1x · Accepted Answer · 2013-08-14 14:34:39Z

1

First off, why aren't you using Jquery's ajax function? http://api.jquery.com/jQuery.ajax/

Regardless, start by doing an alert with the ajax response data (or use your browsers developer tools/firebug to view response). Once you are successfully retrieving the data alert a single piece of data from the x array. Once you have a proper looping array with data being retrieve worry about outputting it on the screen.

Obviously to help with testing you can just have the ajax query trigger on page load so you don't have to scroll everytime.

answered Aug 14, 2013 at 14:34

hendr1x

1,5011 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ajax script to lazy-load xml into div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related