jQuery ajax无法从node.js中的视图文件工作？

Question

I am start working on express nodejs and stuck in ajax call or jquery from hbs view.

Here is my controller methods:

router.get('/', function(req, res) {
    console.log("home get request");
    res.render('index', { layout:'/layout/default' });  
});

router.post('/getPosts', function(req, res) {
    console.log("hi");
    var html = "";
    conn.query("CALL getPosts(?)",[req.session.user_id], function(err, rows){
        if(err){
            console.log(err);
        } else {
            if(rows) {
                for (var i in rows[0]) {
                    if(i.post_text != null && i.post_image != null) {
                        html = html + '<div class="post"><div class="user"><span>'+i.user_name+'</span></div><div class="post_text"><pre>'+i.post_text+'</pre></div><div class="post_image"><img src="/images.post_images/'+i.post_image+'" /></div><div class="create_time"><span>'+i.created_on+'</span></div></div>';
                    } else if(i.post_text == null) {
                        html = html + '<div class="post"><div class="user"><span>'+i.user_name+'</span></div><div class="post_image"><img src="/images.post_images/'+i.post_image+'" /></div><div class="create_time"><span>'+i.created_on+'</span></div></div>';
                    } else if(i.post_image == null) {
                        html = html + '<div class="post"><div class="user"><span>'+i.user_name+'</span></div><div class="post_text"><pre>'+i.post_text+'</pre></div><div class="create_time"><span>'+i.created_on+'</span></div></div>';
                    }

                }
                console.log(html);
                res.json(html);
                res.send(html);
            }
        }
    });
});

and below is my hbs file index.hbs:

<div class="container">
    <div class="pull-right"><button type="button" class="btn add">Create Post</button></div>
    <div class="container posts_div">
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('load', function(){
            $.post('/home/getPosts',{test:"jeevan"},function(res){
                console.log(res);
                $(".posts_div").html(res);
            },'json');
        });

        $(".add").click(function(){
            alert("thats working");
        });
    });

<script>

And my routing is

app.use('/home', index);

I want when I render the index view the ajax call fetch all posts from database and show in that view file. and one more thing is the get request on index page is coming after login when user login I redirect that user to this url and one get request is goes in index controller and view render on screen but i don't know why jquery is not working here.

Thanks in advance.

Answer 1

You are making a confusion between document and window .

$(document).ready(function() {
  // document is now ready
  $(document).on('load', function() {
    // doesn't work
  })
  $(window).on('load', function() {
    // window is now fully loaded
  });
});

Documentation for jquery $(document).ready