CODEWITHSUNDEEP
jqueryjquery-mobilecordova
cicakman
cicakman

Reputation: 1990

jqueryMobile and phonegap pageinit and ajax accordion

My code:

$('#cars').live('pageinit',function() {
    var msg = "";
    $.ajax({
        url: 'http://192.168.23.20/php/getcar.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',  
        success: function(data){
        msg += '<div data-role="collapsible-set">';
            $.each(data, function(i,v){
                msg += '<div data-role="collapsible">';
                msg += '<h3>'+v.carName+'</h3>';
                msg += '<p>'+v.cardesc+'</p>';
                msg += '</div>';
            });
        msg += '</div>';
        $(".car").after(msg);
        }
    });         
});

The output is displayed as plaintext instead of JQM accordion. Is there any workaround to do JQM accordion on pageinit?

Upvotes: 0

Views: 762

Answers (1)

Hardik Patel
Hardik Patel

Reputation: 838

if you are going to create accordion list dynamically or modify dynamically then you need to refresh that particular accordion to get JQM style and effects that you can achive by $('.selector').collapsibleset('refresh');

may be this(not tested) works for you.

$accordion_div = $('<div data-role="collapsible-set"></div>');
msg = ""
$.each(data, function(i,v){
  msg += '<div data-role="collapsible">';
  msg += '<h3>'+v.carName+'</h3>';
  msg += '<p>'+v.cardesc+'</p>';
  msg += '</div>';
});
$accordion_div.html(msg);
$accordion_div.appendTo(".car").collapsibleset('refresh');

Upvotes: 1

Related Questions