JSFiddle - React, Tailwind, and code Playground

by wwwroot

HTML

<div class="row-fluid"></div>
<img scr="http://oilandgas.rockwellautomation.com/images/loading.gif" class="loadingPic" />

JavaScript

function createBookRow(bookid)
{
$.get('http://www.csn-uk.net/atiwd/books/course/'+bookid+'/xml', function(xml){  

$(xml).find('book').each(function(){  
var $book = $(this); 
var id = $book.attr("id"); 
        var title = $book.attr("title");  
        var isbn = $book.attr("isbn");
        var borrowedcount = $book.attr("borrowedcount");
        var  html = '<div class="span3"><img name="test" src="http://covers.openlibrary.org/b/isbn/'+isbn+'-L.jpg" width="32" height="32" alt=""></p>' ; 
         html += '<p> ' + title + '</p>' ;  
         html += '<p> ' + isbn + '</p>' ;  
         html += '<p> ' + borrowedcount + '</p>' ;  
         html += '</div>';  
        $('.row-fluid').append($(html));  
    });         
}); 
}



 $(document).ready(function()  
  {  
    $.get('xml/courses.xml', function(xml){  
    $(xml).find('course').each(function(){ 

        var $course = $(this); 
        var id = $course.attr("id"); 
        var title = $course.text();  
        var html = '<div class="span12"><p>' + title + '</p><row id="'+id+'" >'+createBookRow(id)+'</row></div>' ;  
        $('.row-fluid').append($(html));   
        $('.loadingPic').fadeOut(1400); 
    });  
});


});