Modal doesn't close after submit, location.replace is still in modal?

Question

I am having difficulties in trying to close the modal after form submit, anyway, I am using https://github.com/Serhioromano/bootstrap-calendar I already used location.replace, but it is still opened in the modal, anyway this is my code on 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));

in my events.json.php is where i get all the data and pass to 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 }; ?>

and the modal:

 <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>

already tried this but no luck:

     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>

Could you replicate the same on jsfiddle, http://jsfiddle.net — dreamweiver, Oct 04 '15 at 14:05
That's easy you need to dump your HTML code along with js code into respective locations within jsfiddle. Refer this more info http://doc.jsfiddle.net/tutorial.html — dreamweiver, Oct 04 '15 at 14:23

score 0 · Answer 1 · edited May 23 '17 at 12:06

A few things I see here.

1 - You have an error in your HTML, you might want to change the data- dismiss="modal" to data-dismiss="modal" (No space between data- and dismiss.

2 - Also you're trying to catch the click event on input[type="submit"], you don't have any submits, you have type="button"

A possible solution is to submit the form on button click, and handle the form submit separately.

Please refer to the bootstrap modal docs and this answer, they might be helpful.

Good luck.

Modal doesn't close after submit, location.replace is still in modal?

1 Answers1