[FIXED] How can I call an ajax click event from page load?

Issue

I have a click event which fires when I click on a button, it opens a modal interface:

$(".profileF2fClinicalServiceDetails").live("click", function(){
    var requestUrl = '/php/includes/ajax.php?operation=profile_edit_f2f_clinical_service_details&service=f2f&counsellor_id='+getPractitionerId($(this))+'&counsellor_address_id='+getAddressId($(this))+'&edit_level='+getEditLevel($(this))+'&tab='+getTab($(this));
    openDialog(requestUrl, "Edit Face to Face Service Details", 850, "location.replace(getCleanedLocationHref()+'&tab="+getTab($(this))+"');");
    return false;
});

But now I want to prompt this to be fired when a page loads, how do I call it directly from the HTML?

Solution

Add the code in the click event to an independent function (rather than a closure) called, for example, showPopup. Then change the function bound to the click event to call showPopup, and add a call to showPopup function on page load.

A note, as of 1.7 jQuery's live function is deprecated, you should use on instead (source)

You will have to pass some arguments to the function, since you won't be able to use this during the initial call. You will have to pass those arguments to the main function the first time you call it, I won't presume to guess how you'll determine that.

When the click event is fired, you can extract the arguments from the element in the fashion you're currently using. You'd have something like this:

$(document).ready(function() {
    // add the click event
    $(".profileF2fClinicalServiceDetails").on("click", function () {
        var Me = $(this);
        showPopup(
            getPractitionerId(Me),
            getAddressId(Me),
            getEditLevel(Me),
            getTab(Me)
        );
    });

    // call the function right away
    showPopup(
        [initial_counsellor_id],
        [initial_address_id],
        [initial_level],
        [initial_tab]
    );
});

function showPopup(counsellor_id, address_id, level, tab) {
    var requestUrl = '/php/includes/ajax.php?operation=profile_edit_f2f_clinical_service_details&service=f2f&counsellor_id='+counsellor_id+'&counsellor_address_id='+address_id+'&edit_level='+level+'&tab='+tab;
    openDialog(
        requestUrl,
        "Edit Face to Face Service Details",
        850,
        "location.replace(getCleanedLocationHref()+'&tab="+tab+"');"
    );
    return false;
}

Documentation and Related Reading

• jQuery.ready - http://api.jquery.com/ready/
• jQuery.on - http://api.jquery.com/on/
• jQuery.live - http://api.jquery.com/live/ [DEPRECATED]
• Javascript functions on MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Functions

Answered By - Chris Baker

Answer Checked By - Katrina (PHPFixing Volunteer)