JQuery mobile collapsible with Ajax

问题

trying to display the JQMobile collapsible containing an unsorted list. The collapsible is not shown when the list is appended using an ajax call. The collapsible is correctly shown when the list is added statically. Any advice?

thanks

<script>
    $(document).ready(function() {

        var updateSectionsPage = function() {

            // 1. Get the page and list we need to work with
            var $page = $('#homeList');

            // 2. Build the URL we need using the data stored on the main view page
            var strUrl = 'http://xyz';

            // 3. Get the sections and append them to the list          
            $.ajax({
                url: strUrl,
                dataType: 'json',
                cache: false,
                success: function(data) {

                    $sections = $page.find('#sections');

                    // 3.1 Delete the existing content, if any
                    $sections.empty();

                    // 3.2 Create a new collapsible
                    $sections.html('<div id="collapsible" data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a"></div>');

                    // 3.3 Create the title of collapsible

                    $sections.html('<h3>ColdPlay</h3>');

                    // 3.4 Create the list and store it into a JQuery object
                    $sections.html('<ul id="list" data-role="listview" data-inset="false"></ul>');

                    $list = $page.find('#list');

                    // 3.5 Build HTML that contains the desired information
                    for (var j in data.list[0].list){
                        var strHtml = '<li><a href="#pageDetail"><img src="' + data.list[0].list[j].img + '" /><h4>' + data.list[0].list[j].title + '</h4></a></li>';

                        // Make it into a jQuery object...
                        var item = $(strHtml);
                        // ...so we can append it to our list.
                        $list.append(item);
                    }


                    // Call the listview widget.
                    $list.listview();                   
                },
                error: function() {
                    alert("An error occurred. please, try it again!");
                }               
            });

        }();  // 4. Call the updateSectionsPage() function
    })
</script>

回答1:

I think you just need to turn your $list.listview(); call into $list.listview('refresh');.

Also, you may benefit from changing up the way you append you new list items. Check this post out. You do not want to nest an append call within a loop if you can avoid it. You will also benefit from not wrapping your strHtml with the jQuery $ selector as it may not be necessary.

That optimization link is courtesy of another SO post here.

回答2:

Once you create the list,use the following code snippet-

$list.listview('refresh');
$page.trigger('create');

in place of $list.listview();

Also it is not considered a best practice to use $(document).ready() in jquery mobile.See the note below

Important: Use pageInit(), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

From http://jquerymobile.com/demos/1.0/docs/api/events.html

回答3:

thanks guys, the issue in my code was on the missing collapsible() widget call. Once the html page is dynamically created, we need to render it with jqmobile widget calls: listview() and collapsible(). Here the working code.

function fillSectionsPage() {
    // 1. Get the page we need to work with
    var $page = $('#sectionList');

    // 2. Build the URL we need using the data stored on the main view page
    var strUrl = 'http://xyz';

    // 3. Get the sections and append them to the list          
    $.ajax({
        url: strUrl,
        dataType: 'json',
        cache: false,
        success: function(data) {

            $sections = $page.find('#sections');

            // 3.1 Delete the existing content, if any
            $sections.empty();

            // 3.2 Append a new collapsible and store it into a JQuery object
            $sections.append('<div id="collapsible" data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="c"></div>');
            $collapsible = $page.find('#collapsible');

            // 3.3 Append the title of collapsible
            $collapsible.append('<h3>' + data.list[0].title + '</h3>');

            // 3.4 Append the list header and store it into a JQuery object
            $collapsible.append('<ul id="list" data-role="listview" data-inset="false"></ul>');                 
            $list = $page.find('#list');

            // 3.5 Build the list items
            var htlmList = [];
            for (var j in data.list[0].list){                       
                htlmList[j] = '<li><a href="#pageDetail"><img src="' + data.list[0].list[j].img + '" /><h4>' + data.list[0].list[j].title + '</h4></a></li>';
            }

            // 3.6 Append the list items to the list header
            $list.append(htlmList.join(''));

            // 3.7 Render the listview and the collapsible
            $list.listview();
            $collapsible.collapsible();
        },
        error: function() {
            alert("An error occurred, please, try it again!");
        }               
    });
}

回答4:

Hope to check that tutorial, Collapsible content and Ajax loading with jQuery Mobile and this for How do I toggle the jQuery Mobile Accordion with a button click?

来源：https://stackoverflow.com/questions/9013255/jquery-mobile-collapsible-with-ajax

标签

ajax

jquery-mobile