Dynamically Generated ListView

TheWorker..

Re: Dynamically Generated ListView

1 year ago

Grab the alpha2. https://github.com/jquery/jquery-mobile

You're looking for this snippet:

$("#some_list").listview("refresh");

Cheers!

langelepp..

Re: Dynamically Generated ListView

1 year ago

Thanks! Thats saved the morning AND last day.
   $('#results').html(data);
    //$('#results li').remove();
    //$('#results').append(data);
    $("#results").listview("refresh");

Was the trick

Good work JQM team! (and TheWorkerAnt)

loic_d

Re: Dynamically Generated ListView

1 year ago

I use the alpha 2 and the listview("refresh") function does not seem to work.

i'm using this file : http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js

sheltered..

Re: Dynamically Generated ListView

1 year ago

I have the identical problem, in both alpha 1 and alpha 2.

the HTML:

</ul>

</div>

the JS call:

$('#categoriesContent ul').listview('refresh');

Here's the meaningful part of the trace (in Chrome):

Uncaught no such method 'refresh' for listview widget instance

$.widget.bridge.$.fnjs/jquery.mobile-1.0a1.js:113
jQuery.jQuery.extend.eachjs/jquery-1.4.3.js:642
jQuery.jQuery.fn.jQuery.eachjs/jquery-1.4.3.js:272
$.widget.bridge.$.fnjs/jquery.mobile-1.0a1.js:106
loadCategoriesjs/ak.js:543
(anonymous function)js/ak.jquerymobile.js:63

frenchpet..

Re: Dynamically Generated ListView

1 year ago

This seems to be a recurring problem
I can make up this topic from the list

aussie_ian

Re: Dynamically Generated ListView

1 year ago

I had this problem and came across this post, so I thought I would share my solution...

I solved this by doing an synchronous load using the .ajax() method instead, otherwise refreshing the listview will not work because it is not loaded (if done async)

Here's some sample code which worked for me.

$.ajax({ url: "get-new-list-url.php",

async: false,

success: function(data) {

//alert("Loaded content...");

$("#isearch-results").html(data);

$("#search-results-list").listview("refresh");

},

error: function(response, error) {

//alert("Error: " + response + " : " + error)

$("#search-results").html("Unable to load search results.");

}

});

Hope that helps..

yakkyjunk1

Re: Dynamically Generated ListView

1 year ago

I have also not been able to get listview("refresh") to work. I was originally trying to do this with ajax and then broke it down to this test script which doesn't use ajax. The error I get in Firebug is "uncaught exception: cannot call methods on listview prior to initialization; attempted to call method 'refresh'."

<!DOCTYPE html>
<html>
      <head>
      <meta name="viewport" content="width=default-width; user-scalable=no" />
      <meta http-equiv="Content-type" content="text/html; charset=utf-8">
      <title>jQuery Mobile List Test</title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.4.4.min.js"></script>
      <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
      <script type="text/javascript" charset="utf-8">
            $(document).ready(function () { update_list(); });
             function update_list() {
                  var html = '<ul data-role="listview" data-theme="g">';
                  html += '<li>hi</li>';
                  html += '</ul>';
                  $("#content").html(html);
                  $("#content").listview("refresh");
            }
      </script>
</head>
<body>
      <div data-role="page" data-transition="fade" id="tester">
            <div class="ui-header" data-role="header" data-theme="b"> <h1>Title</h1> </div>
            <div data-role="content" id="content">
                  <div onclick="update_list();">Test it</div>
            </div>
            <div data-role="footer" data-theme="b"> Cool Footer </div>
      </div>
</body>
</html>

joern.zae..

Re: Dynamically Generated ListView

1 year ago

The refresh method applies to the list content. If you replace the full list, initalize it from scratch using just .find("ul").listview().

Kontaktsc..

Re: Dynamically Generated ListView

1 year ago

You saved my day!

Here my code:

$('#page_saleformresult').
            live('pageshow', function(e,info) {
                $.post('AJAXURL/searchislands.ajax.php',$('form').serialize(), function(content) {
                    $('#page_saleformresult div[data-role="content"]').html(content).page();
                    $("ul").listview();    // !!!!
                });
        });

bhaskar712

Re: Dynamically Generated ListView

11 months ago

Hi,

I have added this code in the response to a XML code.

var parent = document.getElementById('fcontent');

var listview = document.createElement('ul');

listview.setAttribute('data-role','listview');

listview.setAttribute('data-inset','true');

listview.setAttribute('data-theme','a');

//listview.setAttribute('data-dividertheme','b');

var listdiv = document.createElement('li');

listdiv.setAttribute('id','listdiv');

listdiv.innerHTML = "List of Items";

var listItem = document.createElement('li');

listItem.setAttribute('id','listitem');

listItem.innerHTML = "FIRST ITEM";

parent.appendChild(listview);

listview.appendChild(listdiv);

listview.appendChild(listItem);

$('listview').listview('refresh');

But this gives me error

Uncaught TypeError: Object [object Object] has no method 'listview'

Can you help me in this??

Regards,

Bhaskar

frenchpet..

Re: Dynamically Generated ListView

1 year ago

hello

could anyone explain me the function " .page() " present in the previous script ?

I don't find this in the JQM doc !!

$('#page_saleformresult div[data-role="content"]').html(content).page();

stefan.ge..

Re: Dynamically Generated ListView

11 months ago

Ahoi!

function page enhances the html elements like anchors, buttons.... to mobile capable controls.

Maybe you can grab a few ideas for generating dynamic lists from this widget:

https://github.com/hiroprotagonist/jquery.mobile.instantsearch

spielerin..

Re: Dynamically Generated ListView

1 year ago

.page makes an error and even

in the alpha4.1

the listview-command.

$("#kategorien .content ul ").listview is not a function

I am confused.

cplee70

Re: Dynamically Generated ListView

1 year ago

I also get the js error from time to time until I wrote the script this way:

$("div.ui-page-active ul.itemslist").append(html).listview("refresh");

And it seems to work for me everytime so far (fingers crossed)

Hope this helps!

--cp

PS: The "ul" tag has a "itemslist" class, and it is appending to the list of results when the user clicks "Load more..."

weslymich..

Re: Dynamically Generated ListView

10 months ago

i've tried this solution and still having that problem-

    function showSomeData(json){
      var SomeData_list = document.getElementById("SomeData_list");
   SomeData_list.innerHTML = "";
    var dt =json.results; 
     
           for (var i=0; i<dt.length; i++){
          SomeData_list.innerHTML +=  "<ul data-role='listview' data-theme='d'><li class=\"data-role='listview' data-theme='d'\"><a href='index.html'> <img src='photo.png' width='70' /><h3>Some Stuff Here</h3><p>213</p></a></li></ul>";
       $('#SomeData_list').listview('refresh');

jarzom

Re: Dynamically Generated ListView

10 months ago

Hi

I have a simular problem after upgrading from Alfa4 to Beta1. The listview wont style proberly.

My code:

$('#vareListPage').live('pageshow', function(){
   $.mobile.pageLoading();
    $.ajax({
       url: "varlist.php",
       dataType: 'jsonp',
        success: function(json_results){
// Need to add UL on AJAX call or formatting of userlist is not displayed
            $('#vareList').append('<ul data-role="listview" data-inset="true" data-filter="true"</ul>');
            listItems = $('#vareList').find('ul');
            $.each(json_results.rows, function(key) {
              html = '<h3><a href="vardet.html?id=' + [json_results.rows[key].id] +'"rel="external">'+json_results.rows[key].varetekst+'</a></h3>';
              html += '<p>Pris: '+json_results.rows[key].pris+'</p>';
      listItems.append('<li>'+html+'</li>');
      });
// Need to refresh list after AJAX call
            $('#vareList ul').listview();
            $.mobile.pageLoading(true);
        }
    });
});

Alfa4:

Beta1:

Anyone got and idea ?

Regards

Glenn

sheldond

Re: Dynamically Generated ListView

10 months ago

can you try the pagecreate event instead of pageshow

avinoam1

Re: Dynamically Generated ListView

9 months ago

I have similar problem....

jarzom

Re: Dynamically Generated ListView

10 months ago

Im' afraid it didn't make any diference. Same result....

sheldond

Re: Dynamically Generated ListView

9 months ago

You can try out the new create event present in the latest release it should work

$("#list_container").append(html);
$("#list_container").trigger("create");

jarzom

Re: Dynamically Generated ListView

9 months ago

@sheldond

I have tried your sugestion, but im still not able to get it to work. Is it possible for you to paste some code ?

joeslack

Re: Dynamically Generated ListView

9 months ago

Jarzom,

I load data almost the same way, with no problem. Change $('#vareList ul').listview(); to $('#vareList ul').listview('refresh'); instead. Also, you seem to using more complex selectors than you need to. In my code, I just do $("#myList").html(ListItemContentHere); $("#myList").listview("refresh"); and it works like a charm.

*Edit*: Looks like Beta 2 was just released. As sheldond said above, you might want to look at the "create" event. Use it like: $( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" ); Read more about it here: http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

And to the OP: I suspect it has to do with calling the list before it's ready. I see another example with a call being made in document.ready. Make sure your ajax calls are being done on pageshow, and styles are being updated on successful data retrieval.

jarzom

Re: Dynamically Generated ListView

9 months ago

Thanx, but still no difference. The styling are still missing I'm afraid.

code:

$('#vareListPage').live('pageshow', function(){

$.mobile.pageLoading();

$.ajax({

url: "varlist.php",

dataType: 'jsonp',

success: function(json_results){

// Need to add UL on AJAX call or formatting of userlist is not displayed

$('#vareList').append('<ul data-role="listview" data-inset="true" data-filter="true"</ul>');

$('#vareList ul').listview();

listItems = $('#vareList').find('ul');

$.each(json_results.rows, function(key) {

html = '<h3><a href="vardet.html?id=' + [json_results.rows[key].id] +'"rel="external">'+json_results.rows[key].varetekst+'</a></h3>';

html += '<p>Pris: '+json_results.rows[key].pris+'</p>';

listItems.append('<li>'+html+'</li>');

});

// Need to refresh list after AJAX call

$('#vareList ul').listview('refresh');

$.mobile.pageLoading(true);

}

});

mushu8

Re: Dynamically Generated ListView

9 months ago

I have succeeded in this manner:

I have created my <ul id="list" data-role="listview"></ul> during the first loading of the page.

Then when I do my Ajax request, I fill my list with the list items this way:

$("#liste").html("<li>blabla</li><li>blablabla</li>");

$("#liste").listview('refresh');

And it works for me.

I hope it will help…

seboulba

Re: Dynamically Generated ListView

9 months ago

It always depends if your list was already initialized or not by JQM. If you're not sure, just use that:

try {
$('#list').listview('refresh');
} catch(e) {
$('#list').listview();
}

jarzom

Re: Dynamically Generated ListView

9 months ago

GOT IT !!

It was just a matter of moving a <li> !!!

Thanx for all your input guys.......

Code:

$('#vareListPage').live('pageshow', function(){

$.mobile.pageLoading();

$.ajax({

url: "varlist.php",

dataType: 'jsonp',

success: function(json_results){

// Need to add UL on AJAX call or formatting of userlist is not displayed

$('#vareList').append('<ul data-role="listview" data-inset="true" data-filter="true"</ul>');

listItems = $('#vareList').find('ul');

$.each(json_results.rows, function(key) {

html = '<li <h3><a href="vardet.html?id=' + [json_results.rows[key].id] +'"rel="external">'+json_results.rows[key].varetekst+'</h3>';

html += '<p><br> Pris: '+json_results.rows[key].pris+'</p></a></li>';

//----> REMOVED THE <li> listItems.append('<li>'+html+'</li>');

listItems.append(html);

});

// Need to refresh list after AJAX call

$('#vareList ul').listview();

$.mobile.pageLoading(true);

}

});

seyz4all

Re: Dynamically Generated ListView

8 months ago

This helped me but i want to view the list-item when click individually on another page.

I added a link like you did but it didnt work

Keyser

Re: Dynamically Generated ListView

7 months ago

I work with these example and worked very fine!!!!

http://jquerymobile.com/test/docs/pages/dynamic-samples/sample-reuse-page-external.html

The concepts are the same...

dadixon

Re: Dynamically Generated ListView

7 months ago

You could make the page do this:

</ul>

</div>

and call you ajax with this:

$.ajax({

url,

success: function(i) {

$('#dynamic').html(i);

}

});

hiulit

Re: Dynamically Generated ListView

7 months ago

If it's any help, here's my working code:

$('#list').live('pagecreate',function(event){

var location = current_position; //això serà la GEOLOCATION del mòbil o entrant l'adreça del'usuari

var radius = 5;

var searchUrl = 'crear_xml2.php?lat=' + location.lat() + '&lng=' + location.lng() + '&radius=' + radius;

$.get(searchUrl, function(xml){

$(xml).find('marker').each(function(){

var name = $(this).attr('name');

var address = $(this).attr('address');

var type = $(this).attr('type');

var lat = parseFloat($(this).attr('lat'));

var lng = parseFloat($(this).attr('lng'));

var distance = parseFloat($(this).attr('distance')).toFixed(1);

$("#llistat").append("<li>"+

"<a href=#>"+

"<h2>" + name + "</h2>"+

"<p><strong>" + address + "</strong></p>"+

"<p class=ui-li-aside>" + distance + " Km</p>"+

"</a>"+

"</li>");

});

$("#llistat").listview('refresh');

});

pkachhia

Re: Dynamically Generated ListView

6 months ago

@mushu8,

Thanks for the solution. I have tried your solution and it works for me, I have successfully generated listview dynamically. Your solution worked great with JQM 1.0.

Thanks again.

phaggood

Re: Dynamically Generated ListView

4 months ago

No matter what I try, I can't get my list to populate with formatting. If I uncomment the 'listview' function it says listview not found. The dummy list in the HTML that is replaced by AJAX is formatted.

HTML

<li><a href="#">20011:Calculator</a></li>

<li><a href="#">2011009:Toshiba Satellite P755</a></li>

<li><a href="#">2011011:Toyota Land Cruiser</a></li>

<li><a href="#">2011013:Mitsubitshi Outlander XLS</a></li>

</ul>

</div>

JAVASCRIPT

$(document).ready(function(){

console.log("updating");

updateCheckoutlist();

});

function updateCheckoutlist() {

var jsonurl = "myvalidjsonurl";

$.ajax({

type : 'POST',

url : jsonurl,

dataType: 'jsonp',

success : function(data) {

checkoutResult(data);

},

error : function(XMLHttpRequest, textStatus, errorThrown) {

$('#waiting').hide(500);

$('#statusmessage').removeClass().addClass('error').text('There was an error.').show(500);

//$('#demoForm').show(500);

}

});

function checkoutResult(data) {

var checkoutlist = $('#checkoutlist');

console.log('adding checkouts to list');

checkoutlist.empty();

var listContent = "";

$.each(data.checkouts, function(i,checkout){

var checkoutdetail = checkout.checkoutDate + " - " + checkout.model + ":" + checkout.make + "<br> " + checkout.fullname;

listContent += "<li>" + checkoutdetail + "</li>";

});

console.log(listContent);

checkoutlist.html(listContent).listview("refresh"); <<<--- ERROR

Uncaught TypeError: Object [object Object] has no method 'listview'

}

judgedoom

Re: Dynamically Generated ListView

4 months ago

Try to add a

checkoutlist.listview();

before you call checkoutlist.listview("refresh");

This also all pretty much depends on how far JQM is enhancing the page. Maybe you shouldn't use .ready() but the "pageinit" or "pageshow" event... check the docs.

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

phaggood

Re: Dynamically Generated ListView

4 months ago

That did it - replaced docReady with:

$( '#_listpage' ).live( 'pageinit',function(event){

console.log('updating');

updateCheckoutlist();

});

for html:

blah blah header blah blah ui-bar blah blah content

</ul>

</div>

and my ajax call result:

var checkoutlist = $('#checkoutlist');

checkoutlist.empty();

console.log('adding checkouts to list');

var listContent = "";

$.each(data.checkouts, function(i,checkout){

var checkouthead = "<p><i>"+checkout.checkoutDate + "</i></p>";

var checkoutdetail = checkout.model + ":" + checkout.make + " to " + checkout.fullname;

listContent += "<li><a href='#'>" + checkouthead + checkoutdetail + "</a></li>";

});

//console.log(listContent);

checkoutlist.html(listContent).listview("refresh");

console.log("refreshed");

}

Response title

Attachments

Replies(34)

Statistics

Tags

Actions

Related Posts