2 RSS feeds inside on one webapp

Question

So first off a bit of background, so i have a page called let's say "events" which has a listview:

 <div class="content-primary">
            <ul data-filter="true" data-icons="false" data-role="listview"
            id="linksList" style=
            "white-space:normal; margin-right: -550px; padding-right: 0px;">
            </ul>
        </div>

this list view is used to be populated by my rss feed reader(i'll post code for this below) but this all works my events page can be populated by any rss feed i choose.

the problem arises when i try to duplicate my code and have a second page for it. Firstly i would get the error:

cannot call methods on listview prior to initialization; attempted to call method 'refresh'

after some googling i found it could be fixed by initializing the listview first by changing this

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

to this

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

this then returns the new error

Uncaught TypeError: Cannot read property 'jQuery171004728581593371928' of undefined

more error details:

Uncaught TypeError: Cannot read property 'jQuery171004728581593371928' of undefined jquery.mobile-1.1.0.min.js:107

a.widget._createSubPages jquery.mobile-1.1.0.min.js:107

a.widget.refresh jquery.mobile-1.1.0.min.js:103

a.widget._create jquery.mobile-1.1.0.min.js:100

a.Widget._createWidget jquery.mobile-1.1.0.min.js:14

a.widget._createWidget jquery.mobile-1.1.0.min.js:17

a.(anonymous function).(anonymous function) jquery.mobile-1.1.0.min.js:12

(anonymous function) jquery.mobile-1.1.0.min.js:14

e.extend.each jquery-1.7.1.min.js:2

e.fn.e.each jquery-1.7.1.min.js:2

a.fn.(anonymous function) jquery.mobile-1.1.0.min.js:13

(anonymous function) main.js:45

n jquery-1.7.1.min.js:2

o.fireWith jquery-1.7.1.min.js:2

w jquery-1.7.1.min.js:4

d jquery-1.7.1.min.js:4

JS FIDDLE of my rss reader http://jsfiddle.net/6Ycdm/

and finally this page is populated when you click a link in the rss feed just extra details etc.

<div data-role="page" id="contentPage">
    <div data-role="header" id="header" style="color: white;"><img alt=
    "thread" border="0" id="thread" src="./img/logo2.png" style=
    "width: 220px;"></div>

    <div data-role="content">
        <p id="entryText"></p>
    </div>

    <div>
        <a class="ui-btn-active" data-icon="false" data-rel="back"
        data-role="button" style=
        "background: rgb(24,120,143); color: white;">back</a> 
    </div>

    <div data-position="fixed" data-role="footer" data-theme="a" id=
    "footer">
        <h3>Copyright &copy; 2013 </h3>
    </div><!-- /footer -->
</div> 

Few more details about the webapp i guess, any answers should be able to run on a phone (using phonegap build) i don't see it being a problem as my current RSS feed reader works fine. Really just look for a way to duplicate it. i'm using the mutltipage methodology on the app but i don't mind adding another html page and linking it in although i have already tried but to no avail! i got the same error.

i don't know whether i'd have to close the listview after you leave the events page and go to let's say the "news" page? not sure how to do it either. Just an idea for a possible solution i guess?

Thanks for any help i'll try to reply as quick as possible to any answers posted!

Answer 1

1. First, don't use document ready with jQuery Mobile, it is a bad practice. Read here why.

2. From what I so in your code you are using live method. Live is deprecated, and while it is working now it will not work when you switch to any jQuery version larger then 1.8.3. Just replace it with a method on.

3. Your code should work even without second initialization of method listview. I think your real problem is that you are using 2 listview's with a same id. When both of them are loaded into the DOM jQuery will always access the first listview. And because it is already successfully populated it will throw this error.

   There are 2 ways you can access correct listview.

   Use this syntax to find correct listview:

   $('#PAGE_ID').find('#linksList").listview("refresh");
   

   Where PAGE_ID is an id of your current page, or if you use pageshow or pagebeforeshow event to populate your listview use this syntax:

   $.mobile.activePage.find('#linksList").listview("refresh");
   

   This solution will work only in pageshow or pagebeforeshow event (pageinit should also work with it).