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?

Community · Accepted Answer · 2017-05-23 12:04:55Z

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, 2017 at 12:04

CommunityBot

11 silver badge

answered Mar 19, 2013 at 18:00

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gábor Over a year ago

Sadly it does not changed :(

Gajotres Over a year ago

If it is not a problem to you, mail me your code and I will take a look.

Gábor Over a year ago

It is not a problem, a moment please :)

Gajotres Over a year ago

Ok, let me finish my dinner and I will fix your problem

Najeeb K · Accepted Answer · 2013-03-20 06:13:12Z

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>');

Collectives™ on Stack Overflow

jquery mobile didn't append div to content

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related