Dynamic Html #28
Description
Hi, thanks for this amazing plugin.
I have an issue...if i generate the needed html code the frame of your plugins is visible but cannot do any action.
What i did?
I get a json file from my server with an array of products and generated via js the html code just like the orginal one.
What do i want to achieve?
I want to achieve that when i only get 2 products as json the sliding function shall implement that and should only show the both object.
`var data = null;
var xhr = new XMLHttpRequest();
var img = []; // ARRAY MIT LINKS VON BILDER
var textarray = [];//ARAY MIT LISTELEMENTEN
var cars=[];
var options = [ 1, 2, 3, 4, 5, 6 ];
/*
* GET DATA FROM SERVER-----LOCALHOST:8888/data-------------------------------
* save Objects in Array
* separate Img from arrays
*/
function getimage(array) { // VON OBJEKTE URLs IN IMAGE-ARRAY SPEICHERN
for (var i = 0; i < array.length; i++) {
img[i] = array[i].modelImageUrl;
console.log(img[i]);
}
}
/*
* Liste erstellen
*/
function makeUL(array) {
for (var i = 0; i < array.length; i++) {
textarray[i] = "pane" + (i + 1);
}
// Create the list element:
var list = document.createElement('ul');
for (var i = 0; i < array.length; i++) {
// Create the list item:
var list1 = document.createElement('li');
list1.className = textarray[i];
// Set its contents:
//list1.appendChild(document.createTextNode(array[i]));
// Add it to the list:
list.appendChild(list1);
var item2=document.createElement('div');
item2.className="img";
//item2.appendChild(document.createTextNode(array[i]));
list1.appendChild(item2);
var item3=document.createElement('div');
//MODELLNAMEN VON JEWEILIGEM FAHRZEUG
item3.textContent=array[i].series;
console.log(array[i].series);
//item3.appendChild(document.createTextNode(array[i]));
list1.appendChild(item3);
var item4=document.createElement('div');
item4.className="like";
//item4.appendChild(document.createTextNode(array[i]));
list1.appendChild(item4);
var item5=document.createElement('div');
item5.className="dislike";
//item5.appendChild(document.createTextNode(array[i]));
list1.appendChild(item5);
}
// Finally, return the constructed list:
return list;
}
//Add the contents to tinderslide`
//DATEN HOLEN VOM SERVER
xhr.withCredentials = true;
var obj;
xhr.addEventListener("readystatechange", function() {
if (this.readyState === 4) {
console.log(this.responseText);
obj = JSON.parse(this.responseText);
cars=obj;
// console.log(obj); // OBJEKTE AUSSPUCKEN
getimage(obj); // BILDER ABSICHERN
document.getElementById('tinderslide`').appendChild(makeUL(obj));//Liste erstellen
}
});
xhr.open("GET", "http://localhost:8888/data");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.setRequestHeader("postman-token", "f63f1e32-4633-2100-d74e-0159235048d4");
xhr.send(data);
//-----------------------------------//
//-------------------------------------------------------------------------------------
/**jTinder initialization
*/
$("#tinderslide").jTinder({
// dislike callback
onDislike : function(item) {
// set the status text
$('#status').html('Dislike Car ' + (item.index() + 1));
},
// like callback
onLike : function(item) {
// set the status text
$('#status').html('Like Car ' + (item.index() + 1));
},
animationRevertSpeed : 200,
animationSpeed : 400,
threshold : 1,
likeSelector : '.like',
dislikeSelector : '.dislike'
});
/**
* Set button action to trigger jTinder like & dislike.
*/
$('.actions .like, .actions .dislike').click(function(e) {
e.preventDefault();
$("#tinderslide").jTinder($(this).attr('class'));
});
Where is the problem?Would be nice if you could help me