article

Wednesday, August 7, 2013

Codeigniter Add, Edit, Delete, jquery ajax, jquery-ui

Codeigniter Add, Edit, Delete, jquery ajax, jquery-ui

Create Database Table
CREATE TABLE IF NOT EXISTS `daily` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `date` date NOT NULL,
  `name` varchar(64) NOT NULL,
  `amount` double NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

Create Controllerapplication\controllers\daily.php 
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Daily extends CI_Controller {
  public function __construct() {
        parent:: __construct();
        $this->load->helper("url");
        $this->load->model('MDaily');
  $this->load->helper('form');
    }
 
  public function index(){
    $data['query'] = $this->MDaily->getAll();
    $this->load->view('daily/input',$data);
  }
 
  public function submit(){
    if ($this->input->post('ajax')){
      if ($this->input->post('id')){
        $this->MDaily->update();
        $data['query'] = $this->MDaily->getAll();
        $this->load->view('daily/show',$data);
      }else{
        $this->MDaily->save();
        $data['query'] = $this->MDaily->getAll();
        $this->load->view('daily/show',$data);
      }
    }
  }
 
  public function delete(){
    $id = $this->input->post('id');
    $this->db->delete('daily', array('id' => $id));
    $data['query'] = $this->MDaily->getAll();
    $this->load->view('daily/show',$data);
  }
}
Create Modalapplication\models\MDaily.php 
<?php
class MDaily extends CI_Model {
  function getAll(){
    $this->db->select('*');
    $this->db->from('daily');
    $this->db->limit(50);
    $this->db->order_by('id','ASC');
    $query = $this->db->get();
 
    return $query->result();
  }
 
  function get($id){
    $query = $this->db->getwhere('daily',array('id'=>$id));
    return $query->row_array();
  }
 
  function save(){
    $date = $this->input->post('date');
    $name = $this->input->post('name');
    $amount=$this->input->post('amount');
    $data = array(
      'date'=>$date,
      'name'=>$name,
      'amount'=>$amount
    );
    $this->db->insert('daily',$data);
  }
 
  function update(){
    $id   = $this->input->post('id');
    $date = $this->input->post('date');
    $name = $this->input->post('name');
    $amount=$this->input->post('amount');
    $data = array(
      'date'=>$date,
      'name'=>$name,
      'amount'=>$amount
    );
    $this->db->where('id',$id);
    $this->db->update('daily',$data);
  }
 
}
Create Viewapplication\views\daily\input.php 
<html lang="en-US">
  <head>
    <title>Daily Notes</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
    <meta charset="UTF-8">
    <style>
        body { font-size: 75%; }
        label, input { display:block; }
        input.text { margin-bottom:12px; width:95%; padding: .4em; }
        h1 { font-size: 1.2em; margin: .6em 0; }
        a{text-decoration:none;}
        {font-size:60%};
    </style>
    <script>
    $(function() {
 
        $( "#dialog:ui-dialog" ).dialog( "destroy" );
 
        $( "#dialog-confirm" ).dialog({
            autoOpen: false,
            resizable: false,
            height:140,
            modal: true,
            hide: 'Slide',
            buttons: {
                "Delete": function() {
                    var del_id = {id : $("#del_id").val()};
                    $.ajax({
                        type: "POST",
                        url : "<?php echo site_url('daily/delete')?>",
                        data: del_id,
                        success: function(msg){
                            $('#show').html(msg);
                            $('#dialog-confirm' ).dialog( "close" );
                            //$( ".selector" ).dialog( "option", "hide", 'slide' );
                        }
                    });
 
                    },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
 
        $( "#form_input" ).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: false,
            hide: 'Slide',
            buttons: {
                "Add": function() {
                    var form_data = {
                        id: $('#id').val(),
                        date: $('#date').val(),
                        name: $('#name').val(),
                        amount: $('#amount').val(),
                        ajax:1
                    };
 
                    $('#date').attr("disabled",true);
                    $('#name').attr("disabled",true);
                    $('#amount').attr("disabled",true);
 
                  $.ajax({
                    url : "<?php echo site_url('daily/submit')?>",
                    type : 'POST',
                    data : form_data,
                    success: function(msg){
                    $('#show').html(msg),
                    $('#date').val('<?php echo date('Y-m-d'); ?>'),
                    $('#id').val(''),
                    $('#name').val(''),
                    $('#amount').val(''),
                    $('#date').attr("disabled",false);
                    $('#name').attr("disabled",false);
                    $('#amount').attr("disabled",false);
                    $( '#form_input' ).dialog( "close" )
                    }
                  });
 
            },
                Cancel: function() {
                    $('#id').val(''),
                    $('#name').val('');
                    $('#amount').val('');
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                $('#id').val(''),
                $('#name').val('');
                $('#amount').val('');
            }
        });
 
    $( "#create-daily" )
            .button()
            .click(function() {
                $( "#form_input" ).dialog( "open" );
            });
    });
 
    $(".edit").live("click",function(){
        var id = $(this).attr("id");
        var date = $(this).attr("date");
        var name = $(this).attr("name");
        var amount = $(this).attr("amount");
 
        $('#id').val(id);
        $('#date').val(date);
        $('#name').val(name);
        $('#amount').val(amount);
 
        $( "#form_input" ).dialog( "open" );
 
        return false;
    });
 
    $(".delbutton").live("click",function(){
        var element = $(this);
        var del_id = element.attr("id");
        var info = 'id=' + del_id;
        $('#del_id').val(del_id);
        $( "#dialog-confirm" ).dialog( "open" );
 
        return false;
    });
    </script>
 
  </head>
 
  <body>
    <div id="show">
        <?php $this->load->view('daily/show'); ?>
    </div>
    <p>
        <button id="create-daily">Input New</button>
    </p>
 
<div id="form_input">
      <table>
        <?php echo form_open('daily/submit'); ?>
        <input type="hidden" value='' id="id" name="id">
        <tr >
            <td> <?php echo form_label('Date : '); ?></td>
            <td> <?php echo form_input('date',date('Y-m-d'),'id="date"'); ?></td>
        </tr>
        <tr>
            <td> <?php echo form_label('Name : ');?> </td>
            <td> <?php echo form_input('name','','id="name"'); ?></td>
        </tr>
        <tr>
            <td> <?php echo form_label('Amount : ');?> </td>
            <td> <?php echo form_input('amount','','id="amount"'); ?></td>
        </tr>
      </table>
    </div>
 
    <div id="dialog-confirm" title="Delete Item ?">
    <p>
        <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        <input type="hidden" value='' id="del_id" name="del_id">
        Are you sure?</p>
</div>
 
  </body>
</html>
Create Viewapplication\views\daily\show.php 
<h1>Daily Notes</h1>
<table id="daily" class="ui-widget ui-widget-content" width="400px">
 <tr class="ui-widget-header ">
 <th>No</th>
 <th>Date</th>
 <th>Name</th>
 <th>Amount</th>
 <th>Edit</th>
 <th>Delete</th>
 </tr>
 <?
 $i=0;
 foreach ($query as $row){
 $i++;
 echo "<tr class=\"record\">";
 echo    "<td>$i</td>";
 echo    "<td>$row->date</td>";
 echo    "<td>$row->name</td>";
 echo    "<td>$row->amount</td>";
 echo    "<td><a href=\"#\" class=\"edit\" id=\"$row->id\" date=\"$row->date\" name=\"$row->name\" amount=\"$row->amount\">Edit</a></td>";
 echo    "<td><a class=\"delbutton\" id=\"$row->id\" href=\"#\" >Delete</a></td>";
 echo  "</tr>";
 }
 ?>
</table>

Download http://bit.ly/2GXWB1S
Posted by ednalan at 8:05 AM . Under .

Related Post