JSFiddle - React, Tailwind, and code Playground

by veeuze

HTML

<div id="step1"></div>
<br />
<div id="step2"></div>
<br />
<div id="step3" style="width:100%;"></div>
<div id="content" style="width:100%;"></div>

CSS

.list_row {
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 10px;
  font-family: Verdana;
  font-size: 90%;
  color: #000;
  text-align: left;
  clear: both;
}

.element {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin: 10px;
  font-family: Verdana;
  font-size: 80%;
  color: #000;
  text-align: left;
  float: left;
}

JavaScript

// Work with TEXTURE-LIST (SIMPLE) of the customer
var s_string = "https://integrate.materialo.com/v2.0/get_datalist_materials.php?cnf=ostermann&cols=article_nr;info&skeys=uses;search_criteria_24&svals=9;varianta";
var demo_link = "https://integrate.materialo.com/v2.0/get_img_material.php?cnf=ostermann&w=100&h=100&show3d=0&artnr=";

$(document).ready(function() {
  loadObjlist();
});

function loadObjlist() {
  // STEP1: Getting a complete TEXTURE-LIST of the customer in JSON-format ______________________________
  $.ajax({
    url: s_string,
    type: "GET",
    data: {},
    error: function() {
      $("#step1").html('ERROR');
    },
    success: function(data) {
      createSceneList(data);
    },
    dataType: "text"
  });
}

function createSceneList(data) {
  //$("#step2").html(data);
  var JSON_data, i, j, temp = '',
    list = '',
    id = '';

  // STEP2: Check and parse JSON-response
  JSON_data = JSON.parse(data);
  if (JSON_data.status == 1) {
    // STEP3: DEMO ___________________________________________________________________________________
    j = JSON_data.resultlist.length;
    for (i = 0; i < j; i++) {

      id = 'txtr_' + i;
      list = '<div id="' + id + '" class="element">' + '<img src="' + demo_link + JSON_data.resultlist[i].article_nr + '" /><br /><span class="sceneName" style="display:none;">' + JSON_data.resultlist[i].article_nr + '</span>' + '</div>';
      $("#content").append(list);

      $('#' + id).data({
        id: JSON_data.resultlist[i].id,
        iname: JSON_data.resultlist[i].article_nr,
        type: 'scene'
      });
    }
    $('.element').on('mouseover', function() {
      $(this).find('.sceneName').show();
    });
    $('.element').on('mouseout', function() {
      $(this).find('.sceneName').hide();
    });
    $('.element').on('click', function() {
      alert("texture id:" + $(this).data().id);
    });
  }
}