Bootstrap 4 ajax 成功消息快速闪烁答案

【问题标题】：Bootstrap 4 ajax success message quickly flashes byBootstrap 4 ajax 成功消息快速闪烁
【发布时间】：2018-10-19 04:20:38
【问题描述】：

我正在使用 Bootstrap 4 并且有一个表单模式。提交表单后，我的成功消息会显示片刻然后消失。数据成功插入我的数据库并成功显示弹出警报框。我可以使用它而不必担心 DIV 中的消息，但我想学习如何正确地做到这一点。以下是我的代码以及我尝试过的一些注释：

Javascript

    <script>
            $("button#submit").click(function() {

                $.ajax({
                    type: "POST",
                    url: "insert.php",
                    data: $('form.feedback').serialize(),

                   success: function(data) {
    alert(data);
    $("#feedback").html(data);
    setTimeout(function() {
        $("#feedback").addClass('hide');
        $('.close').trigger('click');// NOTICE THIS CHANGE HERE.
    }, 5000);
},

                    error: function() {
                        alert("Error");
                    }
                });
                return false; 
            });
    </script>

这是显示消息的 DIV：

<div id="feedback">
     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data- 
     target="#feedback-modal">Setup Your Course</button>
</div>

模态 HTML

<div id="feedback-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>Setup Your Course</h3>
            </div>
            <div class="modal-body">
                <form class="feedback" name="feedback">
                    <div class="row">
                        <div class="col-md-4">
                            <label>Department</label>
                            <input type="text" name="Department" id="Department" class="form-control" />
                            <br/>
                            <label>Course Number</label>
                            <input type="text" name="CourseNumber" id="CourseNumber" class="form-control" />
                            <br/>
                            <label>Course Name</label>
                            <input type="text" name="CourseName" id="CourseName" class="form-control" />
                            <br/>

                        </div>
                        <div class="col-md-4">

                            <label>Section Number</label>
                            <input type="text" name="SectionNumber" id="SectionNumber" class="form-control" />
                            <br/>

                            <label>Faculty</label>
                            <input type="text" name="Faculty" id="Faculty" class="form-control" />
                            <br/>
                            <label>Semester</label>
                            <input type="text" name="Semester" id="Semester" class="form-control" />
                            <br/>
                        </div>
                        <div class="col-md-4">

                            <label>Year</label>
                            <input type="text" name="Year" id="Year" class="form-control" />
                            <br/>
                            <label>Semester Start</label>
                            <input type="text" name="Startsemester" id="Startsemester" class="form-control" />
                            <br/>
                            <label>Semester End</label>
                            <input type="text" name="Endsemester" id="Startsemester" class="form-control" />
                            <br/>
                        </div>
                    </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" name="user_id" id="user_id" />
                <input type="hidden" name="operation" id="operation" />

                <!--<input type="submit" name="action" id="submit" class="btn btn-primary" value="Add"/> -->
                <button class="btn btn-primary" id="submit">Send</button>


                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

完整的 HTML 代码：

<?php
//if a session does not yet exist for this user, start one
session_start();
include_once( '../admin/body.php' );
include_once( '../config.php' );
include_once( '../functions.php' );


BodyHeader( "Course Setup", '', '' );
?>
<link href="../adminpanel/css/helper.css" rel="stylesheet">
<link href="../adminpanel/css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:** -->
<!--[if lt IE 9]>
    <script src="https:**oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https:**oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
    .modal-lg {
        max-width: 80% !important;
    }
</style>
<!-- Container fluid  -->
<div id="feedback"><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#feedback-modal">Setup Your Course</button>
</div>

<div class="container-fluid">
    <h1 class="h3 mb-3 font-weight-normal">Course Setup</h1>

    <!-- Start Page Content -->
    <div class="row">
        <div class=".col-xl-
">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-subtitle">Input the basic information for your course(s).</h3>
                    <div align="right">
                        <button type="button" id="add_button" data-toggle="modal" data-target="#feedback-modal" class="btn btn-info btn-lg">Add</button>
                    </div>


                    <div class="table-responsive m-t-40">
                        <table id="example23" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>Dept</th>
                                    <th>Course #</th>
                                    <th>Course Name</th>
                                    <th>Section #</th>
                                    <th>Faculty</th>
                                    <th>Semester</th>
                                    <th>Year</th>
                                    <th>Semester Start</th>
                                    <th>Semester End</th>


                                    <th>Edit</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>Dept</th>
                                    <th>Course #</th>
                                    <th>Course Name</th>
                                    <th>Section #</th>
                                    <th>Faculty</th>
                                    <th>Semester</th>
                                    <th>Year</th>
                                    <th>Semester Start</th>
                                    <th>Semester End</th>


                                    <th>Edit</th>
                                    <th>Delete</th>
                                </tr>
                            </tfoot>
                            <tbody>

                                <?php
                                $stmt = $connection->prepare( "
    SELECT CourseID, Department, CourseNumber, CourseName, SectionNumber, Faculty, Semester, Year, Startsemester, Endsemester FROM Courses
" );

                                $stmt->execute();
                                $result = $stmt->get_result();
                                //if ($result->num_rows === 0) exit('No rows');

                                while ( $row = $result->fetch_assoc() ) {
                                    $CourseID = $row[ 'CourseID' ];
                                    $Department = $row[ 'Department' ];
                                    $CourseNumber = $row[ 'CourseNumber' ];
                                    $CourseName = $row[ 'CourseName' ];
                                    $SectionNumber = $row[ 'SectionNumber' ];
                                    $Faculty = $row[ 'Faculty' ];
                                    $Semester = $row[ 'Semester' ];
                                    $Year = $row[ 'Year' ];
                                    $Startsemester = $row[ 'Startsemester' ];
                                    $Endsemester = $row[ 'Endsemester' ];

                                    ?>

                                <tr>
                                    <td>
                                        <?php echo "$Department"; ?>
                                    </td>
                                    <td>
                                        <?php echo "$CourseNumber"; ?>
                                    </td>
                                    <td>
                                        <?php echo "$CourseName"; ?>
                                    </td>
                                    <td>
                                        <?php echo "$SectionNumber"; ?>
                                    </td>
                                    <td>
                                        <?php echo "$Faculty"; ?>
                                    </td>
                                    <td>
                                        <?php echo "$Semester"; ?>
                                    </td>
                                    <td>
                                        <?php echo "$Year"; ?>
                                    </td>
                                    <td>
                                        <?php echo "$Startsemester"; ?>
                                    </td>
                                    <td>
                                        <?php echo "$Endsemester"; ?>
                                    </td>
                                    <td><button type="button" class="btn btn-outline-info">Edit</button>
                                    </td>
                                    <td><button type="button" class="btn btn-outline-danger">Delete</button>
                                    </td>

                                </tr>


                                <?php
                                //////////
                                }
                                ?>

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>

            <!-- End PAge Content -->
        </div>
        <!-- End Container fluid  -->





        <p>&nbsp;</p>
        <div align="center" class="medium">Back to <a href="index.php?<?php echo htmlspecialchars(SID); ?>">Dashboard</a>
        </div>
        <p>&nbsp;</p>
        <!-- All Jquery -->
        <script src="../adminpanel/js/lib/jquery/jquery.min.js"></script>
        <!-- Bootstrap tether Core JavaScript -->
        <script src="../adminpanel/js/lib/bootstrap/js/popper.min.js"></script>
        <script src="../adminpanel/js/lib/bootstrap/js/bootstrap.min.js"></script>
        <!-- slimscrollbar scrollbar JavaScript -->
        <script src="../adminpanel/js/jquery.slimscroll.js"></script>
        <!--Menu sidebar -->
        <script src="../adminpanel/js/sidebarmenu.js"></script>
        <!--stickey kit -->
        <script src="../adminpanel/js/lib/sticky-kit-master/dist/sticky-kit.min.js"></script>
        <!--Custom JavaScript -->
        <script src="../adminpanel/js/custom.min.js"></script>




        <div id="feedback-modal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <a class="close" data-dismiss="modal">×</a>
                        <h3>Setup Your Course</h3>
                    </div>
                    <div class="modal-body">
                        <form class="feedback" name="feedback">
                            <div class="row">
                                <div class="col-md-4">
                                    <label>Department</label>
                                    <input type="text" name="Department" id="Department" class="form-control"/>
                                    <br/>
                                    <label>Course Number</label>
                                    <input type="text" name="CourseNumber" id="CourseNumber" class="form-control"/>
                                    <br/>
                                    <label>Course Name</label>
                                    <input type="text" name="CourseName" id="CourseName" class="form-control"/>
                                    <br/>

                                </div>
                                <div class="col-md-4">

                                    <label>Section Number</label>
                                    <input type="text" name="SectionNumber" id="SectionNumber" class="form-control"/>
                                    <br/>

                                    <label>Faculty</label>
                                    <input type="text" name="Faculty" id="Faculty" class="form-control"/>
                                    <br/>
                                    <label>Semester</label>
                                    <input type="text" name="Semester" id="Semester" class="form-control"/>
                                    <br/>
                                </div>
                                <div class="col-md-4">

                                    <label>Year</label>
                                    <input type="text" name="Year" id="Year" class="form-control"/>
                                    <br/>
                                    <label>Semester Start</label>
                                    <input type="text" name="Startsemester" id="Startsemester" class="form-control"/>
                                    <br/>
                                    <label>Semester End</label>
                                    <input type="text" name="Endsemester" id="Startsemester" class="form-control"/>
                                    <br/>
                                </div>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="user_id" id="user_id"/>
                        <input type="hidden" name="operation" id="operation"/>

                        <!--<input type="submit" name="action" id="submit" class="btn btn-primary" value="Add"/> -->
                        <button class="btn btn-primary" id="submit" onclick="return false;">Send</button>


                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
                </form>
            </div>
        </div>



        <script>
            $( "button#submit" ).click( function () {

                $.ajax( {
                    type: "POST",
                    url: "insert.php",
                    data: $( 'form.feedback' ).serialize(),

                    success: function ( data ) {
                        alert( data );
                        $( "#feedback" ).html( data );
                        setTimeout( function () {
                            $( "#feedback" ).addClass( 'hide' );
                            $( '.close' ).trigger( 'click' ); // NOTICE THIS CHANGE HERE.
                        }, 5000 );
                    },

                    error: function () {
                        alert( "Error" );
                    }
                } );
                return false;
            } );
        </script>


        <?php
    BodyFooter();

提前致谢，

提姆

【问题讨论】：

这不应该是一个id而不是一个类吗？ $(".feedback").addClass('hide');
是的@DarrenSweeney，你是对的。我在下面的答案中改变了这一点，我也做了另一项改变。等待蒂姆尝试并告诉我们进展如何。
@DarrenSweeney - 谢谢
#feedback div 将如何链接到模态框？

标签： jquery ajax bootstrap-4 bootstrap-modal

【解决方案1】：

试试这个方法：注意：这只是 success 代码的一部分。

您可以尝试在此处将 jquery 选择器从 class 更改为 ID：

success: function(data) {
    alert(data);
    $("#feedback").html(data);
    setTimeout(function() {
        $("#feedback").addClass('hide');
        // Added three lines below:
        $('#feedback-modal').modal('hide');
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
    }, 5000);
},

这似乎是第一个问题。

试试这个，如果它有效，我会告诉你为什么它不适合你所做的。

【讨论】：

感谢您的代码！ 2个问题。 1. modal不隐藏 2. 关闭modal后，整个页面还是淡出。有什么想法吗？
我在原始帖子的底部发布了模态 html
显示成功消息但模态框没有关闭。当我手动关闭它时，页面仍然淡出。
我已经屏蔽了该行，但如果我启用它，它将显示一条成功消息。
太棒了！谢谢你。终于成功了！问题 - 如果我要删除警报并在单击提交按钮时隐藏模式并在主页上显示消息，那会是什么样子？我删除了 setTimeout 函数，但没有显示成功消息。我对现在的情况很满意，只是要求尝试通过示例了解更多信息。我真的很感谢你的帮助！！！

【解决方案2】：

尝试在button#submit点击回调函数的末尾添加return false;。我认为您的页面在提交后正在重新加载。

$("button#submit").click(function() {

            $.ajax({
                type: "POST",
                url: "insert.php",
                data: $('form.feedback').serialize(),

                success: function(data) {
                    alert(data);
                    $("#feedback").html(data);
                    setTimeout(function() {
                        $("#feedback").addClass('hide');
                        $('#feedback-modal').modal('hide'); // Took this line here rather than calling it out.
                    }, 5000);
                },

                error: function() {
                    alert("Error");
                }
            });
            return false; 
        });

【讨论】：

我是这样添加的：虽然它没有似乎有所作为。
你没有一个名为 jsfunction() 的函数对，那它对你的代码有什么不同。
我不确定如何添加它，我显然误解了如何添加返回 false。我把它改成了：对吗？