我需要在页面加载时调用GetAllProperties()函数，而不是在页面完全加载后调用GetAllProperties()函数。我的代码是这样的:
<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>
我真的需要你的帮助，因为我是jQuery新手
谢谢
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.
Try this code to call function: $(window).on('load', function() {GetAllProperties();});
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();
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.
If you want to call javascript function while page load than you should try following function :
window.onload = function() {
GetAllProperties();
};
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
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>