title: changing <ul> to <ul data-role="listview">
body: <p>I have a list which I'm displaying with icons and title only - no JQM formatting. If the screenwidth is below 320 px, I want to convert the list into a JQM <code>&lt;ul data-role="listview"&gt;</code> list.</p>
  
  <p>I can add the attribute via Jquery, but when I call $('.menuList').listview('refresh'); I get the following error:</p>
  
  <p>cannot call methods on listview prior to initialization; attempted to call method 'refresh'</p>
  
  <p>Any clues as to what I'm doing wrong?</p>
  
  <p>Thanks!</p>
  
  <p>Frequent</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="menuList"&gt;
      &lt;li&gt;
          &lt;div&gt;
              &lt;a href="l" data-transition="slide" rel="external" class="iconViewport icon"&gt;
                  &lt;span class="menuTitle"&gt;GoHere&lt;/span&gt;
                  &lt;span class="pusher"&gt;111&lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>function enhanceMobile ()
  {
      $('.menuList').attr('data-role', 'listview');
      $('.menuList').listview('refresh');
  }
  </code></pre>