show an divtag when updating an list in sharepoint

Jan 18, 2011 at 1:49 PM
Edited Jan 18, 2011 at 1:50 PM

I am using the spservices jquery solution for Sharepoint. Version 0.5.8
I have a question related to the spservices jquery library and jquery self.

On a page a user can create item in an list by copying them from another list. While updating the list an progress indicator must be shown.

The progress indicator In code it looks like this:

 

<div id="ProgressControl">

  <img id="progress_image" style="margin-left:50px" src="/_layouts/images/ewr133.gif" width="34px" height="34px">

  <label id="copytext">adding items ....</label>

</div>

 

 The function for adding the items to another looks like this:

 

function addListitems()
{    $().SPServices({
        operation: "GetListItems",
        listName: templateList,
        async: false,
        CAMLViewFields: "<ViewFields>" +
                            "<FieldRef Name='templatefield1' />" +
                            "<FieldRef Name='templatefield2' />" +
                        "</ViewFields>",
        completefunc: function (xData, Status) {
        var itemCount = $(xData.responseXML).find("rs\\:data").attr("ItemCount");
            $(xData.responseXML).find("[nodeName=z:row]").each(function() {
                           .......action add items to another list .....
                }
             });
        }
    });
}

 Calling the function is done via :

 

 $("#copyTemplateItems").click(function () {

       //show progress indicator
       $("#ProgressControl").show()
       addListitems();
}

 

The problem is that the indicator is not shown at all.
When I change async from false to true it is shown.

But there is no animation (I use the rotating indicator of sharepoint).

The $("#ProgressControl").show() is standard jquery, I do not understand why the divtag is not shown, this is because of my lack of knowledge of jquery, but maybe anyone can help me here

When I put the next line in comment the progress indicactor is shown correctly.

 

$("#ProgressControl").show()
//updateListitems();

PS it takes about 50 seconds to copy the list, so showing an progress indicator prevents users closing the webpage

 

Can anyone  help me with this problem.?

knd regards Manfred

Coordinator
Jan 19, 2011 at 4:36 AM

You're missing a semi-colon at the end of this line:

 $("#ProgressControl").show()

That might be it!

M.

Jan 19, 2011 at 7:29 AM

I checked the code, and the semi-colon is there.

I also tried

$("#ProgressControl").toggle()

but this also did not work

Manfred

Coordinator
Jan 20, 2011 at 12:28 PM

Manfred:

I'm going to have to test this on my end to see if I can reproduce it. I'll try to get to it this weekend...

M.

Jan 20, 2011 at 2:41 PM

Hi Manfred,

Are you using IE as your browser? While IE is working, the whole page freezes.
You can test this by hovering your mouse over e.g. menu items or links on the same page and you won't see the mouse pointer change and you can't click on one of the menu items as long as other code is running.

When displaying the page with the animated gif in FireFox the animation will show and play, but all the menu items on the page are frozen as well.

I guess it's because browsers are single threaded.

I tried some code by using setTimeout and tried to reload the image, but it didn't work out for me.

I hope this helps you getting in the right direction.

Anita

Jan 20, 2011 at 3:02 PM

Hi Anita,

 

thnx for the reply.

I am using IE 8

I googled for freezing animated gifs, and found the same answers you are giving.

So I understand now this issue will not be solved.

But my major issue is the fact that I do not See the gif at all.

1st command is: show the div (with the gif and the text)

2nd command is: execute a function which will do some stuff.

I should expect that the 1st command is processed and the gif is shown.

then the 2nd should be processed.

the only way this works as I expects is when I tell  $().SPServices to do this with the parm async = true.

I do not understand why the divtag is not shown at all with the parm async = false

 

Grt Manfred

Jan 20, 2011 at 3:30 PM

Hi Manfred,

Are you hiding the gif anywhere in the code? If that's true, maybe that's too early in the process and that's why it seems not to show up.

Anita

Jan 21, 2011 at 9:56 AM

Hi Anita

as you can see in my original post:

<div id="ProgressControl">

  <img id="progress_image" style="margin-left:50px" src="/_layouts/images/ewr133.gif" width="34px" height="34px">

  <label id="copytext">adding items ....</label>

</div>

I only use show or hide the divtag.

 

 

Jan 21, 2011 at 10:11 AM

Hi Manfred,

Yes, I'm sorry. I meant the div tag.
Maybe you can try not to hide it in code and check if it shows up after all. Just a test.

Anita

Jan 21, 2011 at 11:43 AM

Hi Manfred,

Maybe this helps:

        $("#copyTemplateItems").click(function () {
            $("#ProgressControl").show(function () {
                addListitems();
            });
        });

Anita

Jan 21, 2011 at 2:56 PM

Hi Anita,

 

 

Great !! youre latest suggestion solved the problem. :) :) :)

 

thnx for your help and support!

 

ps

window.setTimeout(addListitems, 500);

also solves it

grt Manfred

Coordinator
Jan 21, 2011 at 3:13 PM

Awesome that you guys worked this through. Thanks, Anita!

M.

Jan 21, 2011 at 3:36 PM

No problem, glad I could help!

Anita