JSFiddle - React, Tailwind, and code Playground

by ignaciocorreia

HTML

<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<ul id="lazy_list" data-role="listview" data-theme="b"></ul>
<div id="loadcontentContainer"><input type="button" name="verify" id="loadcontent" data-icon="arrow-r" data-iconpos="right" data-theme="a" value="Load More" /></div>

JavaScript

var paginacao = 0;
var totalartigos = 58;

function gerarConteudos() {
    if(paginacao < totalartigos){
      $.ajax({
        type: "GET",
        url: "http://www.quintadolago.com/en/property/our-property-collection/properties?format=xml&start=" + paginacao  ,
        dataType: "xml",
        success: parseXml
      });
      function parseXml(xml){
      //find every Tutorial and print the author
      $(xml).find("item").each(function() {
        var idImovel                    = $(this).find("id").text();
        var titleImovel                 = $(this).find("title").text();
        var img_geralImovel             = $(this).find("img_geral").text();
        var price_reImovel              = $(this).find("price_re").text();
        var code_reference_reImovel     = $(this).find("code_reference_re").text();
        var location_reImovel           = $(this).find("location_re").text();
        var currency_reImovel           = $(this).find("currency_re").text();        
        var bedrooms_reImovel           = $(this).find("bedrooms_re").text();
        var property_type_reImovel      = $(this).find("property_type_re").text();
        var offer_typeImovel            = $(this).find("offer_type").text();
          
        $(  
          '<li class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-up-c">'
        + '<div class="ui-btn-inner ui-li ui-li-has-alt">'
        + '<div class="ui-btn-text">'
        + '<a href="#" class="ui-link-inherit" >'
        //+ idImovel
        + '<img src="' + img_geralImovel + '" class="ui-li-thumb" />'
        + '<h3 class="ui-li-heading">' + titleImovel + '</h3>'
        + '<p>' + price_reImovel + '</p>'
        + '<p>' + currency_reImovel + '</p>'
        + '<p>' + code_reference_reImovel + '</p>'
        + '<p>' + location_reImovel + '</p>'
        + '<p>' + bedrooms_reImovel + '</p>'
        + '<p>' + property_type_reImovel + '</p>'
        + '<p>' + offer_typeImovel + '</p>'
        + '</a>'
        +...