douchensou6495
2010-08-12 20:52
浏览 69

PHP / jQuery:插入后的Fadein / refresh

i have a "wall" on each profile, and i wish to make it smarter, so you don't need to update the page to view your inserted message you just put up.

When you insert a message, it makes a ajax call and inserts to the database, and you receive a message about it has been inserted. But right now you need to refresh the page to see your inserted message. What i want to do is if you insert a new message, it should fadein /refresh the wall with messages that is right under the form. How can I do this?

I have worked on it alittle and tried to make a new file, inserted all coding to show comments and then i set timeout to refresh each 2 seconds

 function ajax_update() {
    var wrapperId = '#box';
    var profileID = document.getElementById('profileID');
    var postFile = 'showcomments.php?id='+ profileID.value;

    _v++;
    _v2++;

    $.post(postFile, { v2: _v2 , v: _v},
      function(data){
        $(wrapperId).html(data);
      });
    setTimeout('ajax_update()', 2000);
  }   

but this isnt good, as it makes too many server calls, so hope you can help me out, since i dont know how i should do this in a cool way

Form with ajax call: http://phpbin.net/x/838833504

And my current php code that grab from db and list in messages: http://phpbin.net/x/2145692361

图片转代码服务由CSDN问答提供 功能建议

我在每个配置文件上都有一个“墙”,我希望它更聪明,所以你不需要 更新页面以查看刚刚放置的插入消息。

当您插入消息时,它会进行ajax调用并插入数据库,并且您收到有关它的消息 插入。 但是现在您需要刷新页面以查看插入的消息。 我想要做的是,如果你插入一条新消息,它应该用表格下面的消息淡化/刷新墙。 我可以这样做吗?

我已经努力了,并尝试制作一个新文件,插入所有编码以显示评论然后我设置超时刷新每2秒

  function ajax_update(){
 var wrapperId ='#box'; 
 var profileID = document.getElementById('profileID'); 
 var postFile ='showcomments.php  ?id ='+ profileID.value; 
 
 _v ++; 
 _v2 ++; 
 
 $ .post(postFile,{v2:_v2,v:_v},
 function(data){
 $(  wrapperId).html(data); 
}); 
 setTimeout('ajax_update()',2000); 
} 
   
 
 

但这并不好 因为它会拨打太多的服务器电话,所以希望你能帮助我,因为我不知道我应该如何以一种很酷的方式做到这一点

带有ajax调用的表单: http://phpbin.net/x/838833504

我的 从db中获取并在消息中列出的当前php代码: http://phpbin.n et / x / 2145692361

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dph19153 2010-08-12 21:07
    已采纳

    I would suggest a slight methodology change:

    1. submit the new post to the database via AJAX
    2. in the success callback for that AJAX post, create an element with the content that was submitted and append it to the list of posts on the page.
    3. if you want it to look cool just use some of the built in animation effects (fadeIn, show, etc).

    This way, you're not polling for changes all the time, and you only have to request things from the server upon page loads.

    function DoWallInsert(){
    
      var wrapperId = '#box';
      var profileID = document.getElementById('profileID');
      $("#insert_response").html("Laddar..");
    
      $.ajax({ 
       type: "POST",
       url: "misc/insertWall.php",
       data: {
           value: 'y',
           BuID : $('#BuID').val(),
           uID : $('#uID').val(),
           message : $('#message').val() 
       },
       success: function(msg){
           // in here you will have to add the message to the top of the list of wall posts
           // to do this you use prepend whatever html and the message in whatever way you 
           // are using to display the messages.
           $(wrapperId).prepend("<div>" + $('#message').val() + "</div>");
       }
     });
    }
    

    html might look like this before:

    <form action="javascript:DoWallInsert()" method="post">
        <input name="message" type="text" id="message" value="" size="40">
        <input type="hidden" name="BuID" id="BuID" value="123123">
        <input type="hidden" name="uID" id="uID" value="53425">
        <input name="submit" type="submit" id="submit" value="Skicka">
    </form>
    
    <div id="box">
        <div id="post-1">Some stuff</div>
        <div id="post-2">Some other stuff</div>
    </div>
    

    html should look like this after:

    <form action="javascript:DoWallInsert()" method="post">
        <input name="message" type="text" id="message" value="" size="40">
        <input type="hidden" name="BuID" id="BuID" value="123123">
        <input type="hidden" name="uID" id="uID" value="53425">
        <input name="submit" type="submit" id="submit" value="Skicka">
    </form>
    
    <div id="box">
        <div>Whatever was typed in the box</div>
        <div id="post-1">Some stuff</div>
        <div id="post-2">Some other stuff</div>
    </div>
    

    If the html you want to append to the list of posts has php in it then my best suggestion is to return the html for the new div in the response from the server on the on the AJAX call to this: misc/insertWall.php

    insertWall.php should return "<a href='profil.php?id=".$userinfo[id]."'>".$userinfo["full_name"]."</a>". then you can process it and display it in the success part of DoWallInsert():

       success: function(msg){
           // in here you are receiving a response, you should display it in the page
           // this assumes that you are fully formatting the message before returning it
           // and you just want to insert it here.
           $(wrapperId).prepend(msg);
       }
    
    打赏 评论
  • dpi9530 2010-08-12 21:00

    One way is to return the newly updated wall listing from your .post() handler on the server. Then in the callback, repaint the wall area with that content (forget about using setTimeout()). You could also do the same thing, but working message by message, adding the latest message to the top of the "stack" in your wall content area.

    So, repainting the whole wall:

    $.post(postFile, { v2: _v2 , v: _v},
      function(data){
        // make your server return the updated wall content
        // return data.whatever
        //        data.wallcontent
        $('#wrapperId').html(data.wallcontent);
    });
    

    or message by message:

    $.post(postFile, { v2: _v2 , v: _v},
      function(data){
        // make your server return the new message ready for insert
        // return data.whatever
        //        data.message_you_just_posted_formatted
        $('#wrapperId')
          .prepend( data.message_you_just_posted_formatted );
    });
    

    That's the basic idea.

    打赏 评论

相关推荐 更多相似问题