Ajax table action and process

Question

I'm trying to learn Ajax better, and I'm developing an application in CodeIgniter.

The following code is working, there are no errors. But for every function and call I think I'm repeating callbacks too often.

    <script type="text/javascript">

    $(document).ready(function(){
        show_costumer();

        function show_costumer(){
            $.ajax({
                type  : 'ajax',
                url   : "<?php echo base_url(); ?>admin/costumer/costumer_data",
                async : true,
                dataType : 'JSON',
                success : function(data){
                    var html = '';
                    var i;
                    for(i=0; i<data.length; i++){
                        html += '<tr>'+
                                '<td><input type="checkbox" class="checkbox" data-id="'+data[i].id_anagrafica+'" /></td>'+
                                '<td>'+data[i].nome+'</td>'+
                                '<td>'+data[i].cognome+'</td>'+
                                '<td>'+data[i].telefono+'</td>'+
                                '<td>'+data[i].email+'</td>'+
                                '<td>'+data[i].cf+'</td>'+
                                '<td>'+data[i].data_nascita+'</td>'+
                                '<td>'+data[i].comune+'</td>'+
                                '<td>'+data[i].tipo_attivita+'</td>'+
                                '<td>'+data[i].note_anagrafica+'</td>'+
                                '<td>'+data[i].note_tipo_attivita+'</td>'+
                                '<td style="text-align:right;">'+
                                    '<a href="javascript:void(0);" class="btn btn-info btn-sm item_edit" data-id_anagrafica="'+data[i].id_anagrafica+'" data-nome="'+data[i].nome+'" data-cognome="'+data[i].cognome+'" data-telefono="'+data[i].telefono+'" data-email="'+data[i].email+'" data-cf="'+data[i].cf+'" data-nascita="'+data[i].data_nascita+'" data-comune="'+data[i].comune+'"data-tipo_attivita="'+data[i].tipo_attivita+'" data-note_anagrafica="'+data[i].note_anagrafica+'" data-note_tipo_attivita="'+data[i].note_tipo_attivita+'">Edit</a>'+' '+
                                    '<a href="javascript:void(0);" class="btn btn-danger btn-sm item_delete" data-id_anagrafica="'+data[i].id_anagrafica+'">Delete</a>'+
                                '</td>'+
                                '</tr>';
                    }
                    $('#show_costumer').html(html);
                }

            });

        }

        $('#search_text').keyup(function(){
          var search = $(this).val();
          if( search != "" ){
            $.ajax({
              type:"POST",
              url:"<?php echo base_url(); ?>admin/costumer/search",
              data:'search='+$('#search_text').val(),
              dataType: "JSON",
              cache: false,
              success:function(data){
                var html = '';
                var i;
                for(i=0; i<data.length; i++){
                  html += '<tr>'+
                  '<td><input type="checkbox" class="checkbox" data-id="'+data[i].id_anagrafica+'" /></td>'+
                  '<td>'+data[i].nome+'</td>'+
                  '<td>'+data[i].cognome+'</td>'+
                  '<td>'+data[i].telefono+'</td>'+
                  '<td>'+data[i].email+'</td>'+
                  '<td>'+data[i].cf+'</td>'+
                  '<td>'+data[i].data_nascita+'</td>'+
                  '<td>'+data[i].comune+'</td>'+
                  '<td>'+data[i].tipo_attivita+'</td>'+
                  '<td>'+data[i].note_anagrafica+'</td>'+
                  '<td>'+data[i].note_tipo_attivita+'</td>'+
                  '<td style="text-align:right;">'+
                  '<a href="javascript:void(0);" class="btn btn-info btn-sm item_edit" data-id_anagrafica="'+data[i].id_anagrafica+'" data-nome="'+data[i].nome+'" data-cognome="'+data[i].cognome+'" data-telefono="'+data[i].telefono+'" data-email="'+data[i].email+'" data-cf="'+data[i].cf+'" data-nascita="'+data[i].data_nascita+'" data-comune="'+data[i].comune+'"data-tipo_attivita="'+data[i].tipo_attivita+'" data-note_anagrafica="'+data[i].note_anagrafica+'" data-note_tipo_attivita="'+data[i].note_tipo_attivita+'">Edit</a>'+' '+
                  '<a href="javascript:void(0);" class="btn btn-danger btn-sm item_delete" data-id_anagrafica="'+data[i].id_anagrafica+'">Delete</a>'+
                  '</td>'+
                  '</tr>';
                }
                $('#show_costumer').html(html);
              },
              error: function(data){
                return false;
              }
            });
          }
          else{
            show_costumer();
          }
        });

        //Save product
        $('#btn_save').on('click',function(){
            var id_anagrafica = $('#id_anagrafica').val();
            var nome = $('#nome').val();
            var cognome = $('#cognome').val();
            var telefono = $('#telefono').val();
            var email = $('#email').val();
            var cf = $('#cf').val();
            var data_nascita = $('#data_nascita').val();
            var comune = $('#comune').val();
            var tipo_attivita = $('#tipo_attivita').val();
            var note_anagrafica = $('#note_anagrafica').val();
            var note_tipo_attivita = $('#note_tipo_attivita').val();
            $.ajax({
                type : "POST",
                url  : "<?php echo base_url(); ?>admin/costumer/save",
                dataType : "JSON",
                data : {id_anagrafica:id_anagrafica, nome:nome , cognome:cognome, telefono:telefono, email:email, cf:cf, data_nascita:data_nascita, comune:comune, tipo_attivita:tipo_attivita, note_anagrafica:note_anagrafica, note_tipo_attivita:note_tipo_attivita},
                success: function(data){
                    $('[name="id_anagrafica"]').val("");
                    $('[name="nome"]').val("");
                    $('[name="cognome"]').val("");
                    $('[name="telefono"]').val("");
                    $('[name="email"]').val("");
                    $('[name="cf"]').val("");
                    $('[name="data_nascita"]').val("");
                    $('[name="comune"]').val("");
                    $('[name="tipo_attivita"]').val("");
                    $('[name="note_anagrafica"]').val("");
                    $('[name="note_tipo_attivita"]').val("");
                    $('#addcostumer').modal('close');
                    show_costumer();
                }
            });
            return false;
        });

        //get data for update record
        $('#show_costumer').on('click','.item_edit',function(){
            var id_anagrafica = $(this).data('id_anagrafica');
            var nome = $(this).data('nome');
            var cognome = $(this).data('cognome');
            var telefono = $(this).data('telefono');
            var email = $(this).data('email');
            var cf = $(this).data('cf');
            var data_nascita = $(this).data('data_nascita');
            var comune = $(this).data('comune');
            var tipo_attivita = $(this).data('tipo_attivita');
            var note_anagrafica = $(this).data('note_anagrafica');
            var note_tipo_attivita = $(this).data('note_tipo_attivita');

            $('#Modal_Edit').modal('open');
            $('[name="id_anagrafica_edit"]').val(id_anagrafica);
            $('[name="nome_edit"]').val(nome);
            $('[name="cognome_edit"]').val(cognome);
            $('[name="telefono_edit"]').val(telefono);
            $('[name="email_edit"]').val(email);
            $('[name="cf_edit"]').val(cf);
            $('[name="data_nascita"]').val(data_nascita);
            $('[name="comune_edit"]').val(comune);
            $('[name="tipo_attivita_edit"]').val(tipo_attivita);
            $('[name="note_anagrafica_edit"]').val(note_anagrafica);
            $('[name="note_tipo_attivita_edit"]').val(note_tipo_attivita);
        });

        //update record to database
         $('#btn_update').on('click',function(){
           var id_anagrafica = $('#id_anagrafica_edit').val();
           var nome = $('#nome_edit').val();
           var cognome = $('#cognome_edit').val();
           var telefono = $('#telefono_edit').val();
           var email = $('#email_edit').val();
           var cf = $('#cf_edit').val();
           var data_nascita = $('#data_nascita_edit').val();
           var comune = $('#comune_edit').val();
           var tipo_attivita = $('#tipo_attivita_edit').val();
           var note_anagrafica = $('#note_anagrafica_edit').val();
           var note_tipo_attivita = $('#note_tipo_attivita_edit').val();
            $.ajax({
                type : "POST",
                url  : "<?php base_url( 'admin/costumer/update' ) ?>",
                dataType : "JSON",
                data : {id_anagrafica:id_anagrafica, nome:nome , cognome:cognome, telefono:telefono, email:email, cf:cf, data_nascita:data_nascita, comune:comune, tipo_attivita:tipo_attivita, note_anagrafica:note_anagrafica, note_tipo_attivita:note_tipo_attivita},
                success: function(data){
                    $('[name="id_anagrafica_edit"]').val("");
                    $('[name="nome_edit"]').val("");
                    $('[name="cognome_edit"]').val("");
                    $('[name="telefono_edit"]').val("");
                    $('[name="email_edit"]').val("");
                    $('[name="cf_edit"]').val("");
                    $('[name="data_nascita_edit"]').val("");
                    $('[name="comune_edit"]').val("");
                    $('[name="tipo_attivita_edit"]').val("");
                    $('[name="note_anagrafica_edit"]').val("");
                    $('[name="note_tipo_attivita_edit"]').val("");
                    $('#Modal_Edit').modal('close');
                    show_costumer();
                }
            });
            return false;
        });

        //get data for delete record
        $('#show_costumer').on('click','.item_delete',function(){
            var id_anagrafica = $(this).data('id_anagrafica');

            $('#Modal_Delete').modal('open');
            $('[name="id_anagrafica_delete"]').val(id_anagrafica);
        });

        //delete record to database
          $('#btn_delete').on('click',function(){
             var id_anagrafica =$('#id_anagrafica_delete').val();
             $.ajax({
                 type : "POST",
                 url  : "<?php base_url('admin/costumer/delete') ?>",
                 dataType : "JSON",
                 data : {id_anagrafica:id_anagrafica},
                 success: function(data){
                     $('[name="id_anagrafica_delete"]').val("");
                     $('#Modal_Delete').modal('close');
                     show_costumer();
                 }
             });
             return false;
         });

        //delete all record to database
          $('#delete_all_costumers').on('click',function()
              {
                  if(this.checked)
                      {
                          $('.checkbox').each(function()
                              {
                                  this.checked = true;
                              }
                          );
                     }
                else
                    {

                      $('.checkbox').each(function()
                          {
                             this.checked = false;
                        }
                     );
                 }
             });

             $('.delete_all_customers').on('click', function(e) {

                 var allVals = [];
                 $(".checkbox:checked").each(function() {
                     allVals.push($(this).attr('data-id'));
                 });

                 if(allVals.length <=0)
                 {
                     alert("Please select row.");
                 }  else {

                     var check = confirm("Are you sure you want to delete this row?");
                     if(check == true){

                         var join_selected_values = allVals.join(",");

                         $.ajax({
                             url: "<?php base_url( 'admin/costumer/delete_all' ) ?>
                             ",
                             type: 'POST',
                             data: 'id_anagrafica='+join_selected_values,
                             success: function (data) {
                               console.log(data);
                               $(".checkbox:checked").each(function() {
                                   $(this).parents("tr").remove();
                               });
                               alert("Item Deleted successfully.");
                             },
                             error: function (data) {
                                 alert(data.responseText);
                             }
                         });

                       $.each(allVals, function( index, value ) {
                           $('table tr').filter("[data-row-id='" + value + "']").remove();
                       });
                     }
                 }
             });

             $('.pagination').on('click','a',function(e){
               e.preventDefault();
               var page_number = $(this).attr('data-ci-pagination-page');
               loadPagination(page_number);
             });

             loadPagination(0);

             // Load pagination
             function loadPagination(page_number){
               $.ajax({
                 url: '<?=base_url()?>admin/costumer/load_record/'+page_number,
                 type: 'get',
                 dataType: 'json',
                 success: function(response){
                    $('.pagination').html(response.pagination);
                    createTable(response.result,response.row);
                 }
               });
             }

     // Create table list
     function createTable(result,sno){
       sno = Number(sno);
       $('#table tbody').empty();
       for(index in result){
          var id_anagrafica = result[index].id_anagrafica;
          var nome = result[index].nome;
          var cognome = result[index].cognome;
          var telefono = result[index].telefono;
          var email = result[index].email;
          var cf = result[index].cf;
          var data_nascita = result[index].data_nascita;
          var comune = result[index].comune;
          var tipo_attivita = result[index].tipo_attivita;
          var note_anagrafica = result[index].note_anagrafica;
          var note_tipo_attivita = result[index].note_tipo_attivita;
          // content = content.substr(0, 60) + " ...";
          // var link = result[index].link;
          sno+=1;

          var tr = "<tr>";
          tr += "<td><input type='checkbox' id='checkbox' class='checkbox' data-id="+ id_anagrafica +" /></td>";
          tr += "<td><div class='row_data' edit_type='click' col_name='fname'>"+ nome +"</div></td>";
          tr += "<td>"+ cognome +"</td>";
          tr += "<td>"+ telefono +"</td>";
          tr += "<td>"+ email +"</td>";
          tr += "<td>"+ cf +"</td>";
          tr += "<td>"+ data_nascita +"</td>";
          tr += "<td>"+ comune +"</td>";
          tr += "<td>"+ tipo_attivita +"</td>";
          tr += "<td>"+ note_anagrafica +"</td>";
          tr += "<td>"+ note_tipo_attivita +"</td>";
          tr += '<td style="text-align:right;">'+
              '<a href="javascript:void(0);" class="btn btn-info btn-sm item_edit" data-id_anagrafica="'+ id_anagrafica +'" data-nome="'+nome+'" data-cognome="'+cognome+'" data-telefono="'+telefono+'" data-email="'+email+'" data-cf="'+cf+'" data-nascita="'+data_nascita+'" data-comune="'+comune+'"data-tipo_attivita="'+tipo_attivita+'" data-note_anagrafica="'+note_anagrafica+'" data-note_tipo_attivita="'+note_tipo_attivita+'">Edit</a>'+' '+
              '<a href="javascript:void(0);" class="btn btn-danger btn-sm item_delete" data-id_anagrafica="'+id_anagrafica+'">Delete</a>'+
          '</td>';
          tr += "</tr>";
          $('#table tbody').append(tr);

        }
      }


      //--->make div editable > start
      $(document).on('click', '.row_data', function(event)
      {
      event.preventDefault();

      //make div editable
      $(this).closest('div').attr('contenteditable', 'true');

      $(this).focus();
      })
      //--->make div editable > end

});

</script>

Is this a good approach? What if I need to change or add a function? Do I need to edit every single function or is there a better way to write this code?

Answer 1

Take a step back and forget about what your code does; what does it look like? Find the text that's duplicated, then try sticking those in functions. If this code uses variables, make these arguments for your functions. If a few snippets of code are 90% similar, move one copy to a new function, then add an if-statement in this new function to support the other versions.

Here's some snippets things that could be made into functions:

html += '<tr>' +
  '<td><input type="checkbox" class="checkbox" data-id="' + data[i].id_anagrafica + '" /></td>' +
  '<td>' + data[i].nome + '</td>' +
  '<td>' + data[i].cognome + '</td>' +
  '<td>' + data[i].telefono + '</td>' +
  '<td>' + data[i].email + '</td>' +
  '<td>' + data[i].cf + '</td>' +
  '<td>' + data[i].data_nascita + '</td>' +
  '<td>' + data[i].comune + '</td>' +
  '<td>' + data[i].tipo_attivita + '</td>' +
  '<td>' + data[i].note_anagrafica + '</td>' +
  '<td>' + data[i].note_tipo_attivita + '</td>' +
  '<td style="text-align:right;">' +
  '<a href="javascript:void(0);" class="btn btn-info btn-sm item_edit" data-id_anagrafica="' + data[i].id_anagrafica + '" data-nome="' + data[i].nome + '" data-cognome="' + data[i].cognome + '" data-telefono="' + data[i].telefono + '" data-email="' + data[i].email + '" data-cf="' + data[i].cf + '" data-nascita="' + data[i].data_nascita + '" data-comune="' + data[i].comune + '"data-tipo_attivita="' + data[i].tipo_attivita + '" data-note_anagrafica="' + data[i].note_anagrafica + '" data-note_tipo_attivita="' + data[i].note_tipo_attivita + '">Edit</a>' + ' ' +
  '<a href="javascript:void(0);" class="btn btn-danger btn-sm item_delete" data-id_anagrafica="' + data[i].id_anagrafica + '">Delete</a>' +
  '</td>' +
  '</tr>';

// ... could be ...
function row(data) {
  return '<tr>' +
    '<td><input type="checkbox" class="checkbox" data-id="' + data.id_anagrafica + '" /></td>' +
    '<td>' + data.nome + '</td>' +
    '<td>' + data.cognome + '</td>' +
    '<td>' + data.telefono + '</td>' +
    '<td>' + data.email + '</td>' +
    '<td>' + data.cf + '</td>' +
    '<td>' + data.data_nascita + '</td>' +
    '<td>' + data.comune + '</td>' +
    '<td>' + data.tipo_attivita + '</td>' +
    '<td>' + data.note_anagrafica + '</td>' +
    '<td>' + data.note_tipo_attivita + '</td>' +
    '<td style="text-align:right;">' +
    '<a href="javascript:void(0);" class="btn btn-info btn-sm item_edit" data-id_anagrafica="' + data.id_anagrafica + '" data-nome="' + data.nome + '" data-cognome="' + data.cognome + '" data-telefono="' + data.telefono + '" data-email="' + data.email + '" data-cf="' + data.cf + '" data-nascita="' + data.data_nascita + '" data-comune="' + data.comune + '"data-tipo_attivita="' + data.tipo_attivita + '" data-note_anagrafica="' + data.note_anagrafica + '" data-note_tipo_attivita="' + data.note_tipo_attivita + '">Edit</a>' + ' ' +
    '<a href="javascript:void(0);" class="btn btn-danger btn-sm item_delete" data-id_anagrafica="' + data.id_anagrafica + '">Delete</a>' +
    '</td>' +
    '</tr>';
}
html += row(data[i]);


// This:
var id_anagrafica = $(this).data('id_anagrafica');
var nome = $(this).data('nome');
var cognome = $(this).data('cognome');
var telefono = $(this).data('telefono');
var email = $(this).data('email');
var cf = $(this).data('cf');
var data_nascita = $(this).data('data_nascita');
var comune = $(this).data('comune');
var tipo_attivita = $(this).data('tipo_attivita');
var note_anagrafica = $(this).data('note_anagrafica');
var note_tipo_attivita = $(this).data('note_tipo_attivita');

$('#Modal_Edit').modal('open');
$('[name="id_anagrafica_edit"]').val(id_anagrafica);
$('[name="nome_edit"]').val(nome);
$('[name="cognome_edit"]').val(cognome);
$('[name="telefono_edit"]').val(telefono);
$('[name="email_edit"]').val(email);
$('[name="cf_edit"]').val(cf);
$('[name="data_nascita"]').val(data_nascita);
$('[name="comune_edit"]').val(comune);
$('[name="tipo_attivita_edit"]').val(tipo_attivita);
$('[name="note_anagrafica_edit"]').val(note_anagrafica);
$('[name="note_tipo_attivita_edit"]').val(note_tipo_attivita);
});

// ... could be
function update(data) {
  $('[name="id_anagrafica_edit"]').val(data.id_anagrafica);
  $('[name="nome_edit"]').val(data.nome);
  $('[name="cognome_edit"]').val(data.cognome);
  $('[name="telefono_edit"]').val(data.telefono);
  $('[name="email_edit"]').val(data.email);
  $('[name="cf_edit"]').val(data.cf);
  $('[name="data_nascita"]').val(data.data_nascita);
  $('[name="comune_edit"]').val(data.comune);
  $('[name="tipo_attivita_edit"]').val(data.tipo_attivita);
  $('[name="note_anagrafica_edit"]').val(data.note_anagrafica);
  $('[name="note_tipo_attivita_edit"]').val(data.note_tipo_attivita);
}
$('#Modal_Edit').modal('open');
update($(this).data()); // similarly: update({}) to clear stuff


// This:
var id_anagrafica = $('#id_anagrafica_edit').val();
var nome = $('#nome_edit').val();
var cognome = $('#cognome_edit').val();
var telefono = $('#telefono_edit').val();
var email = $('#email_edit').val();
var cf = $('#cf_edit').val();
var data_nascita = $('#data_nascita_edit').val();
var comune = $('#comune_edit').val();
var tipo_attivita = $('#tipo_attivita_edit').val();
var note_anagrafica = $('#note_anagrafica_edit').val();
var note_tipo_attivita = $('#note_tipo_attivita_edit').val();

// ... could be:
function read() {
  return {
    id_anagrafica: $('#id_anagrafica_edit').val(),
    nome: $('#nome_edit').val(),
    cognome: $('#cognome_edit').val(),
    telefono: $('#telefono_edit').val(),
    email: $('#email_edit').val(),
    cf: $('#cf_edit').val(),
    data_nascita: $('#data_nascita_edit').val(),
    comune: $('#comune_edit').val(),
    tipo_attivita: $('#tipo_attivita_edit').val(),
    note_anagrafica: $('#note_anagrafica_edit').val(),
    note_tipo_attivita: $('#note_tipo_attivita_edit').val(),
  }
}
$.ajax({ ...snip...,
  data: read()
})