0

I read a list in SharePoint 2013 by using a JavaScript and put the entries in a Accordion structure. I get the values but the Accordion effect isn't working. Why? If I try it without my List reading script it is working fine.

<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function (){
 $('#accordion').accordion();
});
</script>

<script type="text/javascript">

SP.SOD.executeOrDelayUntilScriptLoaded(connectToList, 'sp.js');  
var collListItem;  

function connectToList() {  
   var clientContext = new SP.ClientContext.get_current(); 
   var oList = clientContext.get_web().get_lists().getByTitle('Visitors');
   var camlQuery = new SP.CamlQuery();  

   camlQuery.set_viewXml('<View></View>');  
   this.collListItem = oList.getItems(camlQuery);  

   clientContext.load(collListItem);  

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

 function onQuerySucceeded()   
   {
     var a_html = "";
     var listItemEnumerator = collListItem.getEnumerator(); 

     while (listItemEnumerator.moveNext()) {  
       oListItem = listItemEnumerator.get_current();  
       a_html += '<h3>' + oListItem.get_item('Title') + '</h3>';
       a_html += '<div><p>' + oListItem.get_item('Answer') + '</p></div>';
     } 

     document.getElementById("accordion").innerHTML = a_html;
 }

 function onQueryFailed()  
   {  
     console.log("error");  
     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
   } 

</script> 

<div id="accordion"></div>

1

Most likely it is because you are setting up the accordion functionality with $('#accordion').accordion() before all the content is there.

It takes some time (not much, but some) to retrieve the list items and loop through them and insert your <h3> and <div> elements, and you are setting up the accordion before it is ready.

Try removing the $(document).ready() section and add $('#accordion').accordion() at the end of your onQuerySucceeded function:

    document.getElementById("accordion").innerHTML = a_html;
    $('#accordion').accordion();
}

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.