DOM update via jQuery Mobile

Asked

Viewed 477 times

2

I am having trouble updating an element, through jQuery. I will summarize the codes:

HTML

<div data-role="header" data-position="fixed" data-tap-toggle="false">
    <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    <h1>Ranking</h1>
    <a id="btnPlayerName" href="#" class="ui-btn-right">Player</a>
</div>

<div data-role="content">
    <ul id="rankingList" data-role="listview"></ul>
</div>

JS

$(document).on('pageshow', '#pagRanking', function() {
    headerData();
})

function headerData() {
    if(sessionStorage.getItem('mbPlayerID') == null) {
        window.location.href="index.php";
    }
    $("#btnPlayerName").empty();
    lblPN  = '<span class="ui-btn-inner">';
    lblPN += '<span class="ui-btn-class">';
    lblPN += playerName;
    lblPN += '</span>';
    lblPN += '</span>';
    $("#btnPlayerName").append(lblPN);
}

Everything is OK with Septssion, but the append doesn’t work.

Any idea?

jquery

  • I switched the append to html and nothing happens. Maybe it is a scope problem because an Alert($('#btnPlayerName'). html()) returns the expected, but the page does not update (verified through the element inspector).

  • console.log(lblPN); Gives the expected result on the browser console you are using? btnPlayerName is unique ID or is repeated somewhere on the page?

  • It was repeated on every page and that was the problem!!!

  • what version of jQM are using?

1 answer

1


The code you presented in the question is perfectly valid and works as expected.

Example working on Jsfiddle

Considerations to take when performing this type of operations on Ids:

ID is unique:

How you are performing operations on an element from its id, in this case the #btnPlayerName, you have to ensure that it is unique throughout the entire document, not just what you are currently viewing on the screen.

Note that CSS classes can be repeated, Ids are used in order to identify a single element present throughout the document, see unique identifiers (English).

Your problem

jQuery mobile was not "bursting" due to repeated Ids, but was operating on the first element with the id indicated that he found in the document, rather than carrying out the operation you wanted in the element you wanted.

This justifies why you were getting to see the output of your code in condition but there seemed to be no change in the DOM.

Unrelated, but you can simplify your function code a little bit headerData() rewriting it as follows:

function headerData() {
    
    if(sessionStorage.getItem('mbPlayerID') == null) {
        window.location.href="index.php";
    }

    var $btnInner = $('<span/>', {class:"ui-btn-class"}), // criar span interior
        $btn      = $('<span/>', {class:"ui-btn-inner"}); // criar span exterior

    $btnInner.html(playerName).appendTo($btn);            // juntar tudo
    $("#btnPlayerName").html($btn);                       // aplicar dentro do elemento alvo
}

Example working on Jsfiddle

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.