do-web/jTinder

Dynamic Html

Opened this issue · 7 comments

josef1708 commented

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

josef1708 commented

okay ..i changed some code and now its this state:

I can now create my own dynamic list and set the images...

BUT:
i can only start the function when i click the like button!?
The function of swiping is not animated anymore but shows on pulling the nope or yes image...anyone an idea?

boehser commented

Did you found a solution for this, josef?

josef1708 commented

no...i changed the way how to load the items ...but iam still fixed for the 5 items...

bydbest commented

@josef1708 can u please help in full code for dynamic retrival of images from server and load more content once the users reaches 4 th or 5th images just like load more

nikhilthegrizzlybear commented

Hey guys, any luck by any chance?

josef1708 commented