JQuery mobile multiple panels not working

Question

I'am developing an web application with jQuery mobile and I've on my index.php 3 different pages (div data-role="page"). For that 3 pages I want to have a panel in each one. That's what I've tried:

HTML

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

    <?php
        if($view != 'admobile'){
    ?>

    <div data-role="header">
        <a id="open-panel" class="ui-btn ui-corner-all ui-icon-bullets ui-btn-icon-notext"></a>
        <h1 id="title"></h1>

        <script type="text/javascript">
            var title = $("title").text();
            $("#title").text(title);
        </script>
    </div>



    <?php
        }
    ?>

    <div data-role="main" class="ui-content">

        <?php

        if ($option == "com_telem_articles" || ($option == "com_ads" && $view == "listmobile")){ // Listagens das notícias, usados e passatempos

            /*$articleID = JRequest::getCmd('article');
            if ($articleID){
        ?>
            <script type="text/javascript">
                usadosReturn(<?php echo $articleID; ?>);
            </script>
        <?php
            }*/
        ?>
            <div data-test-role="flip"  data-test-loop="false" data-test-show-pager="false">
                <jdoc:include type="component" />
            </div>

        <?php
        } else { //Detalhe de um usado
            $articleID = JRequest::getCmd('id');
            $ecode = JRequest::getCmd('ecode'); //Se o utilizador enviar um email, vai ser recebido aqui o código 1 ou 0 (enviado ou erro a enviar)     

        ?>


            <div id="used" data-article-id="<?php echo $articleID;?>">

                <div id="form_warning_top">
                    <div id="form_warning">
                        <div class="box">
                            <ul>
                                <li>Não forneça dados pessoais completos ou a morada completa.</li>
                                <li>Se ainda não conheceu o anunciante pessoalmente, tenha em conta a regra de confiança limitada.</li>
                                <li>Lembre-se de conhecer o anunciante em pessoa</li>
                                <li>Verifique outras regras de segurança</li>
                            </ul>
                            <button class="dontshow">Não voltar a mostrar esta mensagem.</button>
                            <a title="Close" class="form_warning_close" href="javascript:;"></a>
                        </div>
                    </div>
                </div>

                <?php if ($ecode == 1) { //Email enviado?>

                    <div id="system-message-container">
                        <div id="system-message">
                            <div class="alert alert-message">
                                <a class="close" data-dismiss="alert">×</a>
                                <h4 class="alert-heading">Mensagem</h4>
                            <div>
                            <p>Email Enviado com Sucesso</p>
                        </div>
                    </div>

                <?php } else if ($ecode == 2) { //Erro ao enviar email?>

                    <div id="system-message-container">
                        <div id="system-message">
                            <div class="alert alert-notice">
                                <a class="close" data-dismiss="alert">×</a>
                                <h4 class="alert-heading">Aviso</h4>
                            <div>
                            <p>Ocorreu um Problema ao Enviar Email.</p>
                        </div>
                    </div>

                <?php } ?>

                <jdoc:include type="component" />
            <!</div>

        <?php
        }
        ?>
    </div>
</div>

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

    <div data-role="header">
        <a id="open-panel" class="ui-btn ui-corner-all ui-icon-bullets ui-btn-icon-notext"></a>
        <h1 id="title"></h1>

        <script type="text/javascript">
            var title = $("title").text();
            $("#title").text(title);
        </script>
    </div>

    <div data-role="main" class="ui-content">
        <div data-test-role="flip_aux"  data-test-loop="false" data-test-show-pager="false"></div>
    </div>
</div>

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

    <div data-role="header">
        <a id="open-panel" class="ui-btn ui-corner-all ui-icon-bullets ui-btn-icon-notext"></a>
        <h1 id="title"></h1>

        <script type="text/javascript">
            var title = $("title").text();
            $("#title").text(title);
        </script>
    </div>

    <div data-role="main" id="used_content" class="ui-content">

        <iframe id="usadosIframe" style="border:0;" src=""></iframe>

    </div>
</div>

JQUERY

$(document).on('pagebeforecreate', '[data-role="page"]', function(){   
    $('<div>').attr({
        'id':'mypanel',
        'data-role':'panel'
    }).appendTo($(this));

    $("#mypanel").html('<ul data-role="listview" data-inset="true"><li><a href="/telemoveis_j3/index.php" rel="external">&Uacute;ltimas not&iacute;cias</a></li><li><a href="/telemoveis_j3/index.php?option=com_ads&view=listmobile&Itemid=118" rel="external">Usados</a></li><li><a href="/telemoveis_j3/index.php?option=com_telem_articles&view=categorymobile&id=40&Itemid=119" rel="external">Passatempos</a></li></ul>');

    $(document).on('click', '#open-panel', function(){   
        $.mobile.activePage.find('#mypanel').panel("open");      
    });    
});

What is wrong here ?

Answer 1

If you want the panel to be added to only one page then target that page only and instead of using 'pagebeforecreate' use 'pagebeforeshow', as follows:

Then enhance the parent of the panel and lastly trigger a click event on the panel opener.

$(document).on('pagebeforeshow', '#contentPrincipal', function(){ 
    $('<div>').attr({
        'id':'mypanel',
        'data-role':'panel'
    }).appendTo($(this));

    $("#mypanel").html('<ul data-role="listview" data-inset="true"><li><a href="/telemoveis_j3/index.php" rel="external">&Uacute;ltimas not&iacute;cias</a></li><li><a href="/telemoveis_j3/index.php?option=com_ads&view=listmobile&Itemid=118" rel="external">Usados</a></li><li><a href="/telemoveis_j3/index.php?option=com_telem_articles&view=categorymobile&id=40&Itemid=119" rel="external">Passatempos</a></li></ul>').parent().enhanceWithin();

    $(document).on('click', '#open-panel', function(){   
        $('#mypanel').panel("open");      
    });
    $('#open-panel').click();    
});

EDIT The code has been updated to add a panel opener button to each page. Since the content in all the panels would have been the same it make sense to create one panel only.

NOTE: Since you already have #open-panel, you do not need to create buttons in each page.