Skip to content

Instantly share code, notes, and snippets.

@mutuadavid93

mutuadavid93/M$ETest.js

Created October 13, 2017 10:08
Show Gist options
  • Save mutuadavid93/75d83e50065fdc72351719b41693dce0 to your computer and use it in GitHub Desktop.
Save mutuadavid93/75d83e50065fdc72351719b41693dce0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
M$ETest.js
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<!-- This File Reprrsents M$E Site Page -->
<style type="text/css">
#sideNavBox {DISPLAY: none}
#contentBox {MARGIN-LEFT: 20px}
#suiteBar *, #s4-ribbonrow *
{
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing:content-box;
}
input[type="text"]
{ line-height: 28px; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<section class="container">
<div class="row">
<div class="col-sm-12">
<div id="majorAccordionID"></div>
</div>
</div>
</section>
<!--
<script src="assets/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
-->
<script type="text/javascript">
$(function () {
var queryWIthExpandToList = function() {
// alert("We are in queryWIthExpandToList()");
var calls = jQuery.ajax({
url: _spPageContextInfo.webAbsoluteUrl+"/_api/Web/Lists/getByTitle('Goals')/Items?$select=Title,ID,Description",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
calls.done(function(data, textStatus, jqXHR) {
// console.log(data);
//var goal_holder_content = "";
jQuery.map(data.d.results, function(value, index) {
//console.warn(value);
var goal_accrodion_id = "goal_accrodion_id_"+index.toString(),
parentAccordion = "parentAccordion_id_"+ index.toString(),
accrodion_id = "accrodion_id_"+index.toString(),
accordion_body = "accordion_body_id_"+index.toString();
var goal_holder_content = '<div class="panel-group" id="'+parentAccordion+'"><div class="panel panel-default">'+
'<div class="panel-heading">'+
'<h4 class="panel-title"><a data-toggle="collapse" data-parent="#'+parentAccordion+'" href="#'+accrodion_id+'">'+
'<span><strong>'+value.Title+':</strong> '+value.Description+'</span>'+
'</a></h4>'+
'</div>'+
'<div id="'+accrodion_id+'" class="panel-collapse collapse in">'+
'<div class="panel-body" id="'+accordion_body+'"></div>'+
'</div>'+
'</div></div>';
// $('#accordion1').append(goal_holder_content);
$('#majorAccordionID').append(goal_holder_content).ready(function() {
queryOutcomes(value.ID, accordion_body); // invoke to attach outcomes
});
}); // loop
});
calls.fail(function(jqXHR, textStatus, errorThrown) {
var rsponse = JSON.parse(jqXHR.responseText);
var message = rsponse ? rsponse.error.message.value : textStatus;
alert("Call failed on queryWIthExpandToList(). Error: "+message);
});
}(); //queryWIthExpandToList()
// Outcomes Accordion
var queryOutcomes = function(goalID, accordion_body) {
var calls = jQuery.ajax({
url: _spPageContextInfo.webAbsoluteUrl+"/_api/Web/Lists/getByTitle('Outcomes')/Items?$select=Title,ID,Description,Goal/ID&$expand=Goal/ID&$filter=Goal/ID%20eq%20"+goalID,
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
calls.done(function(data, textStatus, jqXHR) {
console.log(data.d.results.length);
var outcome_holder_content = "";
jQuery.map(data.d.results, function(value, index) {
// console.warn(value);
var outcome_accrodion_id = "outcome_accrodion_id_"+index.toString(),
parentAccordionItems = "parentOutcomeAccordion_id_"+ index.toString(),
realParentAccordion = parentAccordionItems.concat(value.Title.replace(/ /g,'')),
outcome_accrodion_item_id = "outcome_accrodion_item_id_"+index.toString(),
realoutcome_accrodion_item_id = outcome_accrodion_item_id.concat(value.Title.replace(/ /g,''));
outcome_holder_content += '<div class="panel-group" id="'+realParentAccordion+'"><div class="panel panel-default">'+
'<div class="panel-heading">'+
'<h4 class="panel-title"><a data-toggle="collapse" data-parent="#'+realParentAccordion+'" href="#'+realoutcome_accrodion_item_id+'">'+
'<span><strong>'+value.Title+':</strong> '+value.Description+'</span>'+
'</a></h4>'+
'</div>'+
'<div id="'+realoutcome_accrodion_item_id+'" class="panel-collapse collapse in">'+
'<div class="panel-body">'+
'</div>'+
'</div>'+
'</div></div>';
}); // map Loop
// This is the HOOK
var serialModel = "test_test";
$("<div />", {
class: serialModel
}).append(outcome_holder_content).appendTo("#"+accordion_body);
});
calls.fail(function(jqXHR, textStatus, errorThrown) {
var rsponse = JSON.parse(jqXHR.responseText);
var message = rsponse ? rsponse.error.message.value : textStatus;
alert("Call failed on queryOutcomes(). Error: "+message);
});
}; // queryOutcomes
}); // document ready
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment