<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>