Android : header of collapsible listview not refreshing using jquery mobile and cordova

I am building an app using Cordova and JQuery Mobile 1.4.3 which pulls data from a webservice. I have no problems attaining the data once cordova has loaded and updating the DOM.

The data is presented within a collapsible list with each heading and view updated according to the data returned from the webservice.

However, once the DOM update is complete, the collapsible heading does not refresh its style while the content does. Additionally the heading remains clickable too.

I have scoured the web for a solution but cannot find a way to get the headers for the collapsible to refresh their views.

I have tried using $("#id").collapsible('refresh') to no avail.

Any help on how to update the UI would be great

Code below.

Header scripts of index.html

<script type="text/javascript">
   document.addEventListener("deviceready", onDeviceReady, false);
   function onDeviceReady() {
      init();
   }              
</script>

Snippet of Markup

<div data-role="page" id="home" data-title="Home">
    <div data-role="header" data-id="foo" data-position="fixed">
        <h1>Title</h1>
        <a href="#menu" data-icon="bars" data-iconpos="notext" data-transition="slide" data-corners="false" data-shadow="false" class="ui-btn-right"></a>
    </div>

    <div data-role="content" id="collapsible_set">
        <h3 id="date"></h3>
        <div data-role="collapsibleset" id="datacollapsible" data-inset="false">

            <!-- First Collapsible -->
            <div data-role="collapsible" id="test" class="content">
                <h3 class="title"></h3>
                <ul data-role="listview" data-inset="false">
                    <li style="font-size: 1.4em;">
                        <p class="description" style="overflow: visible; text-overflow: clip; white-space: normal"></p>
                        <p>Source:</p>
                        <p><a href="" target="_blank" class="source"></a></p>
                        <div data-role="controlgroup">
                            <a href="#" data-role="button" data-icon="star">Add to Favorites</a>
                            <a href="#" data-role="button">Share</a>
                        </div>
                    </li>
                </ul>
            </div>
           <!-- More Collapsibles below -->

         </div>
 </div>

JS

var data;
var pattern = new RegExp('^http');


function init() {

    initializeDataSet();
    insertData();
    $("#test").collapsible('refresh');

}

function insertData() {        

    // set date
    var date = new Date();
    var options = {
        weekday: "long", year: "numeric", month: "long", day: "numeric"};

    var outputDate = date.toLocaleString("en-us", options);
    $("#date").html("" + outputDate);

    // Get content elements and add data
    var content = $('.content');

    if (content) {
        for (var i = 0; i < content.length; i++) {
            var temp = content[i];

            temp.getElementsByTagName('h3')[0].innerHTML = data[i]['title'];
            if(data[i]['word']){
                temp.getElementsByTagName('p')[0].innerHTML = data[i]['word'] + ": " + data[i]['description'];
            } else {
                temp.getElementsByTagName('p')[0].innerHTML = data[i]['description'];                    
            }
            if(pattern.test(data[i]['source'])) {
                temp.getElementsByTagName('a')[0].setAttribute("href", data[i]['source']);
                temp.getElementsByTagName('a')[0].setAttribute("target", "_blank");
            } else {
                temp.getElementsByTagName('a')[0].removeAttribute("href");
                temp.getElementsByTagName('a')[0].removeAttribute("target");
            }
            temp.getElementsByTagName('a')[0].innerHTML = data[i]['source'];
        }
    }

}

/**
 * initialise the dataset to a global variable when the app launches.
 * @returns {undefined}
 */
function initializeDataSet() {
    // make request to get data
    var request = createRequest();
    if (request === null) {
        alert("Error, can't get data");
        return;
    }

    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            if (request.status === 200) {
                data = JSON.parse(request.responseText);
            }
        }
    };

    var params = "date=" + createDate();
    request.open("POST", "URL FROM WHERE I AM GETTING DATA", false);
    //Send the proper header information along with the request
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(params);

}

function createDate() {

    var date = new Date();
    var day = date.getDate();
    if (day < 10) {
        day = "0" + day.toString();
    }
    var month = date.getMonth() + 1;
    if (month < 10) {
        month = "0" + month.toString();
    }
    return date.getFullYear() + "-" + month + "-" + day; 
}