How to make an AJAX request on page load

I need to call GetAllProperties() function during page loading instead of calling the GetAllProperties() function after page is fully loaded. My code looks like this:

<script type="text/javascript">
    $(document).ready(function () {   
        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>

I really need your help because i am new in jQuery

Thank you

Answers:

Answer

Replace

$(document).ready(function () {   
        GetAllProperties();    
});

with just calling GetAllProperties(). you don't need DOM for ajax calls

Then replace

$("#MyDiv").empty();
$("#MyDiv").append($data);

with

$(document).ready(function () {   
    $("#MyDiv").empty();
    $("#MyDiv").append($data);
});

Operate with DOM when it's ready. Other actions you can do without DOM.

Answer

If you want to call the function while the page is loading you have to remove the

$(document).ready(function () {   
        GetAllProperties();    
    });

just call the function

GetAllProperties();    
Answer

You want to start the function during loading and not afterwards? Then place the call GetAllProperties(); as most early as possible. Best place would be in <head>.

But keep in mind, you need to place it after the inclusion of the GetAllProperties function itself. And the function has to be declared in the same file.

Otherwise the execution is delayed by loading the script file, or it is delayed by the loading DOM, when you place it at the bottom of your page.

Answer

If you want to call javascript function while page load than you should try following function :

window.onload = function() {
  GetAllProperties();
};
Answer

Try this code to call function: $(window).on('load', function() {GetAllProperties();});

Answer

I've had the same problem. I solved by calling the function inside the <body> tag in html

<body onload="GetAllProperties()">

I hope it helps

Answer

Call your method just after including jquery:

<script src="/path/to/jquery.min.js"></script>
<script>
      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);    
        }
    });    
}    
  GetAllProperties();    
<script>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.