JavaScript

<script data-require="angular-translate@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>

angular.module("myApp",['pascalprecht.translate']);

today = new Date();
// you don't need the else, it isn't doing anything
if (today.getHours() >= 19) { today.setDate(today.getDate() + 1); }
else { today.setDate(today.getDate() + 0); }
var dateString = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();

// first off you have two loadFormattedWOD functions defined above so which one is your code going to use?
// function names have to be unique
if (loadFormattedWOD("#wodbody", "myapikey", dateString, "MYGYM", "CrossFit") == null) {
    // loadFormattedWOD makes an asynchronous call to the api.  What this means is that the call happens
    // "in the background", so one the ajax call is made the code does not wait for the response to come
    // back so your function exists immediately, it does not wait for "success" to be called so your
    // function always returns null so this "if" will always be true.

    // you call retryWithToday upon a failure but what if the date wasn't amended due to the hour?
    // in that case you're actually using yesterday.
    retryWithToday();
}

// don't embed functions mid-code
function retryWithToday() {
    today.setDate(today.getDate() - 1);
    var dateString = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
    loadFormattedWOD("#wodbody", "myapikey", dateString, "MYGYM", "CrossFit");
}

// you call the function here again
loadFormattedWOD("#wodbody", "myapikey", dateString, "MYGYM", "CrossFit");

// only one function, remove the other one
function loadFormattedWOD(selector, apiKey, date, location, program, callback) {
    $.ajax({
        url: 'https://app.wodify.com/API/WODs_v1.aspx',
        data: {
            apiKey: apiKey,
            date: date,
            location: location,
            program: program,
            type: "json"
        },
        dataType: "json",
        success: function (data) {
            try {
                if (data && data.RecordList.APIWod.FormattedWOD) {
                    $(selector).html(data.RecordList.APIWod.FormattedWOD);
                    console.log('worked');
                }
                else {
                    if (callback) callback();
                }
            } catch (err) {
                if (callback) callback();
            }
        }
    });
}

function retry() {
    console.log('In retry');
    // we'll only get here if the ajax call returns a failure
    var today = new Date();

    // if it is after 7 try for today's date instead
    if (today.getHours() >= 19) {
        var dateString = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
        loadFormattedWOD("#wodbody", "myapikey", dateString, "MYGYM", "CrossFit", function () {
            // here I'm passing an in-line function as the callback so this
            // code will get called on failure
            console.log("failed again");
            // update the page to say something like "Try again later"
        })
    }
    else {
        console.log("didn't retry");
        // update the page to say something like "Try again later"
    }
}

today = new Date();
if (today.getHours() >= 19) { today.setDate(today.getDate() + 1); }

var dateString = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();

// pass the "retry" function as the callback.
loadFormattedWOD("#wodbody", "myapikey", dateString, "MYGYM", "CrossFit", retry)

// loadFormattedWOD will now update the html on success, and on failure it will call
// retry and that is where you handle the failure case

<div id="wodbody"></div>

.wod_header {
    font-size: 1.2em;
    font-style: italic;
}

.wod_comment {
    font-size:0.9em;
}

.ListRecords {

}

.section_title {
    font-weight:bold;
    font-size:1.2em;
}

.component_show_wrapper {
    margin: 10px;
}

.component_name {
    color:#0000ff;
}

.component_wrapper {
    font-style:italic;
}

.component_comment {
    color:#aaaaaa;
    font-size:0.9em;
    font-style:normal;
}

Member 12869945 wrote:

A image screenshot of what I'm looking for is attached.