How to call an AJAX function on page load

Question

I need to call GetAllProperties() function during page loading instead of calling the GetAllProperties() function after page is fully loaded.

I tried window.onload = GetAllProperties; but it didn't work

My code looks like this:

<script type="text/javascript">

 window.onload = GetAllProperties;


    function GetAllProperties() {    
        $.ajax({
            cache: false,
            url: '/Home/GetAllProperties',
            type: 'GET',
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                if (response.list.length > 0) {
                    console.log(response.list)
                    var $data = $('<table id="mytable"  class="table  table-striped"> </table>');
                    var header = "<thead><tr><th>Property Name</th><th>Edit</th></tr></thead>";
                    $data.append(header);
                    $.each(response.list, function (i, row) {
                        var $row = $('<tr/>');
                        $row.append($('<td/>').html(row.PropertyName));
                        $hidden = $(' <input type="hidden" name="hid" value= "' + row.PropertyId + '">');
                        $row.append($hidden);
                        $editButton = $("<button class='editbtn' id='mybtn'>Edit</button>");    
                        $row.append($editButton);
                        $deleteButton = $("<button class='deletebtn' id='delbtn'>Delete</button>");    
                        $row.append($deleteButton);
                        $data.append($row);
                    });        
                    $("#MyDiv").empty();
                    $("#MyDiv").append($data);
                }
                else {

                }
            },
            error: function (r) {
                alert('Error! Please try again.' + r.responseText);
                console.log(r);    
            }
        });    
    }    
</script>

This question is the same as the one you asked previously. If you want to add more detail to the question, please use the `edit` button. Also note that the code you have appears to work fine. If it doesn't meet your requirements, please clearly explain *why* that is — Rory McCrossan, Aug 17 '16 at 13:46

score 3 · Answer 1 · answered Aug 17 '16 at 13:43

3

You are using jQuery already, so why not bind an event listener to window with it?

$(window).on("load", GetAllProperties);

function GetAllProperties() {
    alert("loaded");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

But it is even working without:

window.onload = GetAllProperties;

function GetAllProperties() {
    alert("loaded");
}

answered Aug 17 '16 at 13:43

eisbehr

12,243
7
38
63

Thank you for your help... but why the table populate after page load? – Lucy Aug 17 '16 at 14:02
You know that Ajax is asynchronous, or? This means the page will keep loading while the function is been executed. It is possible that the page finished loading before Ajax request has finished. @Lucy – eisbehr Aug 17 '16 at 14:05
No, I don't .. it would be better write a very simple code – Lucy Aug 17 '16 at 14:13

How to call an AJAX function on page load

1 Answers1