Мои внешние файлы JavaScript перестали работать после успешного вызова ajax для перезагрузки div - PullRequest
1 голос
/ 06 мая 2020

Я создаю простую систему чата, используя Ajax, jQuery, PHP, MySQLi.

На странице чата установлен почтовый запрос jquery для обработки сообщений, отправленных пользователем. Теперь проблема в том, что когда я отправляю сообщение пользователю, сообщение будет успешно отправлено, при попытке обновить div (сообщения чата) некоторые из моих внешних файлов js на странице индекса перестанут работать. См. jQuery код ниже:

$(function(){
$("#send-msgs").click(function(e){

/* Auto Detect A Link  (START)*/

// Get the content
var output = $("#message").val();
var chat_id = $("#chat_id").val();
e.preventDefault();

//Start Post Request
$.ajax({
    type: "POST",
    url: "post_message.php",
    data: "message_text="+output+"&chat_id="+chat_id,
    cache: false,
    beforeSend: function(){
        //Show Events before sending request
        $(".chat-main .active .details h6").html("<span class='text-primary'>You: </span><span class='text-secondary'>Sending...");
        $(".chat-main .active .date-status h6#time_status").html("--:-- --");
        $(".chat-main .active .date-status h6#msg_status").html("<span title='Sending...' class='fa fa-ellipsis-h'></span>");
        $("#setemoj").attr({
            "disabled" : "disabled",
        });
        $("#send-msg").attr({
            "disabled" : "disabled",
        });
    },
    //If everything looks right, continue
    success: function(response){
        $.ajax({
            type: "POST",
            url: "only_load_chat.php",
            data: "phone_number=<?php echo @$phone_number1;?>&chat_id="+chat_id,
            cache: false,
            success: function(response){
                // alert(response);
                var current_time = $("#js_current_time").val();
                var msg = $("#setemoj").val();
                $(".chat-main .active .details h6").html("<span class='text-primary'><b>You:</b> </span><span class='text-secondary'>"+output+"</span>");
                $(".chat-main .active .date-status h6#time_status").html(current_time);
                $(".chat-main .active .date-status h6#msg_status").html("<span title='Seen'><span title='Sent' class='fa fa-check text-primary'></span></span>");
                // $(".chat-main .active .details .date-status h6").html(js_current_time);
                $("#fetch_chat").html(response);
                document.getElementById("setemoj").removeAttribute("disabled");
                document.getElementById("setemoj").value = "";
            },
        })
    }
});
});

});

post_message. php file

if($_SERVER['REQUEST_METHOD'] == "POST"){
session_start();
require "./includes/db-config.php";
require "./includes/check_if_login.php";
require "./includes/SaNiTiZer.php";
require "./includes/function.php";
if(isset($_REQUEST['chat_id']) && isset($_REQUEST['message_text'])){

    $user_msg  = htmlspecialchars($_REQUEST['message_text']);
    $chat_id1 = $_REQUEST['chat_id'];

    $sql = mysqli_prepare($conn, "INSERT INTO direct_chats_msg(`message`, `user_id`, chat_id) VALUES(?,?,?)");
    mysqli_stmt_bind_param($sql, 'sii', $user_msg, $user_id, $chat_id1);
    mysqli_stmt_execute($sql);
    echo "Done";
} else {
    echo "Error in POST request";
}
} else {
    echo "Error in POST request";
}

only_load_chat. php

 <?php

if($_SERVER['REQUEST_METHOD'] == "POST"){
    session_start();
    require "./includes/db-config.php";
    require "./includes/check_if_login.php";
    require "./includes/SaNiTiZer.php";
    require "./includes/settings.php";
    require "./includes/function.php";

$phone_number1 = $_REQUEST['phone_number'];
$main_chat_id = $_REQUEST['chat_id'];
?>

                    <!--<script src="./assets/js/owl.carousel.js"></script>-->
                    <!--<script src="./assets/js/tippy-bundle.iife.min.js"></script>-->
                    <!--<script src="./assets/js/bootstrap.js"></script>-->
                    <!--<script src="./assets/js/switchery.js"></script>-->
                    <!-- <script src="./assets/js/easytimer.min.js"></script> -->
                    <!-- <script src="./assets/js/index.js"></script> -->
                    <!-- <script src="./assets/js/popper.min.js"></script> -->
                    <!-- <script src="./assets/js/feather-icon/feather.min.js"></script>-->
                    <!-- <script src="./assets/js/feather-icon/feather-icon.js"></script>-->
                    <!-- <script src="./assets/js/zoom-gallery.js"></script> -->
                    <!-- <script src="./assets/js/script.js"></script> -->

                    <ul class="chatappend">
    <?php

        $sql = mysqli_prepare($conn, "SELECT * from direct_chats_msg where chat_id=?");
        mysqli_stmt_bind_param($sql, 'i', $main_chat_id);
        mysqli_stmt_execute($sql);

        $get_result = mysqli_stmt_get_result($sql);
        if(mysqli_num_rows($get_result)>0){
            while($row2 = mysqli_fetch_array($get_result)){
                $sender = $row2['user_id'];

                $sql2 = mysqli_prepare($conn, "SELECT id, userID, FirstName, LastName, OtherName, DisplayName, reg_date, 
                about_text, profile_pic, gender, countryCode, phone_number, `address`, `state`, country, website, is_online from accounts where id=?");
                mysqli_stmt_bind_param($sql2, 'i', $sender);
                mysqli_stmt_execute($sql2);

                $get_result2 = mysqli_stmt_get_result($sql2);
                    $row4 = mysqli_fetch_array($get_result2);
                    $chat_msg_id = $row2['dcm_id'];
            ?>
                    <li style="margin:15px;" class="<?php if($row2['user_id']==$user_id){echo"replies";}else{echo"sent";}?>">
                        <div class="media">
                            <div class="profile mr-4"><img class="bg-img" src="./assets/images/avtar/new/<?php echo $row4['profile_pic'];?>" alt="<?php echo $row4['LastName']." ".$row4['FirstName'];?>" /></div>
                            <div class="media-body">
                                <div class="contact-name">
                                    <!-- <h5><?php echo $row4['LastName']." ".$row4['FirstName'];?></h5> -->
                                    <h6><?php echo date("h:i:s A", strtotime($row2['chat_time']));?></h6>
                                    <ul class="msg-box">
                                        <li class="msg-setting-main">
                                            <div class="msg-dropdown-main">
                                                <div class="msg-setting"><i class="fa fa-ellipsis-h"></i></div>
                                                <div class="msg-dropdown" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);margin-top:-15px;margin-left:-100px;">
                                                    <ul>
                                                        <li><a href="#"><i class="fa fa-share"></i>forward</a></li>
                                                        <li><a href="#"><i class="fa fa-clone"></i>copy</a></li>
                                                        <li><a href="#"><i class="fa fa-star-o"></i>rating</a></li>
                                                        <li><a href="#"><i class="ti-trash"></i>delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <h5 class="msg-content" id="msg-content<?php echo $row2['dcm_id'];?>" style="<?php if($row2['user_id']==$user_id){echo"background-color:#1c9dea;color:#ffffff;padding:7px;";}else{echo"background-color:#e5edf5;color:#000;padding:7px;";}?>">
                                            <?php echo htmlspecialchars_decode($row2['message']);?><br/>
                                            </h5>
                                        </li>
                                        <div id="link_title<?php echo $chat_msg_id;?>"></div>
                                            <!--</li>-->

                                            <style>
                                                .custom_emoji {
                                                    width: 20px;
                                                    height: 20px;
                                                    background-origin: content-box;
                                                    color: transparent;
                                                    text-align: center;
                                                    padding: 3px;
                                                }

                                                .msg-content a {
                                                    color: #FF9800;
                                                    text-decoration: none;
                                                    border-bottom: 1px dotted #000;
                                                }
                                                .msg-content a:hover { color: #ffffff; }
                                            </style>
                                        </li>

                                        <!-- <script>
                                            function newMesssage() {
                                                    var message = $('.message-input input').val();
                                                    if($.trim(message) == '') {
                                                        return false;
                                                    }
                                                    // var today = new Date(),
                                                    //     h = checkTime(today.getHours()),
                                                    //     m = checkTime(today.getMinutes()),
                                                    //     s = checkTime(today.getSeconds());
                                                    // document.getElementById('cur_time').innerHTML = h + ":" + m + ":" + s;

                                                    var current_time = $("#js_current_time").val();
                                                    $('<li class="replies" style="margin:15px;">\
                                                    <div class="media"> \
                                                    <div class="profile mr-4 bg-size" style="background-image: \
                                                    url(&quot;./assets/images/avtar/new/<?php // echo $profile_pic;?>&quot;); background-size: \
                                                    cover; background-position: center center;"></div>\<div class="media-body">\
                                                    <div class="contact-name"> <h5>  </h5> <h6 id="cur_time">'+current_time+'</h6> \
                                                    <ul class="msg-box"> <li> <h5 style=background-color:#1c9dea;color:#ffffff;padding:7px;>\
                                                    ' + message + '</h5> </li></ul> </div></div></div></li>').appendTo($('.messages .chatappend'));
                                                    $('.message-input input').val(null);
                                                    $('.chat-main .active .details h6').html('<span>You: </span>' + message);
                                                    $(".messages").animate({ scrollTop: $(document).height() }, "fast");
                                                };

                                        </script> -->
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <?php require "./includes/current_user_chat_profile(right_sidebar).php";?>
            <?php
            }
            ?>
                </ul>

            <?php
    } else {?>
    <!-- node.js -->
            <?php require "./includes/current_user_chat_profile(right_sidebar).php";?>

            <script src="./assets/js/owl.carousel.js"></script>
            <script src="./assets/js/popper.min.js"></script>
            <script src="./assets/js/tippy-bundle.iife.min.js"></script>
            <script src="./assets/js/bootstrap.js"></script>
            <script src="./assets/js/switchery.js"></script>
            <script src="./assets/js/easytimer.min.js"></script>
            <script src="./assets/js/index.js"></script>
            <script src="./assets/js/feather-icon/feather.min.js"></script>
            <script src="./assets/js/feather-icon/feather-icon.js"></script>
            <script src="./assets/js/zoom-gallery.js"></script>
            <script src="./assets/js/script.js"></script>
    <?php
    }
 } else {
        require "./includes/error.php";
     }
//  } else {
//     require "./includes/error.php";
// }
?>

Внешние файлы js в only_load_chat. php, когда комментарии будут удалены, это будет сделайте так, чтобы включенные файлы js на странице индекса не работали (но слишком медленно загружали страницу). Даже после просмотра кодов в режиме разработчика (Ctrl + Shift + I Key) я буду видеть дубликаты js файлов.

Пожалуйста, помогите мне в этом: я не хочу, чтобы внешние файлы js на странице индекса были отключены, потому что когда они отключены, это заставит меня включить js хранит его в only_load_chat. php, так как это приведет к очень медленной загрузке веб-сайта.

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...