Question

I have a page with three sections:

sections A,B,C

On section A there is a set of buttons that makes an Ajax request which updates section C. Up until here everything works fine.

The problem is that my buttons on section C (some links with data-role="button") don’t appear as buttons – but instead they are displayed as traditional links.

How can I do to change the links appearance to jQuery buttons?

<div id="setcionA">
    *** Here i call an mvc actionresult that return a partial view that update sectionC 
    <div class="nn" id="I_421" style="left: 0.06em; top: 0.06em; width: 5.18em; height: 5.5em;" onclick="loadXMLDoc('http://localhost:9063/Documentos/Docs/DocsAddItem?NumIdConcepto=421&NumCantidad=1','sectionC','0','POST');">
</div>
<div id="setcionB">
</div>

<div id="setcionC">
    *** This is the result of the ajax call .. but it appear as a link instead of a jquery mobile button
    <div data-role="controlgroup" data-type="horizontal">
        <a id="yes" href="index.html" data-role="button">Yes</a>
        <a href="index.html" data-role="button">No</a>
        <a href="index.html" data-role="button">Maybe</a>
    </div>
</div>

Answer 1

After the list was retrieved via ajax, it must be initialized

$('#ListView').listview(); // It Initializes
$('#ListView').listview('refresh'); // Refresh the list.