jquery mobile didn't append div to content

Question

I have a script which should append some element to the Content div, but it didn't work. As you see the content of the "messageBox" is arrives from a php file which select the mysql table and the data from it.

Here is the JS file's content:

    function getWallMsg(){
    $.getJSON('SELECT_uzenofal.php?callback=?',function(data) {
        data.forEach(function(e){
            $('#posts').append($('<div class="messageBox">'+'<img src="img/profilok/'+e.kep+'"/>'+'<p class="name">'+e.nev+'</p>'+'<p>'+e.uzenet+'</p>'+'<p class="time">'+e.ido+'</p>'+'</div>'));
        });
    });
}

$(document).ready(function(){
    drawNavbar();
    getWallMsg();
});

And the html:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" >
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
    <!-- Home -->
    <div data-role="page" id="fal">
        <!-- header -->
        <div data-role="header">
            <h3>
                Üzenőfal
            </h3>
        </div>
        <!-- content -->
        <div data-role="content" id="posts">

        </div>
        <!-- footer -->
        <div class="nav" data-role="footer" data-position="fixed" data-theme="a"></div>
    </div>
</body>

What should I do?

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

This should be changed:

$(document).ready(function(){
    drawNavbar();
    getWallMsg();
});

to this:

$(document).on('pagebeforeshow', '#fal', function(){       
    drawNavbar();
    getWallMsg();
});

Basically document ready should not be used with jQuery Mobile, to find out more about this take a look at this ARTICLE, to be transparent it is my personal blog. Or find it HERE.

Basically you are trying to append it on document ready when page content is not loaded into the DOM. Instead proper jQuery Mobile page event, like pagebeforeshow, should be used.

EDIT :

You were adding an incorrect id to the pagebeforeshow even. It should work now.

edited May 23 '17 at 12:04

Community

1
1

answered Mar 19 '13 at 18:00

Gajotres

57,309
16
102
130

Sadly it does not changed :( – Gábor Mar 19 '13 at 18:06
If it is not a problem to you, mail me your code and I will take a look. – Gajotres Mar 19 '13 at 18:08
It is not a problem, a moment please :) – Gábor Mar 19 '13 at 18:08
Ok, let me finish my dinner and I will fix your problem – Gajotres Mar 19 '13 at 18:17

score 0 · Answer 2 · answered Mar 20 '13 at 06:13

could not comment so posting as answer.

$('#posts').append($('<div class="messageBox">'+'<img src="img/profilok/'+e.kep+'"/>'+'<p class="name">'+e.nev+'</p>'+'<p>'+e.uzenet+'</p>'+'<p class="time">'+e.ido+'</p>'+'</div>'));

have you tried changing above to

$('#posts').append('<div class="messageBox">'+'<img src="img/profilok/'+e.kep+'"/>'+'<p class="name">'+e.nev+'</p>'+'<p>'+e.uzenet+'</p>'+'<p class="time">'+e.ido+'</p>'+'</div>');

jquery mobile didn't append div to content

2 Answers2