1

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.

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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