How to write JavaScript/jQuery for preview pane on SharePoint 2010 site?

Question

I have some JavaScript code added to a Content Editor web part to affect the colors of dates that are appearing in a list. The list is set up with the preview pane design and there are multiple entries that the javascript code needs to be applied to.

The javascript selects the dates and decides if the date needs to be either green, yellow or red based on its relation to today's date. The javascript works correctly on the first entry that appears in the preview pane when loaded but the colors will not change as needed when other entries are selected. What do I need to add/change in my JavaScript to apply the javascript conditioning to EACH entry individually in the list?

Here is what the list looks like on the page:

The list on the page

Here is the JavaScript that is placed inside a Content Editor web part:

<script src="/agencies/wtc/cop/wtctasks/SiteAssets/jquery-1.8.1.min.js"></script><script>

$(document).ready(
function ()
{
       $("div.ms-ppleft table tr td.ms-vb-title").trigger("onfocus");
}
)




//Added by Philip Speroni on April 22, 2016 to apply color styling to dates that are within 30 days of the current date


_spBodyOnLoadFunctionNames.push("FormatDates");

function FormatDates()
{
var contentTable = document.getElementById("MSO_ContentTable");
var tables = contentTable.getElementsByTagName("TABLE");
var formTable;

// find the table we need to work with

for (i = 0; i < tables.length; i++)
{
    if (tables[i].summary.trim() == "Training Records")
    {
        var innerTables = tables[i].getElementsByTagName("TABLE");

        for (j = 0; j < innerTables.length; j++)
        {
            if (innerTables[j].className == "ms-formtable")
            {
                formTable = innerTables[j];
                break;
            }
        }

        break;
    }
}

// if we found the correct table, then find the right cells

if (formTable)
{
    for (i = 0; i < formTable.rows.length; i++)
    {
        var currentRow = formTable.rows[i];

        if (currentRow.cells[0].innerText == "Active Shooter" || currentRow.cells[0].innerText == "AT Level 1" || currentRow.cells[0].innerText == "CTIP" || currentRow.cells[0].innerText == "Cyber Awareness" || currentRow.cells[0].innerText == "HIPAA" || currentRow.cells[0].innerText == "No Fear" || currentRow.cells[0].innerText == "OPSEC" || currentRow.cells[0].innerText == "OPSEC for SmartPhone's & Tablets" || currentRow.cells[0].innerText == "Security Orientation/Refresher" || currentRow.cells[0].innerText == "SHARP" || currentRow.cells[0].innerText == "SHARP - F2F" || currentRow.cells[0].innerText == "Social Networking" || currentRow.cells[0].innerText == "TARP")
        {
            //selects the cell data that needs to be styled
            var cellToStyle = currentRow.cells[1];
            var cellContents = cellToStyle.innerText;

            //creates today's date for comparison to the date in the cell
            var today = new Date();
            var todayParsed = Date.parse(today);

            //creates a date out of the date as a string on the page
            var dateToBeStyled = Date.parse(cellContents);

            //finds the difference in milliseconds between the current date and the date in the cell
            var difference = dateToBeStyled - todayParsed;

            //decides whether to apply styling based on if the dates are within 30 days of each other
            if (difference > 2592000000) {
                cellToStyle.style.color = "#009900";

            }

            if (difference < 2592000000 && difference > 259200000) {
                cellToStyle.style.color = "#cda400";
                cellToStyle.style.fontWeight = "bold";
            }

            if (difference < 259200000) {
                cellToStyle.style.color = "#f00";
                cellToStyle.style.fontWeight = "bold";
            }

        }
    }
}
}</script>

Thanks so much for your help.

Answer 1

One approach might be to set your FormatDates method to fire off whenever the user hovers over an item title.

var titles = document.querySelectorAll(".ms-vb-title");
for(var i = 0, len = titles.length; i < len; i++){
    var method = titles[i].attachEvent ? "attachEvent" : "addEventListener";
    titles[i][method]((titles[i].attachEvent ? "on" : "")+"mouseenter",FormatDates);
}

The above code attaches the FormatDates method to the mouseenter event of each item title (assuming the titles are decorated with the CSS class ms-vb-title).