Question

我在表单提交后尝试关闭模式时遇到困难，无论如何，我正在使用https://github.com/Serhioromano/bootstrap-calendar我已经使用过location.replace，但它仍然在模态中打开，无论如何这是我在app上的代码的.js：

(function($) {

"use strict";

var options = {
    events_source: 'events.json.php',
    view: 'month',
    tmpl_path: 'tmpls/',
    tmpl_cache: false,
     modal: '#events-modal',
    onAfterEventsLoad: function(events) {
        if(!events) {
            return;
        }
        var list = $('#eventlist');
        list.html('');

        $.each(events, function(key, val) {
            $(document.createElement('li'))
                .html('<a href="' + val.url + '">' + val.title + '</a>')
                .appendTo(list);
        });
    },
    onAfterViewLoad: function(view) {
        $('.page-header h3').text(this.getTitle());
        $('.btn-group button').removeClass('active');
        $('button[data-calendar-view="' + view +  '"]').addClass('active');
    },
    classes: {
        months: {
            general: 'label'
        }
    }
};

var calendar = $('#calendar').calendar(options);

$('.btn-group button[data-calendar-nav]').each(function() {
    var $this = $(this);
    $this.click(function() {
        calendar.navigate($this.data('calendar-nav'));
    });
});

$('.btn-group button[data-calendar-view]').each(function() {
    var $this = $(this);
    $this.click(function() {
        calendar.view($this.data('calendar-view'));
    });
});

$('#first_day').change(function(){
    var value = $(this).val();
    value = value.length ? parseInt(value) : null;
    calendar.setOptions({first_day: value});
    calendar.view();
});

$('#language').change(function(){
    calendar.setLanguage($(this).val());
    calendar.view();
});

$('#events-in-modal').change(function(){
    var val = $(this).is(':checked') ? $(this).val() : null;
    calendar.setOptions({modal: val});
});
$('#format-12-hours').change(function(){
    var val = $(this).is(':checked') ? true : false;
    calendar.setOptions({format12: val});
    calendar.view();
});
$('#show_wbn').change(function(){
    var val = $(this).is(':checked') ? true : false;
    calendar.setOptions({display_week_numbers: val});
    calendar.view();
});
$('#show_wb').change(function(){
    var val = $(this).is(':checked') ? true : false;
    calendar.setOptions({weekbox: val});
    calendar.view();
});
$('#events-modal .modal-header, #events-modal .modal-   footer').click(function(e){
    //e.preventDefault();
    //e.stopPropagation();
});
}(jQuery));

在我的events.json.php中，我获取所有数据并传递给modal：

<?php include('connect.php'); ?>
{
"success": 1,
"result": [
        <?php
        $event_query = mysql_query("SELECT * FROM appointment,user,service where user.user_id = appointment.user_id and service.service_id = appointment.service_id  and appointment.appointment_id != (SELECT MAX(appointment.appointment_id) FROM appointment) and appointment.appoint_status='Pending'")or die(mysql_error());
          while($event_row = mysql_fetch_array($event_query)){
          $date = $event_row['appoint_date'];
          $date2 = $event_row['end'];
          $appid = $event_row['appointment_id'];
          ?>
    {
        "id": "<?php echo $appid; ?>",
        "title": "<?php echo $event_row['firstname'].' '.$event_row['lastname']; ?>",
        "url": "approve_appointment_modal.php?id=<?php echo $appid; ?>",
        "class": "event-success",
        "start": "<?php echo  $date; ?>",
        "end":   "<?php echo $date2; ?>"
    }, 
    <?php }; ?>

和模态：

 <div class="modal fade" id="events-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title">Approve Appointment</h3>
            </div>

            <div class="modal-body" style="height: 400px">

            </div>
            <div class="modal-footer">
            <a href="pending_appointments.php"  class="btn btn-primary  pull-left"><i class="fa fa-eye"> </i> View All Transactions</a>
                <button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
            </div>

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

已经尝试过但没有运气：

     echo "<script> alert('Success') </script>";
     echo "   <script>location.replace('approved_appointments.php')</script>";  

}
?>
    <script>
        $(modal).on("click", 'input[type="submit"]', (z)  ->
                        modal.modal('hide')
    </script>

Answer 1

我在这里看到的一些事情。

1 - 您的HTML中有错误，您可能希望将data- dismiss="modal"更改为data-dismiss="modal"（data-和dismiss之间没有空格。

2 - 您也试图抓住input[type="submit"]上的点击事件，您没有任何提交，您有type="button"

一种可能的解决方案是在点击按钮时提交表单，并单独处理表单提交。

请参阅bootstrap modal docs和此answer，它们可能会有所帮助。

祝你好运。

提交后模态没有关闭，location.replace仍处于模态状态？

1 个答案: