Question

我的申请是留言板。当我点击ans_button时，会出现一个带有问题文本区域的div。当我提交问题时，消息div再次被隐藏。如果单击remove_button，将从收件箱中删除该特定邮件，并仍显示其余邮件。但是，只要我单击第二个rmeove_button，就会出现消息div，它应该保持隐藏状态。最后，如果我刷新页面，我可以再次单击删除一次，但第二次破坏代码。

我已将代码包含在代码中，我认为问题已包含在内。但是，如果需要，我可以上传更多代码。关于我的代码陷入困境的任何建议都将不胜感激。感谢。

这是我的代码：

HTML：

<div class="content" id="messageView">
    <!--This content is pulled from a php file-->
        <!--.ans_button and .remove_button are echoed from php-->
</div><!--content#messageView-->
<div class="content" id="message">
    Subject:<input id="subject" type="text"><br><br>
    Question:<textarea id="question"></textarea><br><br>
    <input class="submitbutton" id="cancelQ" type="button" value="Cancel" >
    <input class="submitbutton" id="askQ" type="button" value="Respond" >       
</div><!--content#message-->

PHP：

$findMsg = mysqli_query($con,"SELECT * 
            FROM MessageAdmin m, Admin a, User u
            WHERE (SELECT deptID FROM Admin a WHERE a.deptID = m.programID)
            AND (SELECT o.threadID FROM OpenMessages o WHERE o.threadID = m.threadID
            AND o.isClosed = 0 AND (o.answeredBy = 0 OR o.answeredBy = '$curUser')
            AND (u.userID = o.userID) AND (m.userID = o.userID)) ORDER BY m.timeSent");
        if(mysqli_num_rows($findMsg) > 0){
            echo "<table id='viewMsg'>";
            while($row = mysqli_fetch_array($findMsg)){
                echo "<tr>";
                echo "<td>" .$row['firstName']." ".$row['lastName']."</td>";
                echo "<td>" .$row['subject']."</td>";
                echo "<td><button class='ans_button' 
                    value='".$row['threadID'].'*'.$row['subject'].'*'.$row['programID']."'>Respond</button></td>";
                echo "<td><button class='remove_button' 
                    value='".$row['threadID'].'*'.$row['timeSent']."'>Delete</button></td>";
                echo "</tr>";       
            }
            echo "</table>";
        }
        else
            echo "<h3>You currently have no messages</h3>";

jQuery：

$(function(){   
    $("#message").hide();
    var request1 = $.ajax({ //fill content of #messageView
        ...
    }).success(function(data){
        $("#messageView").html(data);
    });

    $('.content').on('click', '.ans_button', function(){
        var clicked = $(this);
        var parts = clicked.val().split("*");
        var thread = parts[0];
        var subject = parts[1];
        var program = parts[2];
        $("#subject").val(subject);

        $("#askQ").on('click', function(){                      
            var question = $("#question").val();
            var request2 = $.ajax({
                ...
            }).success(function(data){
                if(data == "success"){
                    $("#message").hide();
                    $("#question").val("");
                }
            });
        });
    });

    $('.content').on('click', '.remove_button', function(){
        var clicked = $(this);
        var parts = clicked.val().split("*");
        var thread = parts[0];
        var time = parts[1];
        var request3 = $.ajax({
            ...
        }).success(function(data){
            if(data == "success"){
                $("#message").hide();   
                $("html").load("messages.php");
               $("#messageView").show();                    
            }       
        });
    });
}); //end of document.ready

Answer 1

编辑：这里有很多“错误”，哥们。

首先，您在点击功能中有一个点击功能。我已经修好了。

您也不应该将.messages.php加载到html标记。删除messages.php中的正文标记，然后将加载（即.load()）应用到容器选择器（根据我们的私聊和下面的代码）。

要在单击按钮时阻止页面刷新（这会破坏使用ajax的目的），您需要阻止按钮的默认行为并使用return false来阻止页面刷新。

此外，你将ajax调用作为变量（在任何地方都不被调用。即使它们是，它也很邋。）。这也不正确。我已经解决了这个问题。

最后，我添加了代码，以防止在单击按钮时多次点击/提交。基本上我所做的就是在点击按钮后禁用按钮，并在ajax成功通话中重新启用它。

$(function(){ 

    $("#message").hide();

    $.ajax({ //fill content of #messageView
        ...
    }).success(function(data){
        $("#messageView").html(data);
    });

    $('.ans_button').on('click', function() {
        var parts = $(this).val().split("*");
        var thread = parts[0];
        var subject = parts[1];
        var program = parts[2];
        $("#subject").val(subject);        

        return false;
    });

    $('#askQ').on('click', function() { 

        // disable button on click
        $(this).attr("disabled", "disabled");

        var question = $("#question").val();
        $.ajax({ 
            ...
        }).success(function(data){
            if(data == "success"){
                $("#message").hide();
                $("#question").val(""); // why is this empty? Try using .reset() instead if you want to empty field

                // enable and remove disable attr
                $(this).removeAttr("disabled", "disabled");
            }
        });

        return false; 
    });

    $('.remove_button').on('click', function() {

        // disable button on click
        $(this).attr("disabled", "disabled");

        var clicked = $(this);
        var parts = clicked.val().split("*");
        var thread = parts[0];
        var time = parts[1];
        $.ajax({
            ...
        }).success(function(data){
            if(data == "success"){
                $("#message").hide(); 

                $(".container").load("messages.php");

                $("#messageView").show();  

                // enable and remove disable attr
                $(this).removeAttr("disabled", "disabled");                  
            }       
        });

        return false;
    });
});

由jQuery hide（）隐藏的div不断重现

1 个答案: