.innerHTML breaks layout of jQuery mobile split ListView sample

Question

likely more of a beginner type question but. If I use the following code on a page it works fine, and displays what I need ( Listview from jquery )

<ul data-role="listview"  data-split-theme="a" data-inset="true">
    <li><a href="#">
        <img src="alarmcritical.png" width=25px;>
        <h2>Broken Bells</h2>
        <p>Broken Bells</p></a>
    </li>
<br>
    <li>
        <a href="#">
            <img src="alarmminor.png" width=25px;>
            <h2>Warning</h2>
            <p>Hot Chip</p>
        </a>
    </li>
<br>
    <li>
        <a href="#">
            <img src="alarmmajor.png" width=25px;>
    <h2>Wolfgang Amadeus Phoenix</h2>
    <p>Phoenix</p>
        </a>
    </li>
</ul>

However, I am updating one section of a page by using

document.getElementById('insertHere').innerHTML = stringData;

stringData being one long line of the html above...and I've copy pasted that as one line to ensure it does work ( outside of the innerhtml ).

So I have a span for inserthere, and was hoping to have the same effect as if I just typed the html out itself. But everytime it comes out broken ( not formatted as a listview ). Is this a common problem, or am I overlooking something?

Thanks

Edit: Updating with Javascript - Be gentle, rather new to it and am using a lot of example source code

$(document).ready(function () {


$('#tags').on('autocompleteselect', function (e, ui) {

   //check array for company name that was entered
    for(var i = 0; i < cases.length;i++){
    if(ui.item.value == cases[i].companyName)
    index = cases[i].id;
    }
    var company = "";

    //set the company name to match the one the customer selected
    company = cases[index].companyName;

    //display on page the cases for the customer selected

    var stringData = '<ul data-role="listview"  data-split-theme="a" data-inset="true"><li><a     href="#">    <img src="alarmcritical.png" width=25px;>    <h2>Broken Bells</h2>    <p>Broken Bells</p></a></li><br><li><a href="#">    <img src="alarmminor.png" width=25px;>    <h2>Warning</h2>    <p>Hot Chip</p></a></li><br><li><a href="#">    <img src="alarmmajor.png" width=25px;>    <h2>Wolfgang Amadeus Phoenix</h2>    <p>Phoenix</p></a></li>';

    document.getElementById('insertHere').innerHTML = stringData;

    //hide keyboard after user is done selecting
    //source code found at http://stackoverflow.com/questions/8335834/how-can-i-hide-the-android-keyboard-using-javascript
    hideKeyboard($('input'));
      function hideKeyboard(element) {
            element.attr('readonly', 'readonly'); // Force keyboard to hide on input field.
            element.attr('disabled', 'true'); // Force keyboard to hide on textarea field.
            setTimeout(function() {
                element.blur();  //actually close the keyboard
                // Remove readonly attribute after keyboard is hidden.
                element.removeAttr('readonly');
                element.removeAttr('disabled');
                }, 100);
        }


    $(function() {
        $( "#selectable" ).selectable({
        stop: function() {
    var result = $( "#select-result" ).empty();
    $( ".ui-selected", this ).each(function() {
      var index = $( "#selectable li" ).index( this );
      result.append( " #" + ( index + 1 ) );


      //set a brief timeout between the actual click of the case and when it displays
      setTimeout(func, 500);
      //display the case details
        function func() {
        document.getElementById('insertHere').innerHTML = '<div class="shadow"><table  id=\"selectable\" border:0.5px BORDERCOLOR=black><tr><td height=10%><h2>' + company + '</h2></td></tr><table  id=\"selectable\" border:0.5px BORDERCOLOR=black><tr><td><img src=ic_priority.png>Priority Status</td>&nbsp;&nbsp;<td><img src=ic_escalation.png>Escalation</td></tr></table><br><table id=\"selectable\" border:0.5px BORDERCOLOR=black><tr><td><img src=\"ic_agent.png\" valign=bottom>&nbsp<button data-theme="a"><img src=ic_action_call.png></button><button><img src=\"ic_action_chat.png\"></button</td></tr><tr><td>Case: ' + customerCases[index].caseNumber + ' </td></tr><tr><td>Status: Open</td></tr><tr><td>Updated: 8 May 2014 15:09:46</td></tr><tr><td>Contact: Bob Kingston</td></tr><td>Agent: ' + customerCases[index].contactName + '</td><tr><td>State: Offline</td></tr><tr><td><br></td></tr><tr><td>Issue:</td></tr><tr><td>&nbsp;&nbsp;&nbsp;' + customerCases[index].problem  + '</td></tr></table></div>';
        }
        });
      }
    });
  });

});

});

$("input[name=companyName]").autocomplete({ source: cases }).data("autocomplete")._renderItem = function(ul, item) { return $("

").data("item.autocomplete", item).append("" + item.url + "").appendTo(ul); };

//$('div').addClass('shadow');

</script>

All the above is in the head. What I'm doing is having a autocomplete bring up some information from a local array. So when you first search it brings up something, then after you select one it brings up a page with the selected information. All going into "inserthere". But I cannot seem to get it to work properly when I use the innerHTML with the stringData I wrote.

Answer 1

Your manipulating the DOM after page has been rendered and the listview has been applied prior to your manipulation. You'll need to reapply the listview to the list after manipulating it with your javascript. Here's a simple jsFiddle showing that process. If you append items (or insert or prepend) you can just do a .listview("refresh") since the listview has been rendered already. Only when you replace the whole ul or ol (which had the listview bound to it) do you need to reapply. Replacing that whole ul is precisely what you're doing in your example.

$(document).ready(function () {
    var stringData = '<ul id="listToShow" data-role="listview"  data-split-theme="a" data-inset="true"><li><a     href="#">    <img src="alarmcritical.png" width=25px;>    <h2>Broken Bells</h2>    <p>Broken Bells</p></a></li><br><li><a href="#">    <img src="alarmminor.png" width=25px;>    <h2>Warning</h2>    <p>Hot Chip</p></a></li><br><li><a href="#">    <img src="alarmmajor.png" width=25px;>    <h2>Wolfgang Amadeus Phoenix</h2>    <p>Phoenix</p></a></li>';

    $('#insertHere').html(stringData);

    $('#listToShow').listview();
});

Note: I added an id to the ul so that we can reference it when reapplying the listview to it.

Answer 2

I had jquery ui as well as jquery mobile in my imports, they do not seem to play well together as when I take out the jquery ui css, I can show it with the .innerHTML.

I'll have to use a jquery mobile autocomplete, as the one I was using required the ui.