├── README.md ├── docs └── screenshot.png ├── simple-ajax ├── backend.php └── index.html └── todo-app ├── app.js ├── database.php ├── index.html ├── task-add.php ├── task-delete.php ├── task-edit.php ├── task-search.php ├── task-single.php └── tasks-list.php /README.md: -------------------------------------------------------------------------------- 1 | ![](./docs/screenshot.png) 2 | 3 | # Index 4 | - simple-ajax 5 | -------------------------------------------------------------------------------- /docs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FaztWeb/php-ajax/66930ad07052eadb8b0f04ddfb50404fc7d17601/docs/screenshot.png -------------------------------------------------------------------------------- /simple-ajax/backend.php: -------------------------------------------------------------------------------- 1 | '; 6 | echo $_POST['password']; 7 | } 8 | 9 | #echo 'Working!'; 10 | 11 | ?> 12 | -------------------------------------------------------------------------------- /simple-ajax/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple AJAX - GET REQUEST 6 | 7 | 8 | 9 | 12 | 13 |
14 | 15 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /todo-app/app.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | // Global Settings 3 | let edit = false; 4 | 5 | // Testing Jquery 6 | console.log('jquery is working!'); 7 | fetchTasks(); 8 | $('#task-result').hide(); 9 | 10 | 11 | // search key type event 12 | $('#search').keyup(function() { 13 | if($('#search').val()) { 14 | let search = $('#search').val(); 15 | $.ajax({ 16 | url: 'task-search.php', 17 | data: {search}, 18 | type: 'POST', 19 | success: function (response) { 20 | if(!response.error) { 21 | let tasks = JSON.parse(response); 22 | let template = ''; 23 | tasks.forEach(task => { 24 | template += ` 25 |
  • ${task.name}
    • 26 | ` 27 | }); 28 | $('#task-result').show(); 29 | $('#container').html(template); 30 | } 31 | } 32 | }) 33 | } 34 | }); 35 | 36 | $('#task-form').submit(e => { 37 | e.preventDefault(); 38 | const postData = { 39 | name: $('#name').val(), 40 | description: $('#description').val(), 41 | id: $('#taskId').val() 42 | }; 43 | const url = edit === false ? 'task-add.php' : 'task-edit.php'; 44 | console.log(postData, url); 45 | $.post(url, postData, (response) => { 46 | console.log(response); 47 | $('#task-form').trigger('reset'); 48 | fetchTasks(); 49 | }); 50 | }); 51 | 52 | // Fetching Tasks 53 | function fetchTasks() { 54 | $.ajax({ 55 | url: 'tasks-list.php', 56 | type: 'GET', 57 | success: function(response) { 58 | const tasks = JSON.parse(response); 59 | let template = ''; 60 | tasks.forEach(task => { 61 | template += ` 62 | 63 | ${task.id} 64 | 65 | 66 | ${task.name} 67 | 68 | 69 | ${task.description} 70 | 71 | 74 | 75 | 76 | ` 77 | }); 78 | $('#tasks').html(template); 79 | } 80 | }); 81 | } 82 | 83 | // Get a Single Task by Id 84 | $(document).on('click', '.task-item', (e) => { 85 | const element = $(this)[0].activeElement.parentElement.parentElement; 86 | const id = $(element).attr('taskId'); 87 | $.post('task-single.php', {id}, (response) => { 88 | const task = JSON.parse(response); 89 | $('#name').val(task.name); 90 | $('#description').val(task.description); 91 | $('#taskId').val(task.id); 92 | edit = true; 93 | }); 94 | e.preventDefault(); 95 | }); 96 | 97 | // Delete a Single Task 98 | $(document).on('click', '.task-delete', (e) => { 99 | if(confirm('Are you sure you want to delete it?')) { 100 | const element = $(this)[0].activeElement.parentElement.parentElement; 101 | const id = $(element).attr('taskId'); 102 | $.post('task-delete.php', {id}, (response) => { 103 | fetchTasks(); 104 | }); 105 | } 106 | }); 107 | }); 108 | -------------------------------------------------------------------------------- /todo-app/database.php: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /todo-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Todo App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 26 | 27 |
    28 |
    29 |
    30 |
    31 |
    32 | 33 |
    34 |
    35 | 36 |
    37 |
    38 | 39 |
    40 | 41 | 44 |
    45 |
    46 |
    47 |
    48 | 49 | 50 |
    51 |
    52 |
    53 | 54 |
      55 |
      56 |
      57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
      IdNameDescription
      68 |
      69 |
      70 |
      71 | 72 | 76 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /todo-app/task-add.php: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /todo-app/task-delete.php: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /todo-app/task-edit.php: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /todo-app/task-search.php: -------------------------------------------------------------------------------- 1 | $row['name'], 18 | 'description' => $row['description'], 19 | 'id' => $row['id'] 20 | ); 21 | } 22 | $jsonstring = json_encode($json); 23 | echo $jsonstring; 24 | } 25 | 26 | ?> 27 | -------------------------------------------------------------------------------- /todo-app/task-single.php: -------------------------------------------------------------------------------- 1 | $row['name'], 19 | 'description' => $row['description'], 20 | 'id' => $row['id'] 21 | ); 22 | } 23 | $jsonstring = json_encode($json[0]); 24 | echo $jsonstring; 25 | } 26 | 27 | ?> 28 | -------------------------------------------------------------------------------- /todo-app/tasks-list.php: -------------------------------------------------------------------------------- 1 | $row['name'], 15 | 'description' => $row['description'], 16 | 'id' => $row['id'] 17 | ); 18 | } 19 | $jsonstring = json_encode($json); 20 | echo $jsonstring; 21 | ?> 22 | --------------------------------------------------------------------------------