jQuery Mobile loading accordion dynamically not functioning

jQuery Mobile loading accordion dynamically not functioning

I am loading the jQuery Mobile accordion dynamically via JavaScript and having it create the elements and inject the HTML into the page. Now when I do this, I don't get the styles, I don't get the theme and I don't get the functionally. It basically does not work. Does anyone know why it is doing this? let me know if you need anymore info.

  2. $('#film').attr({'data-role': 'collapsible-set', 'data-theme': 'c', 'data-content-theme': 'd'});

  4. var sort_by = function(field, reverse, primer){
  5. var key = function(x) {return primer ? primer(x[field]) : x[field]};
  6. return function(a,b) {
  7. var A = key(a), B = key(b);
  8. return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1,1][+!!reverse];
  9. }
  10. }

  12. $.ajax({
  13. type: 'GET',
  14. url: 'list',
  15. async: false,
  16. jsonpCallback: 'fl',
  17. contentType: 'application/json',
  18. dataType: 'jsonp',
  19. success: function(data) {
  20. var tmp = [];
  21. for(var i=0;i<data.nodes.length;i++) {
  22. tmp.push(data.nodes[i].node);
  23. }
  24. tmp.sort(sort_by('title', true));
  25. var div = document.createElement('div');
  26. $('#film').append(div);
  27. $(div).attr( 'data-role', 'collapsible' );
  28. var heading = tmp[0]['title'][0];
  29. var h3 = document.createElement('h3');
  30. h3.innerHTML = heading;
  31. $(div).append(h3);
  32. h3=null;
  33. var title = '';
  34. for(var i=0;i<tmp.length;i++) {
  35. if(tmp[i]['title'] != title){ title=tmp[i]['title'];
  36. if(tmp[i]['title'][0] !== heading){
  37. heading = tmp[i]['title'][0];
  38. var div = document.createElement('div');
  39. $('#film').append(div);
  40. $(div).attr( 'data-role', 'collapsible' );
  41. var h3 = document.createElement('h3');
  42. h3.innerHTML = heading; 
  43. $(div).append(h3);
  44. h3=null;
  45. }
  46. var p = document.createElement('p');
  47. p.innerHTML += "<a>"+tmp[i]['title']+"</a>";
  48. $(div).append(p);
  49. p=null;
  50. }
  51. }
  52. }
  53. });