Question

In my little application I have a nested list using jQuery mobile. If I click on an item of the list, the heading in the header changes and displays the heading of the item I have clicked. How can I achieve, that the header stays like on the page before?

Example:

        <div data-role="page" id="newspage" data-theme="a">

        <div data-role="header" data-position="fixed">
            <a href="#home" data-role="button" data-icon="home" data-iconpos="notext" data-mini="true" data-inline="true" data-transition="slide" data-direction="reverse">Home</a>
            <h1>News</h1>
        </div>

        <div data-role="content" id="newsList">
            <ul data-role="listview">
                <li>
                    <h2>News 1</h2>
                    <p>This is a short version of news 1</p>
                    <ul>
                        <li>
                            <h2>News 1</h2>
                            <p>This is the text of news 1</p>
                        </li>
                    </ul>
                </li>
                <li>
                    <h2>News 2</h2>
                    <p>This is a short version of news 2</p>
                    <ul>
                        <li>
                            <h2>News 2</h2>
                            <p>This is the text of news 2</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

So if I click on “News 1”, the headline in the header changes to “News 1” and shows of course the nested item. But I want to have “News” in the header of the nested item like it was defined in the header div before. I hope I made clear what I want. 🙂 Any idea how to do this?

Thanks!

Answer 1

This is your solution. You will find your solution at the end of HTML.

Code example:

 $(':jqmData(url^=newspage)').live('pagebeforecreate',function (event) {
      var title =  $(':jqmData(url^=newspage)').find(':jqmData(role=header) h1').html();
      $(this).filter(':jqmData(url*=ui-page)').find(':jqmData(role=header)').html('<h1>' + title + '</h1>');
 });

Look at this part of code:

$(':jqmData(url^=newspage)').

newspage is an id of your listview container page.