How to create a function in Jquery and added into an element? (jquery delegation)

I have a json data, and want to process it in Javascript and meanwhile generate a grid to append in  <form id="supplierFilter">.

The code is as following.

Javascript code:

 $(document).ready(function() {  
      var DTclass = ${class};  
      $.fn.classfunction = function() {  
            console.log("classes json:"+DTclass);  
          var columndiv;  
          var classes;  
          for (var i = 0; i < DTclass.length; i++) {  
               columndiv = $("<div class='col-sm-3'>");  
               classes = $("<div class='checkbox'>");  
               classes.append("<label> <input name='filter' value='"+DTclass[i].IMG_FILE_ID+"' type='checkbox'/>     <img src='${pageContext.request.contextPath}/download/"+DTclass[i].IMG_FILE_ID+"' alt='"+DTclass[i].DISPLAY_NAME+"' title='"+DTclass[i].DISPLAY_NAME+"'' /> "+DTclass[i].DISPLAY_NAME);  
               columndiv.append(classes);  
            $('#supplierFilter').append(columndiv);   
          }  
        };   
             $('#supplierFilter').classfunction();            
      )}    

HTML code:

 <form id="supplierFilter"></form>  

At beginning, I just use a regular javascript function, it did generate the html code, but when I clicked on the checkbox function, the function won't be triggered. This is caused by jquery delegation. There are more detail information from :

http://learn.jquery.com/events/event-delegation/

How to get last inserted id in DB2?

I have two tables in db2, one child, one parent. I would like to insert data into one table, and get the id (which auto generated in the db2,) then insert the id into another table as a foreign key by using ETL tool, Talend open studio.

After a long time research I found out a solution.
Within the same connection and same transaction use tDB2Input with this select:

 SELECT Identity_val_Local() as id FROM sysibm.sysdummy1  

The Talend job is like this:

 

How to create a dynamic bootstrap grid by using json data from a URL?

I want to display the above dynamic data by using bootstrap grid . The data is in Json format from a  server side URL. Json format data is as below.

 [{"DISPLAY_NAME":"Agreement Supplier","IMG_FILE_ID":138},  
  {"DISPLAY_NAME":"Subrecipient","IMG_FILE_ID" :102},  
  {"DISPLAY_NAME":"California Supplier","IMG_FILE_ID":103},  
  {"DISPLAY_NAME":"Certified Small Business Concern","IMG_FILE_ID":162},  
  {"DISPLAY_NAME":"HUBZone Small Business","IMG_FILE_ID":163},  
  {"DISPLAY_NAME":"Minority-Owned Business","IMG_FILE_ID":164},  
  {"DISPLAY_NAME":"Service-Disabled Veteran-Owned","IMG_FILE_ID" :165},  
  {"DISPLAY_NAME":"Small Business","IMG_FILE_ID":166},  
  {"DISPLAY_NAME":"Small Disadvantaged Business","IMG_FILE_ID":167},  
  {"DISPLAY_NAME":"Veteran-Owned Small Business","IMG_FILE_ID":168},  
  {"DISPLAY_NAME":"Women-Owned Small Business","IMG_FILE_ID":169},  
  {"DISPLAY_NAME":"AbilityOne","IMG_FILE_ID":139},  
  {"DISPLAY_NAME":"8(a)","IMG_FILE_ID":170},  
  {"DISPLAY_NAME":"Catering Supplier","IMG_FILE_ID":171},  
  {"DISPLAY_NAME":"Individual","IMG_FILE_ID":116}]   

I used jQuery to read data from URL and generate the HTML code. The code is as following.

 $(document).ready(function() {  
 // top classes selection  
      $.getJSON("${pageContext.request.contextPath}/download/${classesfileId}",  
             function (json) {  
               console.log(json);  
               var columndiv;  
               var classes;  
               for (var i = 0; i < json.length; i++) {  
                    columndiv = $("<div class='col-sm-3'>");  
                    classes = $("<div class='checkbox'>");  
                    classes.append("<label> <input name='filter' value='"+json[i].IMG_FILE_ID+"' type='checkbox'/><img src='${pageContext.request.contextPath}/download/"+json[i].IMG_FILE_ID+"' alt='"+json[i].DISPLAY_NAME+"' title='"+json[i].DISPLAY_NAME+"'' /> "+json[i].DISPLAY_NAME);  
                    columndiv.append(classes);  
                $('#supplierFilter').append(columndiv);   
               }  
             });  
 });  

In the HTML, I have code as this:

 <form id="supplierFilter">  
 </form>  

When it display in browser, the HTML is generated as this:

 <form id="supplierFilter">  
      <div class="col-sm-3">  
           <div class="checkbox">  
           <label>  
                <input type="checkbox" value="138" name="filter">  
                <img title="Agreement Supplier" alt="Agreement Supplier" src="/supsearch/download/138">  
                Agreement Supplier  
           </label>  
           </div>  
      </div>  
      <div class="col-sm-3">  
           <div class="checkbox">  
           <label>  
                <input type="checkbox" value="102" name="filter">  
                <img title="Subrecipient" alt="Subrecipient" src="/supsearch/download/102">  
                Subrecipient  
           </label>  
           </div>  
      </div>  
      <div class="col-sm-3">  
           <div class="checkbox">  
                <label>  
                <input type="checkbox" value="103" name="filter">  
                <img title="California Supplier" alt="California Supplier" src="/supsearch/download/103">  
                California Supplier  
                </label>  
           </div>  
      </div>  
      <div class="col-sm-3">  
           <div class="checkbox">  
                <label>  
                <input type="checkbox" value="162" name="filter">  
                <img title="Certified Small Business Concern" alt="Certified Small Business Concern" src="/supsearch/download/162">  
                Certified Small Business Concern  
                </label>  
           </div>  
      </div>  
      ......  
 </form>