JQuery Mobile changepage changes the page than go back to the previous page

Question

I´m trying to use $.mobile.changePage inside a popup anchor to change to another page but when I click the anchor inside the popup the page changes and then back to the previous page again.

I tried this solution: changePage "jumps" back to old page using this: $(document).bind("mobileinit", function(){ $.mobile.pushStateEnabled = false; });

but it didn't work either.

This is how I built my page:

<div id="pgTest" data-role="page" data-theme="a">
    @Html.Partial("_Header", new WebApp.Models.HeaderModel() { Header = "Title" })
    <div data-role="ui-content">
        <div style="width:90%; margin:0 auto;">
            @Html.Partial("_ListViewWithFilter", Model)

            <!--Pop Up-->
            <div data-role="popup" id="popupConfirmacao" data-dismissible="false" data-overlay-theme="a" class="ui-corner-all">
                <div role="main" class="ui-content">
                    <h3 class="ui-title" id="dialogTitle"></h3>
                    <a id="linkConfirmacaoDialog" href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Sim</a>
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Não</a>
                </div>
            </div>
            <!--Pop Up ends-->
        </div>
    </div>
    @Html.Partial("_Footer")
</div>

and this is my JS:

<script type="text/javascript">
        $(function () {
            var itens = $('#ulMusicas>li');
            itens.click(function () {
                var nomeMusica = $(this).find('a').text();
                $('#dialogTitle').text('Add "' + nomeMusica + '"?');
                $('#linkConfirmacaoDialog').click(function () {                    
                    $.mobile.changePage('/Controller2');
                });
                $('#popupConfirmacao').popup('open', { positionTo: 'window', transition: 'pop' });
            });
        });
</script>

It basically creates a listview and when you click any item it will open a popup. If you click the button on popup it should redirect you to the other page. At this moment jquery mobile redirects me to the other page and then backs to the previous page.

Anyone have any ideia what may be happening?

It worked! So obviously, I can't believe I haven't seen this... Thank you very much! — Raiiy, Jan 07 '15 at 00:09

score 3 · Accepted Answer · answered Jan 07 '15 at 00:14

The issue is caused by data-rel="back" in #linkConfirmacaoDialog confirmation button. When you hit that button, you give two different navigation orders. What happens is that you navigate to target page and then back in history. Use data-rel="back" only when you want to close popup and remain in same page.

Another issue, popup div shouldn't be wrapped in div other than page div. Moreover, you are adding multiple click listeners to #linkConfirmacaoDialog whenever a list item is clicked. Place click binding outside other click binding.

$(function () {
    var itens = $('#ulMusicas>li');
    /* list item click listener */
    itens.click(function () {
        var nomeMusica = $(this).find('a').text();
        $('#dialogTitle').text('Add "' + nomeMusica + '"?');
        $('#popupConfirmacao').popup('open', {
            positionTo: 'window',
            transition: 'pop'
        });
    });
    /* confirmation button - popup */
    $('#linkConfirmacaoDialog').click(function () {
        $.mobile.changePage('/Controller2');
    });
});

I see.. But can my popup be in the same page div `pgTest` of my page or should I create another page div just to wrap the popup? Actually what I was trying to do is override the listener from `#linkConfirmacaoDialog` when any item of my listview is clicked because the page to redirect will be dynamic. I tought that when I do this I'm overriding the listener and not adding multiple listeners — Raiiy, Jan 07 '15 at 01:20
@Raiiy no, just keep it inside same page, but _page div_ should be direct parent of _popup_. e.g. `
popup
` — Omar, Jan 07 '15 at 09:23

JQuery Mobile changepage changes the page than go back to the previous page

1 Answers1

Linked