1

I am working on an enterprise wiki site collection inside sharepoint server 2013. and inside the Home page i added the following code snippet, to dynamically build a summary table using javascript/api calls:-

<style unselectable="on">
.table tbody tr:hover {
background-color:#eeeeea;
cursor:pointer;
}

.table th, .table td {
padding:0.5em;
}

.table tbody tr td, .table tbody tr th {
background-color:transparent;
}
</style>
<div style="padding: 5px 10px; border: 1px solid grey; width: 100%; margin-left: 20%;" unselectable="on">
<div style="text-align: left; font-size: 18px;" unselectable="on"><b unselectable="on">Plan Summary</b></div>
<div id="inserthere" style="margin-left: 50%;" unselectable="on"></div>
&nbsp;</div>

then inside my enterprise wiki page layout i added reference to the javaScript file which is going to build the table (ofcourse i do not want to render the script on edit mode that why i wrap it with <PublishingWebControls:EditModePanel PageDisplayMode="Display" runat="server"> ):-

  <PublishingWebControls:EditModePanel PageDisplayMode="Display" runat="server">
  <script src="/kb/Business/Resources/customSummary.js" type="text/javascript"></script>
  </PublishingWebControls:EditModePanel>
</asp:Content>

finally here is the customSummary.js script:-

$(document).ready(function() {
function appendinit(){
alert("first");
var htmlinit = "";
htmlinit = "<image  id= 'customloader' src= '/resources/ajax-loader.gif'></image>";
$("#inserthere").after(htmlinit+"");
return "done";
}
function getCurrentMainCategoryID(){
alert("third");
var results = "";
var html="";
html="<table class='table' style='border-collapse:collapse'><thead><tr><th style='text-align:left'></th><th style='text-align:right'>Pages</th></tr></thead><tbody>";
    var url = "/kb/Business/_api/web/lists/getbytitle('MainCategory')/items?$select=Title&$orderby=MainCategoryOrder asc";

    $.ajax({
     url: url,
     method: "GET",
     async: false,
     headers: { "Accept": "application/json; odata=verbose" },
     success: function (data) {
        if(data.d.results.length>0){


            results = data.d.results;
            for(var j2=0;j2<results.length;j2++)
            {


            var currentMainCatTitle = results[j2].Title;

    $.ajax({
     url: "/kb/Business/_api/web/lists/getbytitle('pages')/items??$select=Title,MainCategory&$filter=MainCategory eq " + "'" + currentMainCatTitle +"'" ,
     method: "GET",
     async: false,
     headers: { "Accept": "application/json; odata=verbose" },
     success: function (data) {
        if(data.d.results.length>0){
            html=html+"<tr><td>"
            + "</td>"
            + "<td style='text-align:right'>"+data.d.results.length+"</td></tr>";

        }

     },
     error: function (data) {   

     }
    });
            }


        }

     },
     error: function (data) {


     }
    });
$("#customloader").hide();
$("#inserthere").after(html+"</tbody></table>");

    return results;
}

var test = appendinit();
alert("second");
getCurrentMainCategoryID();
$("#customloader").hide();
});

now my initial plan was:-

  1. Click on the Home page >> then the the loading image will be shown.
  2. need to wait for a couple of seconds.
  3. do the api calls.
  4. hide the loading image.
  5. build the dynamic table.

but now i am getting this behavioure (i added the alerts to try to understand the execution sequence):-

  1. I will get alert (First)
  2. I will get alert (Second)
  3. I will get alert (Third)
  4. wait for a couple of seconds...
  5. then after that the loading image will appear for milliseconds then get hide at the same time the table being rendered..

so not sure why i am getting this behavioure ? i mean the loading image should first get rendered,, after that i have to wait for the table to get dynamically drawn ...

0

(probably) the use of async:false messes up the DOM redraw event queue.

Question: Why are you using an a sync call??

So programmers whack in

window.setTimeout(function(),0);

to force a DOM update at the right time

Long answer: read the second answer!

https://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful


or

You created an empty DIV for your content:

<div id="inserthere" style="margin-left: 50%;" unselectable="on"></div>

What would happen if you delete all the loader related script and put your loading image in there?

  • but i am not using async calls ?? i am using sync calls since inside the 2 ajax calls i am specifying async:false.. also if i remove this async:false then even the html table will not be shown – john Gu Mar 5 '17 at 0:08
  • One typo..yes you are using sync calls (by setting async:false) You have to apply Promises to write the HTML after all async operations are done: htmlgoodies.com/beyond/javascript/… – Danny '365CSI' Engelman Mar 5 '17 at 8:18

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.