Question

I am trying to implement country search in my dummy application. Initially on home page i am using list view and it is displaying properly. But the same list view, if i am displaying using ajax, List view content is displaying but css is not applied on this.

Please have a look at dummy application by clicking on link below:
http://questoons.com/vkwave/sof/ajaxrequest/

In dummy app, initially list view displaying properly but when click on “Call Ajax and Populate Country List”, i am sending the whole list data using ajax like below:

<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Country/Group..." data-filter-theme="d" data-theme="d" data-divider-theme="b">
                    <li data-role="list-divider">A</li>
                    <li data-icon="false"><a href="#"  >Afghanistan</a></li>
                    <li data-icon="false"><a href="#"  >Argentina</a></li>
                    <li data-icon="false"><a href="#"  >Australia</a></li>
                    <li data-icon="false"><a href="#"  >Austria</a></li>
                    <li data-role="list-divider">B</li>
                    <li data-icon="false"><a href="#"  >Bahamas, The</a></li>
                    <li data-icon="false"><a href="#"  >Bahrain</a></li>
                </ul>

but in ajax response list css is not applied. Please guide where i am wrong.

I am using normal jquery ajax.

Answer 1

in first load your Html is:

<ul data-divider-theme="b" data-theme="d" data-filter-theme="d" data-filter-placeholder="Search Country/Group..." data-filter="true" data-role="listview"
    class="ui-listview">
    <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b">
        A
    </li>
    <li data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="d"
        class="ui-btn ui-btn-icon-right ui-li ui-btn-up-d">
        <div class="ui-btn-inner ui-li">
            <div class="ui-btn-text">
                <a href="#" class="ui-link-inherit">Afghanistan</a></div>
        </div>
    </li>
</ul>

ul, li, and other html element has some class. but in ajax response you missing this class. Add css classes to your ajax response.

for example :

<ul class="ui-listview" ...
    <li class="ui-btn ui-btn-icon-right ui-li ui-btn-up-d" ...