2

After some calculation I am trying to display the results in a table. I tried using .text() and .html() method but none of them working fine on Chrome (FF is perfectly fine).

1) .html() - Doesn't display anything on Chrome 2) .text() - Returns false string

Here is my JS function.

populateHomeGrid: function(categories, day) {

        var eventsForTimer = [];

        $.each(categories, function(index, value) {

            // categoryId -> {raceNumber : event, ...}
            var categoryName = value.name, categoryId = value.categoryId,
                mapOfEvents = [], maxNumberOfEvents = 0;

            // subcategories
            $.each(value.categories, function(index, category) {

                var mapOfOneCategory = {}, mapSize = 0;
                $.each(category.events, function(index, event) {
                    var raceNumber = event.raceNumber;
                    mapOfOneCategory[raceNumber] = event;
                    mapSize++;
                });
                if (mapSize > maxNumberOfEvents) maxNumberOfEvents = mapSize;
                mapOfEvents.push(mapOfOneCategory);
            })

            maxNumberOfEvents = maxNumberOfEvents;

            // drawing main category
            var tableId = "home_grid_" + day + "_" + categoryId,
                table = $('<table id="' + tableId + '" cellspacing="0" cellpadding="0" width="100%" class="racing_tables" />')
                    .appendTo($('#' + day))

            var tr = $('<tr class="gray"/>')
                .appendTo(table)
                .append($('<td valign="middle" width="20%"/>')
                    .append($('<h2/>').html(categoryName)))

            for (var i = 1; i <= maxNumberOfEvents; i ++) {
                tr.append($('<td valign="middle" />')
                    .append($('<p/>').html(i)))
            }

            // drawing sub categories
            $.each(mapOfEvents, function(index, event) {

                // Drawing row
                var firstRow = true, categoryTr;

                for (var i = 1; i <= maxNumberOfEvents; i++) {

                    if (firstRow) {
                        categoryTr = $('<tr class="white"/>').appendTo(table)
                        var categoryHolder = $('<td/>').appendTo(categoryTr),
                            categoryName = $('<p/>').appendTo(categoryHolder)
                        firstRow = false;
                    }

                    if (typeof event[i] != 'undefined') {

                        categoryName.html(event[i].categoryName);
                        var categoryId = event[i].categoryId;

                        (function(i) {
                            var a = $('<a/>')
                                .click(function() {racingNavigation.showLocationAndRaceNumber(categoryId, i)})
                                .data('event', event[i])
                                .appendTo($('<td />')
                                    .appendTo(categoryTr))

                            if (racingNavigation.updateHomeCellInfo(a)) eventsForTimer.push(a);
                        })(i)
                    }
                    else {
                        categoryTr.append($('<td />'))
                    }
                }
            })
        });

        // Setting the counter to update the closing events
        var intervalId = setInterval(function() {
            $.each(eventsForTimer, function (index, value) {
                if (racingNavigation.updateHomeCellInfo(value) == null) {
                    window.clearInterval(intervalId);
                }
            })
        }, 5000);
        intervalIdsForUpdatingHomeGrid.push(intervalId);
    },

Function call to racingNavigation.updateHomeCellInfo

updateHomeCellInfo: function(a) {
        var info = '', redClass = false,
            event = $(a).data('event');

        // Killing the interval
        if (typeof event == 'undefined') return null;

        var timeUtc = event.timeUtc,
            status = event.status,
            neededForTimer = false;

        if (status == 'expired' || status == 'telephone') info = closed;
        else if (date.hourDifference(timeUtc) < 1 && date.minDifference(timeUtc) < 1  && date.secDifference(timeUtc) < 2 && (status == 'live' || status == 'run' )) info = closed;
        else if (event.result != null) {
            var position = 1;
            $.each(event.result.winPlaceResults, function() {
                var finishingPosition = this.finishingPosition,
                    selectionNumber = this.selectionNumber;
                if (parseInt(finishingPosition) == position) {
                    info += selectionNumber.toString();
                    position++;
                }
                if (position != 4) info += ', ';
                if (position == 4) return false;
            })
        }
        else {
            neededForTimer = true;
            if (date.hourDifference(timeUtc) > 0) {
                info = date.formatTime(new Date(timeUtc));
            }
            else {
                info = date.minDifference(timeUtc);
                if (info <= 5) redClass = true;
                info = date.minDifference(timeUtc) + ' ' + min;
            }
        }

        if (redClass) $(a).parent().addClass('red')
        else $(a).parent().removeClass('red');
        $(a).html(info);

        return neededForTimer;
    },

At the end of my second function I am displaying the result $(a).html(info);
where as info contains different element based on the calculations.
Default info is set to CLOSED which is defined in another file as var closed = "CLOSED".

I am expecting the table should display string CLOSED when all the different conditions are invalid.

Both .text() and .html() method works fine on FF but not on Chrome as explained in the beginning.

9
  • 1
    could you create a fiddle as my work blocks betting sites
    – Pete
    May 2, 2014 at 12:25
  • @Pete It would be really challenging for me to recreate the same scenario in Fiddle for my problem. I would appreciate If you happen to have a look after you work.
    – 0xburned
    May 2, 2014 at 13:44
  • what happens if you use a.html rather than $(a) as you are passing through a jquery object so no need to wrap it again
    – Pete
    May 2, 2014 at 13:47
  • @Pete No difference. Result is the same. Output is not displayed on Chrome.
    – 0xburned
    May 2, 2014 at 14:01
  • 1
    Link full jQuery source (instead of minified script). Use Chrome's Tools->Developer Tools + breakpoint + watches + F11 (step inside) - to find out exactly what is in your variables. Without jsFiddle no better answer comes to my mind. You can do the same in FireFox and compare where is the difference
    – xmojmr
    May 29, 2014 at 11:52

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.