CODEWITHSUNDEEP
jquerylistviewjquery-mobile
Lucky
Lucky

Reputation: 425

How to display the list dividers dynamically using jquery in listview?

I'm using data-role="list-divider" dynamically for displaying category wise data in the listview. Along with the list-divider I'm the displaying the description about the each item in the listview. But these description is from the related files of the each item. I'm getting the problem when i'm displaying the listview with the list-divider along with description then the listview displays as all the dividers should be combined first and below that list items with description is displaying. How to display the listview properly with description.

http://jsfiddle.net/yC8VS/2/

$("#list").append('<li data-role="list-divider">' + section + '</li>');
$(this).children().each(function () {
   var content = $(this).text();
   var order = $(this).attr("order");
   var seq = order + '' + $(this).attr('order');
   var file = $(this).attr('file');
   $.mobile.activePage.append('<div id="files" style="display: none"></div>');
   $('#files').load(file, function (data) {
     var txt = $(data).find('p').text();
     $("#list").append('<li><a href="" class="style1" data-sequence="s' + seq + '" file="' + file + '"><h2>' + content + ' </h2><p class="description">' + txt + '</p></a></li>');
     $("#list").listview('refresh');
   });
});

Thanks in Advance.

Upvotes: 2

Views: 824

Answers (1)

Mr.Manhattan
Mr.Manhattan

Reputation: 5504

$('#files').load(file, function (data)

is the problem. this is an asynchronous function, which means it doesn't block. thus the sections are added before the load() calls the function that adds the contents.

use ajax with async:false to load the data, then the list is properly displayed.

[EDIT 1]

http://jsfiddle.net/uECUY/

shows some work on making the asyncronous calls sync. tough it uses the bind function, which might not work on all platforms (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)

...you might also change the delays of the timeout functions, since 50ms is a pretty short interval, which leads to a higher load...

[EDIT 2]

bind function to add for browsers that don't have the bind function, as described in above article link:

if (!Function.prototype.bind) {
    Function.prototype.bind = function (oThis) {
        if (typeof this !== "function") {
            // closest thing possible to the ECMAScript 5 internal IsCallable function
            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
        }

        var aArgs = Array.prototype.slice.call(arguments, 1),
            fToBind = this,
            fNOP = function () {},
            fBound = function () {
                return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
                aArgs.concat(Array.prototype.slice.call(arguments)));
            };

        fNOP.prototype = this.prototype;
        fBound.prototype = new fNOP();

        return fBound;
    };
}

[EDIT 3]

Further improved the snippet, to work without bind function.

http://jsfiddle.net/uECUY/4/

Upvotes: 3

Related Questions