单击聊天按钮时移动用户以使用AJAX |聊天页面重要

时间:2018-09-20 11:50:39

标签: php ajax

在我的网站上,每个用户个人资料中都有一个“消息”按钮 因此,当任何用户单击“消息”按钮时,都应使用ajax将其移动到“消息”页面。

1-我不知道如何获取用户ID表单个人资料页面并使用Ajax将其移至消息页面

  1. 如果这不是该用户的第一次,应按访问打开 页面页面
  

图像   enter image description here    普通用户中的MESSGE BUTON

enter image description here 聊天页面

  

配置文件页面中的代码消息按钮

 $("#startMessage").click(function()
  {
   var user_id = $("#user_id").val(); 
   alert(user_id);
    $.ajax
    ({
        type:"POST",
        url:"<?php echo base_url('Message/index')?>",
        data:{'user_id' : user_id},
        datatype:'html',
        success:function(data) 
        {
            window.location.href="<?php echo base_url('Message/index')?>";
            $("#loadMessages").html(data);
        }

    });
  });
  

代码,应在代码完整的控制页中   取得用户ID

  public function index()  //used
{
    $user_id =$this->session->userdata('doctor')[0]->user_id;// My Id To Get My User List  By My Id
    $data["lists"] = $this->Message_model->getMyUserList($user_id);
    $this->load->view('front/Message_View',$data);
}


/*
 Show Or Get Messge List 
*/
public function getMessage()   //used
    {

        $touser = $this->input->post('touser'); // touser Id To Get My User List  By touser Id
         $data['messages'] = $this->Message_model->getMessage($touser);

        foreach($data['messages'] as $message)
        {

            if ($message->touser ==  $touser)
            {
            echo '
                <div class="chat-message self">
                    <div class="chat-message-content-w">
                        <div class="chat-message-content">'.$message->message.'</div>
                    </div>
                    <div class="chat-message-date">'.$message->date_msg.'</div>
                    <div class="chat-message-avatar"><img alt="" src="https://www.bodywork.sa.com/mohammed/img/face-7.jpg"></div>
                </div>

            ';
            }
            else {
                 echo '
                <div class="chat-message">
                    <div class="chat-message-content-w">
                        <div class="chat-message-content">'.$message->message.'</div>
                    </div>
                    <div class="chat-message-avatar"><img alt="" src="https://www.bodywork.sa.com/mohammed/img/face-7.jpg"></div>
                    <div class="chat-message-date">'.$message->date_msg.'</div>
                </div>
                ';
                 }
        }


    }



 /*
Send New Messeg
*/  
function sendMessage()   //used
{
    $message = $this->input->post('msg'); // This Data Take From Ajax
    $touser = $this->input->post('touser');
  // echo $message ,$touser ; die;
   // $reservation_id = $this->input->post('reservation_id');
    $data= array
    (
        'message'=>$message,
        'date_msg'=>date("Y-m-d H:i:s"),
        'touser'=>$touser,
       // 'reservation_id'=>$reservation_id,
        'status'=>"non",
        'chatdeals'=>"non",
        'fromuser'=>$this->session->userdata('doctor')[0]->user_id
    );
    $insert = $this->Message_model->sendMessage($data);
        if($insert){
            echo 1;
        }else{
            echo 0;
        }

}
  

CODE MESSGE通过Ajax查看PAGE

   <div class="chat-search">
                                        <!-- serach -->
                                        <div class="element-search"><input placeholder="Search users by name..." type="text"></div>


                                    </div>
                            <!-------------------------  Left  Side  Start  ------------------->

                                     <!-----------------------List user
                                    --------------------------------------------------->
                                    <div class="user-list">
                                        <?php foreach($lists as $list ){ ?>

        <div data-touserid="<?php echo $list->user_id ?>"  id="<?php echo $list->name ?>"  class="user-w"> 
                                <!---------------- Evry Thing form This Id IMPORTANT----------------->

                                            <div class="avatar with-status status-green">
                                                <img alt="" src="https://www.bodywork.sa.com/mohammed/img/face-7.jpg"></div>
                                            <div class="user-info">
                                                <div class="user-date">2 days</div>
                                                <div class="user-name"><?php echo $list->name ?></div>
                                                <div class="last-message">They have submitted users...</div>
                                            </div>
                                        </div>
                                        <?php } ?>

                                    </div>
                                </div>
                                <!-------------------------   Left  Side  End  ------------------->

                                <div class="full-chat-middle"> <!--  beside the to ueser name put the touer id -->
                                    <div class="chat-head">   


                                    </div>
                                    <div class="chat-content-w ps ps--theme_default" data-ps-id="e9e4b066-577f-fc03-9e0c-3979505e77eb">
                                        <div id="loadMessages" class="chat-content">
                                            <!------------------------------- 
                                            the design in the controller 
                                            /--------------------------------->
                                          </div>
                                        <div class="ps__scrollbar-x-rail" style="left: 0px; bottom: 0px;">
                                            <div class="ps__scrollbar-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                                        </div>
                                        <div class="ps__scrollbar-y-rail" style="top: 0px; right: 0px;">
                                            <div class="ps__scrollbar-y" tabindex="0" style="top: 0px; height: 0px;"></div>
                                        </div>
                                    </div>
                                    <div class="chat-controls">
                                        <div class="chat-input">
                                              <!------------------------------- 
                                           messge content value
                                            /--------------------------------->

                <input id="message_text" name="message_text" placeholder="Type your message here..." type="text"></div>
                                      <!------------------------------- 
                                          add messge script
                                            /--------------------------------->
                                            <div class="chat-btn">

                                              <!-- <a id="sendMessage"   class="btn btn-primary btn-sm btn-fill" >Send2</a> -->
                                        </div>
                                    </div>
                                </div>
  

查看信息页面中的AJAX

           <script>


             /*
          * Make First Message in page is the first
             *
  */
    $(document).ready(function(){
        $(".user-w:first").trigger("click"); 
    });


  /*
  * Show User List
  *
  */
   $(".user-w").click(function()
   {
       var touser =$(this).data('touserid');
       //$(this).attr("touserid"); // touser Id To Get My User List  By touser Id
       var touserName = $(this).attr("id"); // touser Id To Get My User List  By touser Id

       alert(touser);
       alert(touserName);
        $.ajax
        ({
            type:"POST",
            url:"<?php echo base_url('Message/getMessage/')?>",
            data:{'touser' : touser},
            datatype:'html',
            success:function(data) 
            {
               $("#loadMessages").html(data); // refrech the chat to get the news by ajax real time
               //alert ("yub");

             var button = '<button type="button" onclick="sendMessage('+touser+')"  class="btn btn-info send_chat">Send</button>';
            $(".chat-btn").html(button);  // button to send messge touser by ajax with the touser id 

            var Head = ' <div id="user-info" class="user-info" "><span>To:</span><a href="<?php echo base_url('Profile/getUserById/')?>'+touser+'">'+touserName+'</a></div>';
            $(".chat-head").html(Head);



            }

        });
   });






         /*
                         * Send New Messeg
                          *
                         */
                         function sendMessage(touser)
                        {
           //alert("test");
           //alert(user_id);
             var msg = $("#message_text").val();
             var touser = touser;
              // alert(touser);
               //alert(msg);
             //var reservation_id = $("#reservation_id").val();
            if(!msg || msg.length == 0)
            {
                alert("enter a message");
            }
            else
            {
                $.ajax
                ({
                type:"POST",
                url:"<?php echo base_url('Message/sendMessage')?>",
            //  data:{'msg' : msg, 'touser' : touser, 'reservation_id' : 
             reservation_id},
                data:{'msg' : msg, 'touser' : touser},
                datatype:'text',
            //  Page.Server.ScriptTimeout = 300;
                    success:function(data) 
                    {
                        if(data == 1)
                        {
                         //$("#loadMessages").load();
                          $("#message_text").val("");
                              $(".user-w[id='"+ touser +"']").trigger("click");

                        }
                        else
                        {
                            alert("noo eroor chat message") ;                           
                        }

                    }, 
                });
                //return false;

                }

    }    // End Send Message Function 






    </script>

1 个答案:

答案 0 :(得分:0)

您可以将用户详细信息提交给控制器,而不是创建AJAX请求。视图加载位置。

$("#startMessage").click(function(){
    var user_id = $("#user_id").val();
    /*
     * AJAX request won't work here, because you had sent user_id data to controller "Message/index" using AJAX, 
     * then in it's success method you are again redirecting to page controller "Message/index", here user_id details are not present
     * Instead will just create a form and submit that form to controller "Message/index", so that variable user_id will available in "Message/index"
     * Once form submitted to controller Message/index, view "front/Message_View" was already getting loaded their as per existing code
    */
    var formHTML = '<form name="frmUserData" action="<?php echo base_url('Message/index')?>" method="post">'+
                        '<input type="hidden" name="user_id" value="'+ user_id +'">'+
                   '</form>';
    var formObj = $('.main-footer').append(formHTML).find("[name='frmUserData']");
    $(formObj).submit();
});