I actually solved this, this is the code in case anyone needs it
:
Code:
<link href="<?php echo base_url() ?>assets/css/bootstrap-timepicker.min.css" rel="stylesheet">
<link href="<?php echo base_url() ?>assets/css/datepicker3.css" rel="stylesheet">
<link href="<?php echo base_url() ?>assets/tagsinput/bootstrap-tagsinput.css" rel="stylesheet">
<link href="<?php echo base_url() ?>assets/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/bootstrap-timepicker.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/typeahead.js/bloodhound.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/typeahead.js/typeahead.bundle.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/typeahead.js/typeahead.jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/jquery-ui.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/tagsinput/bootstrap-tagsinput-angular.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/tagsinput/bootstrap-tagsinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-maxlength/1.7.0/bootstrap-maxlength.min.js"></script>
<button class="btn btn-primary btn-xs pull-right" data-toggle="modal" data-target="#myModal">
Send Message
</button>
<style type="text/css">
.modal-backdrop{z-index: 1200;}
.modal{z-index: 1201;}
.tt-dropdown-menu{z-index: 1203; border: solid 1px #CCC; margin-right: 0; margin-left: 0; background-color: #fff; border-color: #ddd; border-width: 1px; border-radius: 4px 4px 0 0; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; -webkit-box-shadow: none; box-shadow: none;}
.tt-suggestions{}
</style>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 9999;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Send Message</h4>
</div>
<div class="modal-body">
<form name="SendSMSForm" id="SendSMSForm" action="<?php echo site_url();?>/sms/sms_form" class="form-horizontal" role="form" method="post">
<div class="form-group">
<label class="col-sm-2 control-label">Sender</label>
<div class="col-sm-10">
<p class="form-control-static"><label class="label label-primary">Inclusion</label></p>
</div>
</div>
<div class="form-group">
<label for="receiver" class="col-sm-2 control-label">To</label>
<div class="col-sm-10">
<input class="form-control" id="receiver" type="text" placeholder="" name="receiver" >
<p class="help-block">
<small>
Enter name of person/group in address-book E.g John, Family, Workmates
</small>
</p>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" name="body" rows="3" id="body"></textarea>
<p>
<span id="remaining">160 characters remaining</span>
<span id="messages" name="">1 page(s)</span>
</p>
</div>
</div>
<a data-toggle="collapse" data-parent="#accordion" href="#SendSMSOptions">
<span class="glyphicon glyphicon-plus"></span> Options
</a>
<div id="SendSMSOptions" class="panel-collapse collapse in">
<div class="panel-body">
<div class="form-group">
<label for="Schedule" class="col-sm-2 control-label">Schedule Send</label>
<div class="col-sm-10">
<br />
<div class="input-group date">
<input data-provide="datepicker" name="datepicker" type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
<div class="input-group bootstrap-timepicker">
<input id="timepicker" data-template="modal" name="timepicker" type="text" class="form-control">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="SendSMS">Send Now</button>
</div>
</div>
</div>
</div>
<script>
//we are one
$(document).ready(function() {
$('.collapse').collapse();
$('#timepicker').timepicker({showMeridian: false, minuteStep: 15, defaultTime: 'current'});
$('.input-group.date').datepicker({
format: 'mm/dd/yyyy',
startDate: '-3d',
autoclose: true,
todayHighlight: true
});
$(document).ready(function(){
var $remaining = $('#remaining'),
$messages = $remaining.next();
$('#body').keyup(function(){
var chars = this.value.length,
messages = Math.ceil(chars / 160),
remaining = messages * 160 - (chars % (messages * 160) || messages * 160);
$remaining.text(remaining + ' characters remaining');
$messages.text(messages + ' page(s)');
});
});
$(document).ready(function() {
$("#SendSMS").click(function(event) {
event.preventDefault();
console.log($('#SendSMSForm').serializeArray())
jQuery.ajax({
type: "POST",
url: "<?php echo base_url('sms/sms_form') ?>",
dataType: 'html',
data: $('#SendSMSForm').serializeArray(),
success: function(data){
alert(data);
}
});
return false;
});
});
});
</script>
the controller looks like this:
Code:
<?php defined( 'BASEPATH' ) OR die('No direct script access allowed!');
class sms extends CI_Controller {
public function __construct() {
parent::__construct();
$this->config->load('facebook');
$this->load->library('form_validation');
$this->load->library('encrypt');
$this->load->model('countries');
$this->load->helper('text');
$this->load->model('sms_model');
}
public function index() {
}
public function sms_form(){
$sender = ('sender');
$body = $this->input->post('body');
$numberofpages = ceil(strlen($body)/160);//this is what you do to insert the page
$sendscheduletime = '';
if(isset($_POST['datepicker'])){
$sendscheduletime .= $_POST['datepicker'];
}
if(isset($_POST['timepicker'])){
$sendscheduletime .= ' ' .$_POST['timepicker'];
};
$route = $this->input->post('route');
$category = $this->input->post('category');
$recepientscount = $this->input->post('recepientscount');
$receiver = $this->input->post('receiver');
$sumcharge = $this->input->post('sumcharge');
$sentstatus = $this->input->post('sentstatus');
$sms_data = array(
'body' => $body,
'numberofpages' => $numberofpages,
'sender' => 'inclusion',
'sendscheduletime' => $sendscheduletime,
'route' => $route,
'category' => $category,
'recepientscount' => $recepientscount,
'receiver' => $receiver,
'sumcharge' => $sumcharge,
'sentstatus' => $sentstatus,
);
var_dump($sms_data);die;
$this->sms_model->insert($sms_data);
echo "Message Send Successfully....!!!!";
// $this->load->view('modal_send_sms'); // Reloading after submit.
// $this->redirect('outbox');
}
}
/* End of file sms.php */