Update a DIV

Apr 28, 2011 at 9:11 PM

Is it possible to update a DIV during the processing of a list of items in an SPSerivces call.  I am trying to display the ID's as they are processed on the page.  I have found some suggestions for how do this with an interval but it does not refresh until the process is complete.

 

Thanks,

Mark

Coordinator
Apr 28, 2011 at 9:59 PM

Mark:

Can you post the code that you have so far? Easier to start from that than try to make something up.

M.

Apr 28, 2011 at 11:31 PM

Sure, here is the Javascript I am using.  Basically, it is a master detail of 2 SP lists that I am rolling up the cost with.

function UpdateJobCost()
{
   var itemCount=0;
   var itemCount1=0;
   var theItemID;
   var totalCost=0;
   
//---------------------------------------------------------------------------------
// I TRIED THIS TOO
//---------------------------------------------------------------------------------
//   var auto_refresh = setInterval(
//      function()
//      {
//         $("#PleaseWaitHtml").html("Processing Job " + theItemID + " . . . Please Wait"); 
//      }, 100);
//---------------------------------------------------------------------------------

   
     var myFlds = '<ViewFields>' +
                  '<FieldRef Name="ID" />' +
                  '<FieldRef Name="Time_x0020_Spent" />' +
                  '<FieldRef Name="Labor_x0020_Rate" />' +
                  '<FieldRef Name="Material_x0020_Cost" />' +
                  '<FieldRef Name="Job_x0020_ID" />' +
               '</ViewFields>';

   $().SPServices({
   operation: "GetListItems",
   listName: "Art Department Jobs",
   CAMLQuery: '<Query><Where><geq><FieldRef Name="ID"/><Value Type="Number">' + 0 + '</Value></geq></Where></Query>',
   async: false,
   completefunc: function (xData, Status) {
     $(xData.responseXML).find("[nodeName=z:row]").each(function() {
      theItemID= $(this).attr("ows_ID");

      totalCost=0;

$("#PleaseWaitHtml").html("Processing Job " + theItemID + " . . . Please Wait"); 

      $().SPServices({
      operation: "GetListItems",
      listName: "Art Department Time Record",
      CAMLQuery: '<Query><Where><Eq><FieldRef Name="Job_x0020_ID"/><Value Type="Number">' + theItemID + '</Value></Eq></Where></Query>',
      CAMLViewFields: myFlds,
      async: false,
      completefunc: function (xData, Status) {
        $(xData.responseXML).find("[nodeName=z:row]").each(function() {
         itemCount = itemCount + 1;
         totalCost = totalCost +
                     parseFloat($(this).attr("ows_Time_x0020_Spent")) * parseFloat($(this).attr("ows_Labor_x0020_Rate"));
         if ($(this).attr("ows_Material_x0020_Cost") != undefined)
             totalCost = totalCost + parseFloat($(this).attr("ows_Material_x0020_Cost"));

        });
       }
     });
     $().SPServices({
         operation: "UpdateListItems",
         listName: 'Art Department Jobs',
         ID: theItemID,
         valuepairs: [['Job_x0020_Cost', totalCost]],
         async: false,
         completefunc: function (xData, Status) {
        }
     });


     });
    }
  });

}

Coordinator
Apr 30, 2011 at 5:46 PM

Mark:

Frankly I'm not sure, but I've asked several hotshots to take a look for you. What about trying this:

      $("#PleaseWaitHtml").html("Processing Job " + theItemID + " . . . Please Wait").SPServices({
      operation: "GetListItems",
      listName: "Art Department Time Record",
      CAMLQuery: '<Query><Where><Eq><FieldRef Name="Job_x0020_ID"/><Value Type="Number">' + theItemID + '</Value></Eq></Where></Query>',
      CAMLViewFields: myFlds,
      async: false,
...

M.

May 1, 2011 at 10:28 AM

Hi Mark,

It certainly is possible to update text on the screen when processing items, and the code suggested by sympmarc does the trick.
I made a small test with the following code, with the same intentions as yours:
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Cities",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
    completefunc: function (xData, Status) {
        $(xData.responseXML).find("[nodeName='z:row']").each(function () {
            var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
            $("#results").html("Processing " + liHtml).SPServices({
                operation: "GetListItems",
                async: false,
                listName: "LargeList",
                CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
                completefunc: function (xData, Status) {
                           
                }
            });
        });
    }
});

In the 'LargeList' I use in the second part are about 2500 items. If the process here executes too fast, you will not see the text on your screen change.

Let me know if this works for you too.

Regards, Anita

May 1, 2011 at 3:56 PM

I am not sure if the question is processing multiple items or just 1 item. If you are processing one item as you show in the code, most likely as Anita says, you will never see your item processing message. If you are trying to process multiple items, you may have to setup a loop to do it. Sometimes it just executes really fast and is hard to see...

Coordinator
May 1, 2011 at 9:18 PM

Thanks Anita and Dan. One more note for Mark: Be sure to enclose literals in selectors in quotes, like:

$(xData.responseXML).find("[nodeName='z:row']")

In jQuery 1.5+, this is required.

M.

May 2, 2011 at 3:12 AM

Thanks, I will give this a try. I did come up with my own brute force method. I determined that the DIV will not update until the javascript has all processed so I loaded the master list of items in an array and then used a timer event to loop through one at a time and update the DIV.