Object [object Object] has no method 'listview' when using jquery to add items to list

Question

I'm trying to dynamically add items into a <ul> via jquery, and have followed documentation here

I seem to be struggling with the listview invocation...

This is my HTML :

<ul data-role="listview" id="tweets">
        <li><a href="astra.html">Astra</a></li>
        <li><a href="ford.html">Ford</a></li>
        <li><a href="triumph.html">Triump</a></li>
        <li><a href="chevrolet.html">Chevrolet</a></li>
        <li><a href="dodge.html">Dodge</a></li>
    </ul>

This is my Jquery:

$("#tweets").append("<li>Nissan</li>");
                $("#tweets").listview("refresh");

And this is the error I see in Chrome JS console:

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

This is what I see in the browser :

enter image description here

I've tried calling listview both with and without the "refresh", both seem to give the same error, what am I doing wrong?

I've looked at ~5 previous SO questions, but none of their answers have helped.

EDIT:

I already have the following in the <head> elements :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

EDIT 2

The above javascript is being execute after a button is clicked, not sure if that has any effect...

HTML:

<a href="#" data-role="button" onclick="getTweets()">GetTweets</a>

JS:

function getTweets() {
// some static value for now, to get it working...
    $("#tweets").append("<li>Nissan</li>");

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

Have you included jQuery Mobile correctly? Your error suggests that it hasn't been loaded. — Blazemonger
– Blazemonger, Commented Jul 30, 2012 at 13:41
Check that you include the jquery mobile and write your code within $(document).bind('pageinit'). — thecodeparadox
– thecodeparadox, Commented Jul 30, 2012 at 13:42
@thecodeparadox Don't use document.ready(), use $(document).bind('pageinit') instead jquerymobile.com/demos/1.1.1/docs/api/events.html — Phill Pafford
– Phill Pafford, Commented Jul 30, 2012 at 13:46
Your missing the a tag from your append, other then that your code seems to be correct. — Jack
– Jack, Commented Jul 30, 2012 at 13:50

Telémako · Accepted Answer · 2012-07-30 13:47:50Z

1

I'm guessing your listview is not initiated the first time you add an item. Try this, for example:

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

answered Jul 30, 2012 at 13:47

Telémako

6733 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jimmy Over a year ago

Thanks, but unfortunately that still gives the same behaviour.. :S

Telémako Over a year ago

=/ I guess you're doing it too soon somehow. Change the document.ready() for $(document).bind('pageinit') or other variant recommended at jquerymobile

Raanan Avidor · Accepted Answer · 2012-07-31 16:55:39Z

0

Your error is that jQuery Mobile is not defined. is it included before the jQuery? Do you overrun jQuery somehow? I'll need more code in order to help you with this problem.

answered Jul 31, 2012 at 16:55

Raanan Avidor

3,6134 gold badges28 silver badges32 bronze badges

Collectives™ on Stack Overflow

Object [object Object] has no method 'listview' when using jquery to add items to list

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related