jQuery Forum

The ID #mylist is absent from your HTML.

Also, it is better if you use a class rather than an ID. Search the forum for why.

Sorry, the top line is missing in the code. Should be as below.

I tried changing the code to use a class rather than id and got the same result. The h2 is updated but loses it's formatting.

1. <div id="mylist" data-role="collapsible" data-theme="a" data-content-theme="a" data-mini="true" >
     <h2>Choose...</h2>
     <ul data-role="listview">
       <li data-mini="true"><a href="#">Item 1</a></li>
       <li data-mini="true"><a href="#">Item 2</a></li>
       <li data-mini="true"><a href="#">Item 3</a></li>
     </ul>
   </div>
   <script>
   $("#mylist li").live( 'click',function(event){
          
       $("#mylist h2").text($(this).text());
       $("#mylist").listview('refresh');
          
   });
   </script>
   

I didn't mean to suggest that using a class would solve your problem. But it will likely save you from woes later.

Since you changed from an ID to a class, you have to change your selectors in the code, as well. $(".mylist"), not $("#mylist").

Anyway, here is your real problem: #mylist, or .mylist, or whatever is not a listview. It's a collapsible. You can't refresh the listview on something that is not a listview!

This points out the dangers of believing comments and and variable names as written. You've called the collapsible "mylist", but it isn't a list, so it's easy to mis-read that code.

Not sure if there is anything special you need to do in this case. You are only changing text, so there should be nothing required, but I never use collapsibles, so perhaps somebody else has a more certain ansser.

I'm confused. In JQM 1.2 it refers to this as a new listview item called a collapsible list. Looking at the code I see it's a listview view within a collapsible. There is no documentation I can find that states if this is handled differently than a standard listview.

I have tried using the refresh methods for both the .collapsible() and .listview('refresh'), but neither work.

Also, I tried to find the info on using classes vs id's and I found several discussions, but nothing definitive about which one is better.

Can you provide the link for this? I definitely want to avoid problems.

Thanks

Listviews can be used together with the collapsible widget. The framework makes them exactly fit inside the generated content container of the collapsible.

http://jquerymobile.com/test/docs/lists/lists-collapsible.html

The docs simply point-out that you can place a listview inside of a collapsible.

It's not handled any differently than a standard listview. The collapsible and listviews are distinct widgets. The collapsible is not the listview.

----
The problem with using IDs is that you have to insure that you never use the same ID on more than one page of your entire site.

HTML does not permit more than one element in a document with the same ID. Usually, this can be satisfied by making sure that there are no more than one of the same ID on a page. But in jQuery Mobile the page and the document are not one and the same. The document may contain many pages. When JQM does transitions, it has two pages in the document at the same time.

Thus, if you have more than one page with the same ID for some element, you will find odd stuff going on that you didn't expect. Different browsers handle invalid HTML markup differently, so there is no guaranteed behaviour when you have multiple elements with the same ID.

The easiest way to deal with this is to simply not use IDs.

You still have to be careful with your classes, to make sure you are targeting the element you intend to. If you want to do something with an element on a particular page, you need to qualify the selector so that the page is a part of the selection criteria. You might want to change some text on one page, and actually change it on several. (If you didn't target the page specifically.) But at least the behavior across different browser will be consistent.

I think I understand the difference between the listview and collapsible widgets, but still don't understand how to dynamically change the h2 title of the collapsible without losing the formatting. Hopefully someone familiar with this will respond. Seems like a fairly trivial thing to do.

I haven't yet tested dynamically removing the collapsible and then recreating it instead of trying to change the title. Seems like a lot of extra work.

Thanks also for explanation of classes vs id's.

If you are still using ID use the following after you have dynamically injected your new content.

I have found out from experience that sometimes (not sure what the circumstances are) 'refresh' does not work

refresh does not work if the widget doesn't respond to refresh. Collapsible doesn't respond to refresh.

I posted the same question on another forum also and got this example that works perfectly:

1. $("#mylist h2 .ui-btn-text").text($(this).text());
   

Apparently updating the h2 tag overwrites the jqm structure so the formatting is removed. By targeting the .ui-btn-text property the structure stays intact.

I hope this helps others as well.

Thanks!