CODEWITHSUNDEEP
javascriptjquerylistviewjquery-mobile
user3262344
user3262344

Reputation: 125

jquery mobile listview and collapsible set open on going back

i have a 3-tier list that at the end goes to another page...so when i come back from the another page i want the list item to be open and indicate which item was clicked on.

how can this be done

<div data-role="collapsible" >
<h2>Header</h2>
 <ul data-role="listview">
 <li><a href="#item1">item-1</a></li>
 <li><a href="#">item-2</a></li>
 <li><a href="#">item-3<span class="ui-li-count">12 set</span></a></li>
    </ul>
</div>

 -----------------------------------------------------------------
   <div data-role="page" id="item1">

   <div data-role="header">
    <a href="#mainPage" data-role="button" data-icon="arrow-l">Back</a>  
    <h1>item1</h1>
   </div>

    <div data-role="content">
     <div class="container">
       <ul data-role="listview">
         **<li><a href="material/set1.html" rel="external">Set 1</a></li>**
         <li><a href="#">Set 2</a></li>
         <li><a href="#">Set 3</a></li>
      </ul>
     </div>  
</div>

   <div data-role="footer">
     <h4>Footer</h4>
    </div>
  </div>


 -----------------------------------------------------------------

now from the main list when the uset click on item-1 it is presented with another list of set-1,set-2,set-3 etc now on clicking on set-1 the user is taken to another "external page".

when the user click the back button from the external page it show indicate that the set-1 was clicked and the collapsible set should be open..currently i getting the collapsible set collapsed and there is no indication where the user was

Upvotes: 0

Views: 745

Answers (1)

Tasos
Tasos

Reputation: 5361

Its very easy to acchieve. One way to do this is to use cookies to store the list item you click as you navigate to other pages.

If you decide to use this method you will need the jquery cookies plugging -- https://github.com/carhartl/jquery-cookie

I didnt have much time for the demo its a quick one but you can easy see whats happening from the demo. All i did was to give the list items an id and the (a) classes id so we know which one was clicked and which one to turn the background color to indigate that it was clicked.

If you have multiple lists that expand then store the id of the expandable listview to another cookie and expand the correct one like i did in the demo with the items.

Demo

http://jsfiddle.net/wgt88h3n/

$("#listview").on("click", ">li", function(event, ui) {   // this function gets the id from the list items


var id     = $(this).closest("li").attr('id');

$.cookie('item', id);  // store the id of the list item to a cookie

});

$("#topage2").on("click", function(event, ui) {

var item = $.cookie('item');  // lets get the item of the cookie

$(".item1, .item2, .item3").css({backgroundColor: '#f6f6f6;'}) // lets set the background color back to normal

$.mobile.changePage( "#page2" , { transition: "pop" })  ///change to page 2 
});

$("#topage1").on("click", function(event, ui) {

$.mobile.changePage( "#page1" , { transition: "pop" })

$( "#mylist" ).collapsible( "expand" ); // expand the collapsible list. if you have more lists,,, to expand the correct one, use another cookie and use the same method when we stored the list item.

var item = $.cookie('item'); /// read the cookie item

$("." + item ).css({backgroundColor: 'rgba(72, 121, 49, 0.38)'}) ///set the background color of the last item clicked to green
});

Upvotes: 1

Related Questions