Monday 13 October 2014

send data using ajax in codeigniter-jquery ajax


Hey everyone,

Here is quick tutorial for ajax in codeignitor.

First create a form in your view folder.
<form id="create_campaign" method="post" action="">                                                          
                                                            <div class="form-group">
                                                                <span class="input-icon icon-right">
                                                                    <input type="text" placeholder="Campaign Name" autocomplete="off" name="campaignname" required id="campaignname" class="form-control">
                                                                    <i class="glyphicon glyphicon-retweet"></i>
                                                                </span>
                                                            </div>
<div class="form-title">
                                                                Upload Message File<span id="youseletedaudio" style="float:right;"></span>
                                                            </div>
                                                           

<div class="form-group" style="text-align:center;">
<span class="input-icon icon-right">                                                                  
                                                                    <a class="btn btn-sky shiny" onClick="showdetails('<?php echo $id; ?>');" href="javascript:void(0);">Choose from sound library</a>
                                                                </span>
</div>
                                                           
<div class="form-title">
                                                                Upload Base<span id="youseleted" style="float:right;"></span>
                                                            </div>

<div class="form-group" style="text-align:center;">
<span class="input-icon icon-right">                                                                  
                                                                    <a class="btn btn-sky shiny" onClick="showgroup('<?php echo $id; ?>')" href="javascript:void(0);">Choose from address book</a>
                                                                </span>
</div>
                                                           
                                                            <!-----
                                                            <div class="form-title">
   Call Type
</div>
<div class="control-group">
                                                                <div class="radio">
                                                                    <label>
                                                                    <input type="radio" name="calltype" checked="checked" value="Trans" name="form-field-radio">
                                                                    <span class="text">Transactional</span>
                                                                    </label>
                                                                </div>
                                                                <div class="radio">
                                                                    <label>
                                                                    <input type="radio" name="calltype" class="checked" value="Promo" name="form-field-radio">
                                                                    <span class="text">Promotional</span>
                                                                    </label>
                                                                </div>
                                                            </div>
----->
                                                           
                                                            <div class="form-group">
                                                           
<div class="form-title">
   Campaign Start Time
</div>
<div class="col-lg-6 col-sm-6">
<div class="input-group">
                                                            <input class="form-control date-picker" autocomplete="off" required name="campstartdate" id="id-date-picker-1" type="text" data-date-format="dd-mm-yyyy">
                                                            <span class="input-group-addon">
                                                            <i class="fa fa-calendar"></i>
                                                            </span>
                                                            </div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="input-group">
<input class="form-control" id="timepicker1" autocomplete="off" required name="campstarttime" type="text">
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
                                                           
                                                            </div>
                         
                                                            <div class="form-group">
                                                            <div class="form-title">
   Campaign End Time
</div>
<div class="col-lg-6 col-sm-6">
<div class="input-group">
                                                            <input class="form-control date-picker2" autocomplete="off" required id="id-date-picker-2" name="campenddate" type="text" data-date-format="dd-mm-yyyy">
                                                            <span class="input-group-addon">
                                                            <i class="fa fa-calendar"></i>
                                                            </span>
                                                            </div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="input-group">
<input class="form-control" id="timepicker2" autocomplete="off" required name="campendtime" type="text">
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
                                                        </div>  

<input type="hidden" value="<?php echo $id; ?>" id="userid" name="userid">                                                   <input type="hidden" value="<?php echo $parent_id; ?>" id="parentid" name="parentid">
                                                           
                                                           
                                                           
                                                            <div class="form-group" style="text-align:center;margin-top: 85px;">
                                                           
                                                            <span class="input-icon icon-right">                                                                  
                                                                    <button class="btn btn-blue btn-lg shiny" type="submit">Submit</button>
                                                                </span>
                                                           
                                                            </div>
                                                           
                                                                                                                       
                                                           
                                                        </form>





Than below that page add this script.


<script>
// JavaScript Document
    $(document).ready(function(){
    $('#create_campaign').submit(function(e) {

//alert("hello");

//campaign name

    var campaignname = $('#campaignname').val();

// campaign name


//Most important

var audiotrack = $('#sound').val();
var groupname = $('#group').val();

//Most important

//Time travel

    var startdate = $('#id-date-picker-1').val();
var starttime = $('#timepicker1').val();

var enddate = $('#id-date-picker-2').val();
var endtime = $('#timepicker2').val();

//Time Travel

var userid = $('#userid').val();
var parentid = $('#parentid').val();



   
    var editpostData = {
    'campaignname' : campaignname,
    'audiotrack' : audiotrack,
'groupname' : groupname,
'startdate' : startdate,
'starttime' : starttime,
'enddate' : enddate,
'endtime' : endtime,
'userid' : userid,
'parentid' : parentid
    };
   
//alert(editpostData);


    var data1 = JSON.stringify(editpostData);
   
    e.preventDefault();
   
    $.ajax({
    type: "POST",
    data: {value1:data1},
    url: "<?php echo base_url(); ?>campaign/addcampaign",
    success: function() {
   
    alert("Campaign Created sucessfully") ;

    window.location = "<?php echo base_url(); ?>campaign/viewcampaign";
   
    }
    });
    });
    });

</script>






In your controller.add this to get data.

function addcampaign()
{

$dataString1 = $_POST['value1'];

        $json1 = json_decode($dataString1, true);

$game_date = $json1['startdate'];
$game_time = $json1['starttime'];
$game_date1 = $json1['enddate'];
$game_time1 = $json1['endtime'];


$combined_date_and_time = $game_date . ' ' . $game_time;
$combined_date_and_time1 = $game_date1 . ' ' . $game_time1;


$dt = strtotime($combined_date_and_time);

$dt1 = strtotime($combined_date_and_time1);

$st_date= date("Y-m-d H:i:s", $dt);

$en_date= date("Y-m-d H:i:s", $dt1);

$campaignid=random_string('alnum', 16);

$session_data = $this->session->userdata('logged_in');

$channels=$session_data['channels'];

$this->files_model->insert_campaign($json1['campaignname'],$json1['audiotrack'],$json1['groupname'],$st_date,$en_date,$json1['userid'],$json1['parent_id'],$campaignid,$channels);  

//calling model above
 


}


Than in your model.

public function insert_campaign($campaignname,$audiotrack,$groupname,$startdate,$enddate,$userid,$parentid,$campaignid,$channels)
    {  
         
        $data = array(
   'user_id'  => $userid,
'parent_id'=> $parentid,
   'campaign_name'  => $campaignname,
'campaign_type' => 'PlayFile',
            'campaign_id'  => $campaignid,
'prompt_file_id'  => $audiotrack,
'group_id'  => $groupname,
'call_type'  => 'Promo',
'channel'  => $channels,
'start_time'  => $startdate,
'end_time'  => $enddate,
'curr_status'  => 'Active'          
        );

        $this->db->insert('obd_campaign', $data);
        return $this->db->insert_id();
    }



Here i have inserted two files together into database.One csv and one mp3 file.


That's it.

If you have any question.please mention in comment.

Thanks