Welcome Guest, Not a member yet? Register   Sign In
Bootstrap TagsInput with Code Igniter
#1

Hello guys, i am trying to implement jQuery ui autocomplete in code Igniter with database in that when a user inputs a letter like c, all the suggestions with letter C from the database appear that is, the name and the number, My code does not seem to work and especially my script. Please help, here is my view, controller and model:
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">

<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/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">&times;</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>
Code:
    <?php defined( 'BASEPATH' ) OR die('No direct script access allowed!');

    class tags extends CI_Controller {
        function __construct() {
          parent::__construct();
            $this->load->database(); // load database
            $this->load->model('tags_model');

        }
     function get_tags(){
         $this -> db -> select('firstname');
        $this -> db -> from('contactdetails');
        $query = $this -> db ->get();
     $this->tags_model->get_tag($q);
   }
 }

    }

    /* End of file sms.php */
Code:
<?php defined( 'BASEPATH' ) OR die('No direct script access allowed!');

class tags_model extends CI_Model {
    function __construct() {
       // Call the Model constructor
        parent::__construct();
    }

     function get_tag($q){
          $this->db->select('firstname');
            $this->db->like('firstname', $q);
            $query = $this->db->get('contactdetails');
            if($query->num_rows() > 0){
              foreach ($query->result_array() as $row){
                $row_set[] = htmlentities(stripslashes($row['firstname'])); //build an array
          }
          echo json_encode($row_set); //format the array into json data
        }
     }

}

/* End of file sms.php */
Reply




Theme © iAndrew 2016 - Forum software by © MyBB