Jquery Mobile is repeating content dynamically created

Question

I'm creating a Jquery Mobile page and I want to repeat its header in all pages.

So I decided to do it via Jquery, where you can see below.

a) this is the header content:

var header_content = '' +
    '<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-left header-controlgroup">' +
    '<a href="inicial.html" data-role="button" data-iconpos="notext" data-icon="home" id="icon-home"></a>' +
    '<a href="#" data-role="button" data-iconpos="notext" data-icon="like-facebook" id="icon-like-facebook"></a>' +
    '</div>' +
    '<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-right header-controlgroup">' +
    '<a href="#" onclick="location.reload();" data-role="button" data-icon="refresh" data-iconpos="notext" data-inline="true" id="icon-reload"></a>' +
    '<a href="#painel_config" data-rel="popup" data-role="button" data-icon="gear" data-iconpos="notext" data-inline="true" id="icon-config"></a>' +
    '</div>' +
    '<img src="img/logo.png" alt="image" style="display:block; margin-left:auto; margin-right:auto; height:40px; padding: 3px" />';

b) this is the HTML header that all pages have:

<!-- Header -->
<div data-role="header" data-position="fixed" class="header ui-fixed-hidden">
    <div id="header-content"></div>
</div>

c) every page has a pagecreate function to add the header:

$(document).on('pagecreate', '#page_categorias', function(e) {
    $('#header-content').empty();
    $('#header-content').html(header_content);
});

d) all pages have these JS links:

<script src="js/jquery-1.9.0.js"></script>
<script src="js/codiqa.ext.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>

e) in codiga.ext.js there are the declaration of header_content variable and pagecreation function.

EDITED: The problem is that every time I enter in the same page, the header content is duplicated, and not refresh - it's appending the header content and not refreshing it.

Where is the issue? I'm doing it in the right way?

Thanks in advance.

Answer 1

Try this -

$(document).on('pagebeforeshow', '#page_categorias', function(e) {
    var header = $.mobile.activePage.find('#header-content');
    header.empty();
    header.html(header_content);
    $.mobile.activePage.trigger('pagecreate'); // <- trigger a pagecreate to enhance your new content
});

Answer 2

I don't see how your solution works at all. It doesn't matter if you are using one HTML page with multiple pages or multiple HTML pages for your application you will have at least 2 divs with an id #header-content loaded into the DOM.

If you access them only with:

$('#header-content')

web application will access only first id occurrence found inside the DOM. To counter this you will need to access #header-content found only inside current active page.

Something like this:

$(document).on('pagebeforeshow', '[data-role="page"]', function(e) {
    var header_content = '' +
        '<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-left header-controlgroup">' +
        '<a href="inicial.html" data-role="button" data-iconpos="notext" data-icon="home" id="icon-home"></a>' +
        '<a href="#" data-role="button" data-iconpos="notext" data-icon="like-facebook" id="icon-like-facebook"></a>' +
        '</div>' +
        '<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-right header-controlgroup">' +
        '<a href="#" onclick="location.reload();" data-role="button" data-icon="refresh" data-iconpos="notext" data-inline="true" id="icon-reload"></a>' +
        '<a href="#painel_config" data-rel="popup" data-role="button" data-icon="gear" data-iconpos="notext" data-inline="true" id="icon-config"></a>' +
        '</div>' +
        '<img src="img/logo.png" alt="image" style="display:block; margin-left:auto; margin-right:auto; height:40px; padding: 3px" />';         
    var header = $.mobile.activePage.find('#header-content');
    header.empty();
    header.html(header_content);
    $.mobile.activePage.trigger('pagecreate');
});

This code will work on every possible page. This is also a reason why page refresh is helping your application. Refresh will clear the DOM and only one page will be active, thus only one #header-content div will be found and accessed.

Proof:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>    
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>   
    <script>
        $(document).on('pagebeforeshow', '[data-role="page"]', function(e) {
            var header_content = '' +
                '<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-left header-controlgroup">' +
                '<a href="inicial.html" data-role="button" data-iconpos="notext" data-icon="home" id="icon-home"></a>' +
                '<a href="#" data-role="button" data-iconpos="notext" data-icon="like-facebook" id="icon-like-facebook"></a>' +
                '</div>' +
                '<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-right header-controlgroup">' +
                '<a href="#" onclick="location.reload();" data-role="button" data-icon="refresh" data-iconpos="notext" data-inline="true" id="icon-reload"></a>' +
                '<a href="#painel_config" data-rel="popup" data-role="button" data-icon="gear" data-iconpos="notext" data-inline="true" id="icon-config"></a>' +
                '</div>' +
                '<img src="img/logo.png" alt="image" style="display:block; margin-left:auto; margin-right:auto; height:40px; padding: 3px" />';         
            var header = $.mobile.activePage.find('#header-content');
            header.empty();
            header.html(header_content);
            $.mobile.activePage.trigger('pagecreate');
        });
    </script>       
</head>
<body>
    <div data-role="page" id="index">       
        <div data-role="header" data-position="fixed" class="header ui-fixed-hidden">
            <div id="header-content"></div>
        </div>

        <div data-role="content">
            <a href="index2.html" data-role="button">Open dialog</a>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
</html>  

index2.html

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>    
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>   

</head>
<body>
    <div data-role="page" id="second">
        <div data-role="header" data-position="fixed" class="header ui-fixed-hidden">
            <div id="header-content"></div>
        </div>

        <div data-role="content">
            <a href="index.html" data-role="button">close page</a>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>