Build a repeater element using JSON

Using JavaScript with Hype
5

This is a quick example.

This is the code called by the button.

    	    window.catList =[];
         
        	 $.ajax({
            url: 'http://www.toolfolks.com/techy/getLessons.php',
            async: false, //-- makes request synchronous so we can get globals working.  see http://stackoverflow.com/a/3222509/261305
            type: 'POST',
            dataType: 'JSON',
            data: {
                           },
             success: function (res) {
             
             	window.catList = res;

                    }
        });
         
         
     //--To Test 
      /*
    window.catList = [{"lessonsID":"1","categoriesID":"1","name":"Asbestos Awareness","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/manDanger.png"},
     {"lessonsID":"2","categoriesID":"1","name":"Lifting","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/manLift.png"},
     {"lessonsID":"3","categoriesID":"1","name":"Other","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/wavesBackground.jpg"},
     {"lessonsID":"4","categoriesID":"2","name":"Other","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/manLungs.png"},
     {"lessonsID":"5","categoriesID":"2","name":"Other","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/cloudBackground.jpg"},
     {"lessonsID":"6","categoriesID":"2","name":"Other","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/asbestos2.jpg"},
     {"lessonsID":"7","categoriesID":"2","name":"Other","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/asbestos1.jpg"}]
    */


         
         
        for (index = 0; index < window.catList.length; index++) { 
        var catid = 'categoriesID' + window.catList[index]['categoriesID'];

         doClone(index,catid);
         

        }


        function doClone(index,categoriesID){
         

         
        if (!window.idIndex) { window.idIndex = 1};
            	 	
            		var originalElement  = hypeDocument.getElementById('groupOrig'); 
             
             		// Clone to a Div/Group in the scene  
             		var append_the_clone_To =  hypeDocument.getElementById(categoriesID);  
         
             
             
             //-- clone
           
          
           var thisCloneElemenet =  hypeDocument.cloneElement(originalElement,append_the_clone_To,'imageGroupClone'+ window.idIndex,'imageGroupClone',0,0  ,2000)
         
         
         //-- update clone
        var imageClone = thisCloneElemenet.querySelector('.imageClone')
        var textClone = thisCloneElemenet.querySelector('.textClone')

        imageClone.style.backgroundImage =  "url('" + window.catList[index]['lessonImage'] + "')";
        textClone.innerHTML = window.catList[index]['name'];
        thisCloneElemenet.onclick = function(){  alert(window.catList[index]['lessonImage']); };

             window.idIndex++;

It uses the clone Extension
So you will need to add that as instructed on the extensions page.

In the project I have added a dummy group with an Image and text. (Both have class names which are used later on)

The dummy Group is what we clone.

The spacing of the clone elements is done with css in the Head. Which simply sets the float and position of the clone groups. This saves us having to work out positions.

The dummy group’s size is what determines the padding between the clones.

The clones then have the attributes added that you want.

The category groups (divs) have ids that are used in the code. They also have scroll bars.

offers_MHv1.hype.zip (148.8 KB)

1 Like