OLAS/app/views/local/managers/sCoords/annual_plan_js.blade.php

<script>

$(document).ready(function()
{
  // --------------------------------------------------------------------------
  // Page load
  // --------------------------------------------------------------------------

  // Hide accordion panel contents by default
  $('.panel-group .panel-body').hide();

  $('#outcome-display').parent().hide();

  // --------------------------------------------------------------------------
  // Functions
  // --------------------------------------------------------------------------

  // --------------------------------------------------------------------------
  // Events
  // --------------------------------------------------------------------------

  // When list item is clicked, load corresponding info
  $('.list-group-item').on('click', function()
  {
    var id = $(this).data('outcome-id');
    var name = $(this).data('outcome-name');
    var semester = $(this).data('semester-id');
    $.post(
    "../annual-plan-fetchTYP/{{$program->id}}",
    { id: id,
    semester: semester
  },
    function(json)
    {
        // Retrieve datatable instance
        var table = $('.datatable').DataTable();
        alert(json);
        
        var objectives = json.unique_objective;
        var courses = json.courses;
        var courseHTML = '<ol>';
        var objectiveHTML = '';
        var criteria = json.criteria
        nextLetter ="@";
        counter = 1;
        for(course in courses){
          courseHTML+='<li>'+courses[course].code+' '+courses[course].number+'</li>';
        }
        courseHTML += "</ol>"
        courses = json.courses_objective;
        for(objective in objectives){
          for(course in courses[objectives[objective].id]){
            objectiveHTML += "<strong>"+courses[objectives[objective].id][course].code+" "+courses[objectives[objective].id][course].number +", </strong>";
          }
          
          objectiveHTML += "<ol type ='A' start='"+counter.toString()+"'>";
          objectiveHTML += "<li>"+objectives[objective].text+"</li>";
          objectiveHTML += "</ol>";
          counter++;
        }
    
        for(objective in objectives){
          $divForEach =$('<div/>',{
            'id':'objective #'+objectives[objective]
          });

          $objective = "<h4>"+objectives[objective].text+"</h4>";
          

          $divForEach.append($objective)
          $select = $('<select/>',{
            'class': "selectpicker form-control",
            'name' : "criteriaFor["+objectives[objective].id+"]",
            'data-live-search':'true',
            'id': 'criteriaFor'+objectives[objective].id+'_0'

          })
          options = ''
          for (criterion in criteria[objectives[objective].id]){
            options += "<option value='"+criteria[objectives[objective].id][criterion].id+"'>"+criteria[objectives[objective].id][criterion].name+"</option>";
          }
          $select.append(options);
          $divForEach.append($select);
          $divForEach.appendTo('#theChange');
          $select.selectpicker('refresh');
          
        }
        
        $('#outcome-display').parent().show();
        $('.no-outcome').parent().hide();

        //Display title and definition
        $('#outcome-display .panel-title').html(name);
     

        //Empty table
        table.clear();

        // Add new criteria
        if(courses)
        {
          $('table').show();
          
          
              table.row.add([
                courseHTML,
                objectiveHTML
              ]);
        
        }
        else
        {
          $('table').hide();
        }

        // Update display
        table.draw();
    },
    'json'
    );

  })
});

function addObjectiveTest() {
  selectObj = document.getElementById('objective_0').innerHTML;
  var $select = $('<select/>', {
      'class': "selectpicker form-control",
      'name': "objective[]",
      'data-live-search': 'true',
      'id': 'objective_' + counterObj.toString()

  });
  var $div = $('<div/>', {
      'id': 'objectiveForm' + counterObj.toString(),
      'class': 'form-group col-md-11'
  });
  var $divForButton = $('<div/>', {
      'class': 'col-md-1',
      'id': 'closeObj' + counterObj.toString()

  });
  var $button = $('<button/>', {
      'type': 'button',
      'class': 'btn btn-primary',
      'onclick': 'deleteObjective("objectiveForm' + counterObj.toString() + '", "closeObj' + counterObj.toString() + '")'
  });

  $button.append('X');
  $divForButton.append($button);

  $div.appendTo('#objectiveGroup')
  $select.append(selectObj);

  $select.appendTo('#objectiveForm' + counterObj.toString()).selectpicker('refresh');
  counterObj += 1;

  $divForButton.appendTo('#objectiveGroup');
  $('#counterObjective').val(counterObj)
}

</script>