When I submit my form and there is a error the bootstrap modal that I use still keeps on closing.
How am I able to make it stop closing when codeigniter form validation messages show up. I use ajax to process the form.
Code:
<script type="text/javascript">
$(function(){
$("#save").click(function(e){
e.preventDefault();
$.ajax({
url: <?php echo site_url('dashboard/calendar');?>,
type: 'POST',
data: $("#MyForm").serialize(),
success: function(){
},
error: function(){
}
});
});
});
</script>
View
Code:
<div class="panel panel-default">
<div class="panel-heading">
<div class="clearfix">
<div class="pull-left">
<h1 class="panel-title">Calendar</h1>
</div>
<div class="pull-right">
<button data-toggle="modal" data-target="#myModal" class="btn btn-success">Add New Event</button>
</div>
</div>
</div>
<div class="panel-body">
<?php if ($this->session->flashdata('added_event')) {?>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<?php echo $this->session->flashdata('added_event');?>
</div>
<?php }?>
<?php if ($this->session->flashdata('removed_event')) {?>
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<?php echo $this->session->flashdata('removed_event');?>
</div>
<?php }?>
<?php echo $calendar;?>
</div>
<div class="panel-footer">
<div class="text-right"><a href="<?php echo $view_more;?>">View More..</a></div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<form method="post" id="MyForm" name="MyForm">
<!--<?php echo form_open('dashboard/calendar', array('id' => 'form-calendar'));?>-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Calendar Event</h4>
</div>
<div class="modal-body">
<?php echo validation_errors(); ?>
<div class="form-group">
<select name="year" class="form-control">
<?php
$cur_year = date('Y');
for($year = ($cur_year-10); $year <= ($cur_year+10); $year++) {
if ($year == $cur_year) {
echo '<option value="'.$year.'" selected="selected">'.$year.'</option>';
} else {
echo '<option value="'.$year.'">'.$year.'</option>';
}
}
?>
<select>
</div>
<div class="form-group">
<select name="month" class="form-control" id="month">
<?php
$monthName = array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
for ($i=0; $i < count($monthName); $i++) {
$mn = 1 + $i;
if($mn == date('m')) {
echo '<option selected value=' . $mn . '>' . $monthName[$i] . '</option>';
} else {
echo '<option value=' . $mn . '>' . $monthName[$i] . '</option>';
}
}
?>
</select>
</div>
<div class="form-group">
<select name="day" class="form-control"></select>
</div>
<div class="form-group">
<textarea name="event" id="event" rows="5" class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" name="save" id="save" class="btn btn-primary" value="Save" />
</div>
</div>
<?php echo form_close();?>
</div>
</div>
<script type="text/javascript">
$('select[name="month"]').on("change", function()
{
var year = $('select[name="year"]').val();
if (year > 0)
{
$('select[name="day"]').find("option").remove();
var daysInMonth = new Date(year, $(this).val(), 0).getDate();
for(var i=1; i<=daysInMonth;i++)
{
console.log(i);
$('select[name="day"]').append($("<option></option>").attr("value",i).text(i));
}
}
});
$('select[name="month"]').trigger('change');
</script>
<script type="text/javascript">
$(function(){
$("#save").click(function(e){
e.preventDefault();
$.ajax({
url: <?php echo site_url('dashboard/calendar');?>,
type: 'POST',
data: $("#MyForm").serialize(),
success: function(){
},
error: function(){
}
});
});
});
</script>
There's only one rule - please don't tell anyone to go and read the manual. Sometimes the manual just SUCKS!