Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I am trying to dynamically build accordion from list of items returned using JavaScript, jQuery and jQuery UI. Below is my code:

<div>
Search List <input type="text" id="autobox"><br>
<select id="Building"> <option value="null"></option><option value="HQ">Headquarters Building</option> <option value="DE">DE</option><option value="GV">Gv</option><option value="Ts">Ts</option></select> 
<select id="Fl"> <option></option><option>1</option> <option value="F2">2</option><option value="F3">3</option><option value="F4">4</option></select> 
<select id="size"> <option></option><option>Small(1-4)</option> <option value="Medium">Medium(5-8)</option> <option value="Large">Large(>8)</option></select> 
<div id="button"><input onclick="retrieveListItems()" type="button" value="Filter List!"/></div>
</div>
<div id="accordion">
</div>


<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<script type="text/javascript">

jQuery(function() {
jQuery( "#accordion" ).accordion();
  });

var siteUrl = '/'; 

ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");



 function retrieveListItems() {

 //create global variables of ids of selected dropdown list value
 window.BFB=document.getElementById("Building");
 window.BF= window.BFB.options[window.BFB.selectedIndex].text;


window.Fl=document.getElementById("Fl");
window.Flr= window.Fl.options[window.Fl.selectedIndex].text;



window.S=document.getElementById("size");
window.Si= window.S.options[window.S.selectedIndex].text;


var clientContext = new SP.ClientContext(siteUrl);

var oList = clientContext.get_web().get_lists().getByTitle('Rooms');

var camlQuery = new SP.CamlQuery(); //instantiate query obj

//display based on filters

if(window.BF =='' && window.Flr == '' && window.Si ==''){

camlQuery.set_viewXml('<View><Query><OrderBy><FieldRef Name="Title"/></OrderBy> </Query></View>'); 


}else{

    camlQuery.set_viewXml('<View><Query><Where><And><And><Eq><FieldRef Name="Building" /><Value Type="Choice">'+ window.BF +'</Value></Eq><Eq><FieldRef Name="Floor" /><Value Type="Choice">'+window.Flr+'</Value></Eq></And><Eq><FieldRef Name="General_x0020_Size" /><Value Type="Calculated">'+window.Si+'</Value></Eq></And></Where></Query></View>');
} 

this.collListItem = oList.getItems(camlQuery);


clientContext.load(collListItem);


clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));




}

function onQuerySucceeded(sender, args) {

var listItemInfo = '';

var listItemEnumerator = collListItem.getEnumerator();

while (listItemEnumerator.moveNext()) {
     var oListItem = listItemEnumerator.get_current();


var h3 = '<h3>' + oListItem.get_item('Title') + '</h3>';
    var div = '<div>' + oListItem.get_item('Floor') + '</div>';
    var content = $(h3 + div);
    content.appendTo("#accordion").show();

//alert(header);

}


$("#accordion").accordion();

    //alert (count);        
}


function onQueryFailed(sender, args) {

alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}


jQuery( document ).ready(function() {
    //alert( "document loaded" );
});



</script>

The output is not displayed as an Accordion but as a normal html output. Does any one have any suggestions to how I can get the accordion displaying like expected?

Thanks.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

Found the solution. All it took was replacing this bit of code:

var h3 = '<h3>' + oListItem.get_item('Title') + '</h3>';
var div = '<div>' + oListItem.get_item('Floor') + '</div>';
var content = $(h3 + div);
content.appendTo("#accordion").show();

with this bit of code

var newDiv = "<h3> " +oListItem.get_item('Title').toString() +"  </h3><div> <p> Building  :  " +oListItem.get_item('Building').toString()+" </p> </br>
<p> Floor :" +oListItem.get_item('Floor').toString()+" </p></br><p> Floor :"  +oListItem.get_item('Floor').toString()+" </p></br></div>";
    $("#accordion").append(newDiv)
    $("#accordion").accordion("refresh"); 

Thanks to this stackoverflow question

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.