2015-10-04 111 views
0

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

(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

是从哪里获得的所有数据,并传递给模态:

<?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> 
+0

你可以在jsfiddle上复制相同的,http://jsfiddle.net – dreamweiver

+0

对不起,但我是一个新手,我不知道如何 –

+0

这很容易,你需要将你的HTML代码和js代码一起转储到jsfiddle中的相应位置。参考这个更多信息http://doc.jsfiddle.net/tutorial.html – dreamweiver

回答

0

我在这里看到的一些东西。

1 - 你在你的HTML错误,你可能要改变data- dismiss="modal"data-dismiss="modal"data-dismiss之间没有空间

2 - 还你试图抓住click事件上input[type="submit"],你没有任何屈服了,你有type="button"

一个可能的解决方案是提交按钮,单击窗体,并办理形式分别提交。

请参阅引导modal docs和这answer,他们可能会有所帮助。

祝你好运。