Question

Я использую 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();

Заранее спасибо,

Тим

Hrishikesh · Answer 1 · 09 мая 2018

Попробуйте добавить return false; в конце функции обратного вызова button#submit click. Я думаю, что ваша страница перезагружается после отправки.

$("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; 
        });

Himanshu Upadhyay · Answer 2 · 09 мая 2018

Попробуйте следующим образом: ПРИМЕЧАНИЕ. Это только success часть вашего кода.

Вы можете попробовать изменить селектор jquery с класса на 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);
},

Это кажется самой первой проблемой.

Попробуйте, и если это сработает, я скажу вам, почему это не сработало с тем, что вы сделали.

Bootstrap 4 Ajax сообщение об успехе быстро мигает

Javascript

Модальный HTML

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Bootstrap 4 Ajax сообщение об успехе быстро мигает

Javascript

Модальный HTML

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы