The preceding code may be difficult to understand if you’re writing a Blade template for the first time, so we’ll try to examine it. You see a foreach loop in the file. This statement loops our todo records.

We will provide you with more knowledge about it when we are creating our controller in this chapter.

If and else statements are used for separating finished and waiting tasks. We use if and else statements for styling the tasks.

We need one more template file for appending new records to the task list on the fly. Create a file with the name ajaxData.blade.php under the resources/views/ folder. The file contains the following code:

@foreach($todos as $todo)
  <li id="{{$todo->id}}"><a href="#" onClick="task_done('{{$todo->id}}');" class="toggle"></a> <span id="span_{{$todo>id}}">{{$todo->title}}</span> <a href="#"onClick="delete_task('{{$todo->id}}');" class="icondelete">Delete</a> <a href="#" onClick="edit_task('{{$todo>id}}','{{$todo->title}}');" class="icon-edit">Edit</a></li>
@endforeach

Also, you will see the /assets/ directory in the source path of static files. When you look at the resources/views directory, there is no directory named assets. Laravel separates the system and public files. Public accessible files stay under your public folder in root. So you should create a directory under your public folder for asset files.

We recommend working with these types of organized folders for developing tidy and easy-to-read code. Finally, you will see that we are calling jQuery from its main website. We also recommend this way for getting the latest, stable jQuery in your application.

You can style your application as you wish, hence we’ll not examine styling code here. We are putting our style.css files under /public/assets/css/.

 

For performing Ajax requests, we need JavaScript coding. This code posts our add_task and edit_task forms, and updates them when our tasks are completed. Let’s create a JavaScript file with the name todo.js in /public/assets/js/. The files contain the following code:

function task_done(id){

  $.get("/done/"+id, function(data) {

    if(data=="OK"){

      $("#"+id).addClass("done");
    }
    
  });
}
function delete_task(id){

  $.get("/delete/"+id, function(data) {

    if(data=="OK"){
      var target = $("#"+id);

      target.hide('slow', function(){ target.remove(); });

    }
    
  });
}


function show_form(form_id){
  
  $("form").hide();

  $('#'+form_id).show("slow");

}
function edit_task(id,title){

  $("#edit_task_id").val(id);

  $("#edit_task_title").val(title);

  show_form('edit_task');
}
$('#add_task').submit(function(event) {
  
  /* stop form from submitting normally */
  event.preventDefault();
  
  var title = $('#task_title').val();
  if(title){
    //ajax post the form
    $.post("/add", {title: title}).done(function(data) {
      
      $('#add_task').hide("slow");
      $("#task_list").append(data);
    });

  }
  else{
    alert("Please give a title to task");
    }
});

$('#edit_task').submit(function() {
  
  /* stop form from submitting normally */
  event.preventDefault();

  var task_id = $('#edit_task_id').val();
  var title = $('#edit_task_title').val();
  var current_title = $("#span_"+task_id).text();
  var new_title = current_title.replace(current_title, title);
  if(title){
    //ajax post the form
    $.post("/update/"+task_id, {title: title}).done(function(data){
      $('#edit_task').hide("slow");
      $("#span_"+task_id).text(new_title);
    });
  }
  else{
    alert("Please give a title to task");
  }
});

Let’s examine the JavaScript file.