SharePoint List column color code

Please look at the following list.  The color code works but when you paginate, the color coding is gone.  Also, I notice that the tab for my list settings is gone and only appears when I remove the code for the color coding.

http://www.isogunro.com/demos/Lists/IceCreamTrucks/AllItems.aspx

Here's the code:
<script type="text/javascript">
$(document).ready(function() {
  $("td.ms-vb2").filter(function() { return $.inArray( $(this).text(), ["In Progress"]) >= 0; }).css("background-color", "#008000"); 
  $("td.ms-vb2").filter(function() { return $.inArray( $(this).text(), ["Completed"]) >= 0; }).css("background-color", "#FFFF00"); 
  $("td.ms-vb2").filter(function() { return $.inArray( $(this).text(), ["Canceled"]) >= 0; }).css("background-color", "#FFA500"); 
});
</script>

Open in new window

How can I modify this to fix those two issues>
LVL 5
IsaacSharePoint Client Side DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jamie McAllister MVPSharePoint ConsultantCommented:
The code is running on Document.Ready but pagination doesn't fire that event as it's a partial page load. You could try hanging your method call off the pagination button.

Not sure about the missing tab without being able to mess with the code.
0
Julian HansenCommented:
It is not that simple - the pagination click results in an AJAX call back to the server which means even if you trap the click on the pagination button you have to wait for the AJAX to complete and update the table before running the code again.

What you want to do is pick up the ajaxComplete event - not sure if this is going to work in the SP implementation you are using but you can give it a go
function ColourCells()
{
  $('td.ms-vb2:contains("In Progress")').css({backgroundColor: '#008000'});
  $('td.ms-vb2:contains("Completed")').css({backgroundColor: '#FFFF00'});
  $('td.ms-vb2:contains("Canceled")').css({backgroundColor: '#FFA500'});
}

$(function() {
  ColourCells();
  $( document ).ajaxComplete(function() {
    ColourCells();
  });
});

Open in new window

The above works in a JQuery AJAX ($.ajax) implementation.

Failing that a hack would be to use the setTimeout function to execute the ColourCells function after a specified time period.
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
Neither one of those options worked
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
Neither one of those options worked
It is advisable when responding to a post to provide as much information as possible. Saying it did not work does not really help take the process forward. For instance the setTimeout option - depends entirely on implementation - as does the first option. Giving us some code to look at or even a page that has the two options implemented would go a long way to finding a solution.

Basically, saying it does not work does not really give us any way to move forward.

Can you provide some more details on errors , code snippets, links to pages etc.
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
You're right JulianH.  Sorry about that.

Here's the code I implemented

function ColourCells()
{
  $('td.ms-vb2:contains("In Progress")').css({backgroundColor: '#008000'});
  $('td.ms-vb2:contains("Completed")').css({backgroundColor: '#FFFF00'});
  $('td.ms-vb2:contains("Canceled")').css({backgroundColor: '#FFA500'});
}

$(function() {
  ColourCells();
  $( document ).ajaxComplete(function() {
    ColourCells();
  });
});

Open in new window


Here's the site
http://www.isogunro.com/demos/Lists/IceCreamTrucks/AllItems.aspx

I did use the developer tool but couldn't find anything that jumped out.
0
Julian HansenCommented:
Thanks - your code shows you have included my code exactly - however this is a duplicate of what you have on lines 507 or there abouts - the idea was to add the ajax.complete to your existing document ready function.

You said that the setTimeout does not work either - did you try that?

This is a bit more tricky as you would need to add an event handler to the nav buttons - but because these are generated by the script you have to bind them dynamically like this
$(document).ready(function() {
  colorCells();
  $('body').on('click','.ms-promlink-button', function() {
    setTimeout('colorCells()',1000); /* CHANGE TIME AS REQUIRED */
  });
});

Open in new window

This is not ideal as page load time can cause this method not to work - the ideal solution is to trap the AJAX callback and issue the colorCells from there.

What component are you using for the Grid?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
IsaacSharePoint Client Side DeveloperAuthor Commented:
Your solution seemed to work.

>>What component are you using for the Grid?>>
What do you mean?

Can you please explain the major difference between onclick an .on?
I have not been able to find a good explanation online, well, one that I understand.
0
Julian HansenCommented:
onclick is specifically an event handler for the click event.

.on binds an event to an element.

Not sure if that is what you were asking.

.on is the preferred method to use - it allows for events to be handled for dynamic elements. In other words you use .on to bind an event to an element by way of its parent so that if the contents of the parent change the event will still fire as opposed to binding directly to the element itself - which if removed removes the event handler with it.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft SharePoint

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.