Agregar AJAX al proyecto

[jorge-koki]

If anyone is trying to integrate AJAX and DATATABLE I will show you how I did it.

Show records and add register
note/index

<form method="post" id="new_form_notes">
                            <label>Nota: </label>
                            <input type="text" name="note_text" id="note_text"/>
                            <input type="hidden" name="csrf_token" value="<?= Csrf::makeToken(); ?>" />
                            <button type="submit" >Agregar</button>
</form>

<table id="note_data" >
            <thead>
                <tr>
                    <td>Id</td>
                    <td>Note</td>
                    <td>EDIT</td>
                    <td>DELETE</td>
                </tr>
            </thead>
        </table>

In _templates/footer.php

<script type="text/javascript" language="javascript" >
 var url = "<?php echo Config::get('URL'); ?>";
var csrf_token = "<?= Csrf::makeToken(); ?>";
</script>

<script src="<?php echo Config::get('URL'); ?>js/demo.js"></script>

demo.js

$(document).ready(function(){
	var dataTable = $('#note_data').DataTable({
        "processing":true,
		"serverSide":true,
		"order":[],
		"ajax":{
			url: url + 'Note/tableNote',
			type:"POST",
			data: { csrf_token : csrf_token }
		}	
	});

    	$(document).on('submit', '#new_form_notes', function (event) {
        event.preventDefault();
        $.ajax({
			url: url + 'Note/Create',
            type: "post",
			dataType: "json",
			data: new FormData(this),
            cache: false,
            contentType: false,
            processData: false

        }).always(function () {

        }).done(function (response) {
            dataTable.ajax.reload();
			console.log(response);
			if(response =='insertado'){
				alert('Datos insertados')
			}else{
				alert(response)
			}
		
        }).fail(function (jqXHR, textStatus, errorThrown) {
           console.log("Ha ocurrido un error inesperado " + jqXHR + " " + textStatus + " " + errorThrown);
		   console.warn(jqXHR.responseText)
        });
	});
});

Controller/NoteController.php

    public function tableNote()
    {
         // check if csrf token is valid
         if (!Csrf::isTokenValid()) {
            LoginModel::logout();
            Redirect::home();
            exit();
        }else{
            $response = NoteModel::datatable();
            echo $response;

        }
    }

   public function create()
    {
        if (!Csrf::isTokenValid()) {
            LoginModel::logout();
            Redirect::home();
            exit();
        }else{
            $response = NoteModel::createNote( Request::post('note_text'));
            echo $response;
        }
      
    }

Model/NoteModel.php

public static function get_total_all_records()
    {
        $database  = DatabaseFactory::getFactory()->getConnection();
        $statement = $database->prepare("SELECT * FROM notes");
        $statement->execute();
        return $statement->rowCount();
    }

    public static function datatable()
    {
        
        $database = DatabaseFactory::getFactory()->getConnection();

        $query = '';
        $columns = array('note_id', 'note_text', 'note_id', 'note_id');
        
        $output = array();
        
        $query .= "SELECT * FROM notes ";

        if (isset($_POST["search"]["value"])) {
            $query .= ' WHERE note_text LIKE "%' . $_POST["search"]["value"] . '%" ';
            $query .= 'OR note_id LIKE "%' . $_POST["search"]["value"].'%" ';
        }
        if (isset($_POST["order"])) {
            $query .= 'ORDER BY ' . $columns[$_POST['order']['0']['column']] . ' ' . $_POST['order']['0']['dir'] . ' 
            ';
        } else {
            $query .= 'ORDER BY note_id DESC ';
        }
        if ($_POST["length"] != -1) {
            $query .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
        }
        $statement =  $database->prepare($query);
        $statement->execute();
        
        $result = $statement->fetchAll();
        $data = array();
        $filtered_rows = $statement->rowCount();
        foreach ($result as $row) {
         
            $sub_array = array();
            $sub_array[] = $row->note_id;
            $sub_array[] = $row->note_text;
          
            $sub_array[] = '<button type="button" name="update" id="' . $row->note_id . '" class="btn btn-warning btn-xs update">Update</button>';

            $sub_array[] = '<button type="button" name="delete" id="' . $row->note_id . '" class="btn btn-danger btn-xs delete">Delete</button>';

            $data[] = $sub_array;
        }

        $output = array(
            "draw"                =>    intval($_POST["draw"]),
            "recordsTotal"        =>    $filtered_rows,
            "recordsFiltered"     =>     self::get_total_all_records(),
            "data"                =>    $data
        );

        echo json_encode($output, true);

    }


public static function createNote( $note_text )
    {
       
            $database = DatabaseFactory::getFactory()->getConnection();

            $sql = "INSERT INTO notes (note_text, user_id) VALUES (:note_text,  :user_id)";
            $query = $database->prepare($sql);
            $query->execute(array(
            ':note_text' => $note_text, 
            ':user_id' => Session::get('user_id')));
    
            if ($query->rowCount() == 1) {
                $mens =  'insertado';
            }else{
                $mens =  'sinCambios';  
            }
        
        echo $mens;
    }