• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Solved] Stop boostrap modal from closing if form validtion false.

#1
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">&times;</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">&times;</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">&times;</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>


Attached Files
.php   calender_view.php (Size: 4.42 KB / Downloads: 272)
There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!
Reply

#2
I have had to use json now for event posting and have got it working for what I need

PHP Code:
<script type="text/javascript">
$(
document).ready(function() {
$(
'#submit').on('click', function(e) {

    
e.preventDefault();

    $.
ajax({
        
        
url'dashboard/calendar_modal/add_new_event',
        
type'post',
        
dataType'json',
        
data: new FormData($('#form-calendar')[0]),
        
cachefalse,
        
contentTypefalse,
        
processDatafalse,
        
        
beforeSend: function() {
            $(
'#button-upload i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
            $(
'#button-upload').prop('disabled'true);
        },

        
complete: function() {
            $(
'#button-upload i').replaceWith('<i class="fa fa-upload"></i>');
            $(
'#button-upload').prop('disabled'false);
        },
        
        
success: function(json) {
            if (
json['error']) {

                
alert(json['error']);
            }

            if (
json['success']) {

                
alert(json['success']);

                $(
"#modal-calendar").modal('hide');

                
window.location.reload(true);

            }
        },
            
        
error: function(xhrajaxOptionsthrownError) {
            
alert(thrownError "\r\n" xhr.statusText "\r\n" xhr.responseText);
        }

    });

});
});
</
script
There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!
Reply


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.