CODEWITHSUNDEEP
javascriptjquery-mobile
user3080000
user3080000

Reputation:

jQuery mobile-save changes after page change

I am trying to change title of header dynamically by using javascript. I am getting the name of li by id using on click event. The problem is that it shows me the title only for e few sec and then after page is changed title disappear.

<div data-role="main" id="page-content-ajax" class="ui-content jqm-content jqm-fullwidth">
    <ul data-role="listview" data-inset="true">
       <li class="li-el"><a href="flow/movements/movements.php" id="Movements">Movements</a></li>
</ul>
</div>

<script>
    $(document).ready(function() {
        $("#page-content-ajax").on('click', '.li-el', function() {
            var search_r = $('a', this).attr('id');
            $("#title-header").html(search_r); // just to check it works
        });
    });
</script>

Upvotes: 1

Views: 216

Answers (2)

Omar
Omar

Reputation: 31732

You need to listen to pagecontainerbeforetransition after the External page is fully loaded into DOM and created. Also, you need to define a global variable which holds new title, in able to access it from any function.

var title = '';

Bind click to listview items on pagecreate of your home page, i.e. #HomePage.

$(document).on("pagecreate", "#HomePage", function () {
    $("li a").on("click", function () {
        title = $(this).attr("id");
    });
});

Update title on pagecontainerbeforetransition. You can use other events, but the change will occur during showing the page, which may be obvious to user.

ui.toPage object holds data of the page which is about to be shown. It's used to find header within it to target its' title.

Note that you only want to change title of pages other than #HomePage, hence, I've used .not() selector to exclude #HomePage.

$(document).on("pagecontainerbeforetransition", function (e, ui) {
    $(".ui-header .ui-title", $(ui.toPage[0]).not( $("#HomePage") ) ).text(title);
});

Demo

Upvotes: 2

kamesh
kamesh

Reputation: 2424

I think if you want to stay in that page you need to use AJAX post in your code..AJAX example

Upvotes: -1

Related Questions