How to execute a javascript/jquery function bound to an element on page load?

Question

I'm having a hard time on this one, and I cannot find any relevant questions (although I think I have used quite a lot of relevant searchterms (ref: the title)... So here goes:

<td class="noprint">
 <a class="ui-button isbillable" onclick="switchBillable($(this))" value="1">Aanrekenbaar?</a>
 <a class="ui-button isbillable" onclick="switchBillable($(this))" value="2">Aanrekenbaar?</a>
 <a class="ui-button isbillable" onclick="switchBillable($(this))" value="...">Aanrekenbaar?</a>
</td>

I want to execute an AJAX-request (PHP) upon pageload giving the ui-buttons a specific color depending if the AJAX-request returns TRUE or FALSE. This code however is never executed (tested with an 'alert()'):

$(document).ready(function(){
    $( ".isbillable" ).load( function() {
        var prestId = $(this).val();
        $.ajax({
            url: "ajax/check_billable.php",
            data: { q: prestId },
            success: function () {
                if (response == true) {
                    $(this).removeClass('isbillable');
                    $(this).addClass('billable');
                }else{
                    $(this).removeClass('isbillable');
                    $(this).addClass('notbillable');
                }
            }
        });
    }).button({
        icons: { primary: "ui-icon-help" },
        text: false
    });
    $( ".billable" ).button({
        icons: { primary: "ui-icon-notice" },
        text: false
    });
    $( ".notbillable" ).button({
        icons: { primary: "ui-icon-check" },
        text: false
    });
});

Using Firebug I cannot detect any AJAX calls, so this code is never executed - I have tried with load(), on('load',,), bind()

Answer 1

There's no load() event on <a> elements. If you want something to happen when the page is loaded, just put it at the toplevel of your document.ready handler.

You also need to use the context: option to make $(this) available in the callback.

$(document).ready(function(){
    $(".isbillable").each(function() {
        var prestId = $(this).val();
        $.ajax({
            url: "ajax/check_billable.php",
            data: { q: prestId },
            context: this,
            success: function () {
                if (response == true) {
                    $(this).removeClass('isbillable').addClass('billable');
                }else{
                    $(this).removeClass('isbillable').addClass('notbillable');
                }
            }
        });
    }).button({
        icons: { primary: "ui-icon-help" },
        text: false
    });
    $( ".billable" ).button({
        icons: { primary: "ui-icon-notice" },
        text: false
    });
    $( ".notbillable" ).button({
        icons: { primary: "ui-icon-check" },
        text: false
    });
});

Answer 2

try with

$(window).load(function(){
    $( ".isbillable" ).load( function() {
        var prestId = $(this).val();
        $.ajax({
            url: "ajax/check_billable.php",
            data: { q: prestId },
            success: function () {
                if (response == true) {
                    $(this).removeClass('isbillable');
                    $(this).addClass('billable');
                }else{
                    $(this).removeClass('isbillable');
                    $(this).addClass('notbillable');
                }
            }
        });
    }).button({
        icons: { primary: "ui-icon-help" },
        text: false
    });
    $( ".billable" ).button({
        icons: { primary: "ui-icon-notice" },
        text: false
    });
    $( ".notbillable" ).button({
        icons: { primary: "ui-icon-check" },
        text: false
    });
});