CODEWITHSUNDEEP
javascriptjquerylistviewjquery-mobile
Vishnu
Vishnu

Reputation: 2452

Jquery mobile Collabsible Listview not updating

I am trying to do remote autocomplete with collapsible list view. .Its working perfectly for normal listview..but when i use collapsible list view its not working.please see the demo. http://jsfiddle.net/Q8dBH/8/

Below is my code

<div data-role="page" id="startseite">


    <!--<div data-role="main" class="ui-content">!-->

        <div id="one" class="ui-body-d ui-content">
            <ul id="autocomplete" data-role="listview" class="ui-listview-outer" data-inset="true" data-filter="true" data-filter-placeholder="enter 3 or more alphabets...for ex : america " data-filter-theme="a"></ul>
        </div>
     </div>

my javascript

$(document).on("pagecreate", "#startseite", function () {
    $(document).on("click", "li", function () {
        var text = $(this).text();
        $(this).closest("ul").prev("form").find("input").val(text);    });
    $("#autocomplete").on("filterablebeforefilter", function (e, data) {
        var $ul = $(this),
            $input = $(data.input),
            value = $input.val(),
            html = "";
        $ul.html("");
        if (value && value.length > 2) {
            $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
            $ul.listview("refresh");
            $.ajax({
                url: "http://gd.geobytes.com/AutoCompleteCity",
                dataType: "jsonp",
                crossDomain: true,
                data: {
                    q: $input.val()
                }
            })
                .then(function (response) {
                $.each(response, function (i, val) {
                    html += "<li data-role='collapsible' data-iconpos='right' data-shadow='false' data-corners='false'><h2>Birds</h2>" + val + "</li>";
                });
                $ul.html(html);
                $ul.listview("refresh");
                $ul.trigger("updatelayout");
            });
        }
    });
});

http://jsfiddle.net/Q8dBH/8/

Upvotes: 1

Views: 312

Answers (2)

Jeroen
Jeroen

Reputation: 1

If the control is loaded with ajax you will have to use:

$(document).on('filterablebeforefilter','#autocomplete',function(e,data){
   ...
})

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/Gajotres/Q8dBH/10/

Use:

$('#startseite').enhanceWithin();

Instead of:

$ul.listview("refresh");
$ul.trigger("updatelayout");

Basically pre jQuery Mobile 1.4 each widget had it own enhancement method while there were two content wide enhancement methods (unfortunately they were not always successful). jQuery Mobile 1.4 brought new function called enhanceWithin() which is used for content enhancement, specially if you are creating more then 1 dynamic widget. In your case you have 2 widgets, listview and collapsible so listview("refresh") will not be enough.

Update:

If you want to remove a gap use this CSS:

.ui-listview > li h1, .ui-listview > li h2, .ui-listview > li h3, .ui-listview > li h4, .ui-listview > li h5, .ui-listview > li h6 {
    margin: 0 !important;
}

Or create everything inside a collapsible-set.

Upvotes: 2

Related Questions