Menu
Hello, I realize putting a bunch of code out here is not ideal and frowned upon, I read the announcement this morning ?
However, I needed to put it all because I need comments to all of it.
This is producing an accordion effect on a SharePoint List. I didn’t write the code but I’m using it and now I need to change the style of the accordion but I don’t understand what each piece is or what it is doing. Is there anyway someone could put comments on the end of the lines to say this is doing xyz. If this is to much I understand and apologize for the post. This is the first time I have implemented any JavaScript and I haven’t grasped it yet so a breakdown would be very helpful so I could try and move forward and make changes to the style. Thank you!
[CODE][code=php](function () {
JQUERY_SCRIPT = “https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.min.js”;
JQUERYUI_SCRIPT = “https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.js”;
JQUERYUI_CSS = “//code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css”;
function OnAccordionViewPostRender(renderCtx) {
$(‘#accordionFAQ’).accordion({
collapsible: true
});
}
function OnAccordionViewPreRender(renderCtx) {
}
function RenderAccordionViewBodyTemplate(renderCtx) {
var listData = renderCtx.ListData;
if (renderCtx.Templates.Body == ”) {
return RenderViewTemplate(renderCtx);
}
var accordionHtml = ”;
accordionHtml = ‘<div id=”accordionFAQ”>’;
for (var idx in listData.Row) {
var listItem = listData.Row[idx];
accordionHtml += ‘<h3>’;
accordionHtml += listItem.Title;
accordionHtml += ‘</h3>’;
accordionHtml += ‘<div>’;
accordionHtml += listItem.Answer;
accordionHtml += ‘</div>’;
}
accordionHtml += ‘</div>’;
return accordionHtml;
}
function registerAccordionViewTemplate() {
var accordionViewContext = {};
//accordionViewContext.BaseViewID = ‘Accordion’;
accordionViewContext.Templates = {};
accordionViewContext.Templates.View = RenderAccordionViewBodyTemplate;
accordionViewContext.OnPreRender = OnAccordionViewPreRender;
accordionViewContext.OnPostRender = OnAccordionViewPostRender;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(accordionViewContext);
}
loadjQueryScript = function () {
loadScript(JQUERY_SCRIPT, loadjQueryUIScript)
}
loadjQueryUIScript = function () {
loadScript(JQUERYUI_SCRIPT, registerAccordionViewTemplate)
}
function loadScript(scriptUrl, callback)
{
var head = document.getElementsByTagName(‘head’)[0];
var script = document.createElement(‘script’);
script.src = scriptUrl;
var done = false;
script.onload = script.onreadystatechange = function () {
if (!done && (!this.readyState || this.readyState == “loaded” || this.readyState == “complete”)) {
done = true;
callback();
}
};
head.appendChild(script);
}
function loadCss(url) {
var link = document.createElement(‘link’);
link.href = url;
link.rel = ‘stylesheet’;
document.getElementsByTagName(‘head’)[0].appendChild(link);
}
//****
//**** main flow
//****
debugger;
loadCss(JQUERYUI_CSS);
ExecuteOrDelayUntilScriptLoaded(loadjQueryScript, ‘clienttemplates.js’)
})();
[/CODE]