jQuery Mobile can't get object after page transition

0
votes

My mobile page has 2 "pages" (using the multi-page template of jQuery Mobile). Now i have a language selector (dropdown). This selector appears on both pages.

Relevant code:

<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="scripts/style/jquery.mobile-1.3.1.min.css" />
<script src="scripts/javascript/jquery-1.9.1.min.js"></script>
<script src="scripts/javascript/jquery.mobile-1.3.1.min.js"></script>
<script src="scripts/javascript/translations.js"></script>
</head>
<body>
    <div class="container">
        <form action="#" method="POST">
            <div class="formContent" data-role="page" id="one">
                <div data-role="header" class="ui-header-fixed">
                    <div data-role="navbar">
                        <ul>
                            <li></li>
                            <li><label for="language" class="select"></label> <select
                                name="language" id="language" class="lang" data-corners="false"
                                data-iconpos="noicon" onchange="trans($(this));">
                                    <option value="english">En</option>
                                    <option value="dutch">Nl</option>
                                    <option value="german">De</option>
                            </select></li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <!-- Content -->
                </div>
                <div data-role="footer" data-id="foo1" data-position="fixed">
                    <div data-role="navbar">
                        <ul>
                            <li><a href="#one" class="ui-disabled">Vorige</a></li>
                            <li><a href="#two">Volgende</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="formContent" data-role="page" id="two">
                <div data-role="header" class="ui-header-fixed">
                    <div data-role="navbar">
                        <ul>
                            <li></li>
                            <li><label for="language" class="select"></label> <select
                                name="language" id="language" class="lang" data-corners="false"
                                data-iconpos="noicon" onchange="trans($(this));">
                                    <option value="english">En</option>
                                    <option value="dutch">Nl</option>
                                    <option value="german">De</option>
                            </select>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <!-- Content -->
                </div>
                <div data-role="footer" data-id="foo1" data-position="fixed">
                    <div data-role="navbar">
                        <ul>
                            <li><a href="#one">Vorige</a></li>
                            <li><a href="#two" class="ui-disabled">Volgende</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script>
        translate($('.lang').val());
        function trans(it){
            var v = it.val();
            translate(v);
            $(".lang option[value='" + v + "']").attr('selected', 'selected');
        }
    </script>
</body>
</html>

translate(); contains the translation. The last line of the trans() function should set the selected option of both selectors.

Now when i select a language on the first page, the selected value on both selectors change. But when i select a language on the second page, the selected value does not change on both selectors.

Why is this and how do i solve it?

Edit

Finally got that working:

    $(document).on('change', '#language', function () {
        var v = $(this).val();
        translate(v);
        $("#language option").removeAttr('selected');
        $("#language option[value='" + v + "']").attr('selected', 'selected');
        $("#language").selectmenu("refresh");
    });

Now the select menu's don't refresh. In the source code (using firebug) the correct item is selected, but in the front-end it displays the wrong item. Seems like selectmenu('refresh'); doesn't do the trick.

Solved

I ended up setting the display value myself:

$(document).on('change', '#language', function () {
        var v = $(this).val();
        translate(v);
        $("#language option").removeAttr('selected');
        $("#language option[value='" + v + "']").attr('selected', 'selected');
        $(".ui-header .ui-navbar .ui-grid-a .ui-block-b .ui-select .ui-btn .ui-btn-inner .ui-btn-text span").html(v);
    });

Don't mind the long selector, i just want to be sure i have the correct dropdown ;)

3
jqueryjquery-mobiletransition
provide full code, whee are you calling onChange for select? – abdu
in the <select> tag is an onchange which calls trans(); – RobinvdA
post your full code so I can see how are you referencing and switching pages – abdu
added full code. (volgende = next, vorige = previous. in dutch) – RobinvdA
hm when i have visited the second page, the first page has the same problem.. edit: it only works correctly the first time i select a language. – RobinvdA

3 Answers

0
votes

if you are doing this in 2 sperate files let's say index.html and contact.html for example , when you call the second page using jqm it uses ajax request to load the content of the second , and by content I mean the body only , ajax request does not load what is found outside the <body></body> tag so if your script is found in <head></head> or at the end of the file it will not be loaded and you have two solutions: 1) write your script inside the body and mainly after the div or the form 2) if you are calling the page through a link add the attribute data-ajax="false to your anchor tag so it prevents jqm of using ajax

0
votes

Try to update your listview AND/OR select at the end of your translation-function:

<script>
        translate($('.lang').val());
        function trans(it){
            var v = it.val();
            translate(v);
            $(".lang option[value='" + v + "']").attr('selected', 'selected');
            $('#giveAnIDtoYourListview').listview('refresh');
            $('#giveAnIDtoYourSelect').selectmenu('refresh');
        }
    </script>

Listview: http://jquerymobile.com/demos/1.2.1/docs/lists/docs-lists.html

Select: http://jquerymobile.com/demos/1.2.0/docs/forms/selects/methods.html

0
votes

I ended up setting the display value myself:

<label for="language" class="select"></label> <select
                                name="language" id="language" class="lang" data-corners="false"
                                data-iconpos="noicon">
                                    <option value="En">Lang</option>
                                    <option value="En">En</option>
                                    <option value="Nl">Nl</option>
                                    <option value="De">De</option>
                            </select>

$(document).on('change', '#language', function () {
        var v = $(this).val();
        translate(v);
        $("#language option").removeAttr('selected');
        $("#language option[value='" + v + "']").attr('selected', 'selected');
        $(".ui-header .ui-navbar .ui-grid-a .ui-block-b .ui-select .ui-btn .ui-btn-inner .ui-btn-text .lang").html(v);
    });

Don't mind the long selector, i just want to be sure i have the correct dropdown ;)