0

Each of them supposed to show a value from database when the page loads. So I wrote three $(document).ready(function) with three input for GET controller value. I know they run parallel maybe it is good but I want to see if I wrote only one function (design it Linear) with an input value to pass to GET method, I get higher performance or not.

I change the code bellow :

$(document).ready(function () {
    $.ajax({
        url: '/Home/GetData',
        data: { id: 1 },
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        success: function (result) {
            $('#result1').html(result);
        }
    });
});

to

function bringData(statusId) {
    $.ajax({
        url: '/Home/GetData',
        data: { id: statusId },
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        success: function (result) {
            $('#result1').html(result);
        }
    });
};

and in my view I use onload="bringData(0)" like bellow :

      <div class="inner">
            <h3 ><span id="result1"  onload="bringData(0)"></span><sup 
            style="font-size: 20px"></sup></h3>
            <p>Commited Orders</p>
        </div>

but when I run the code it doesn't show the value?

fahime abouhamze
  • 328
  • 3
  • 16
  • 1
    Is there any error message in browser console when you use second method? – Xinran Shen May 27 '22 at 06:45
  • In console I don't see any error. I put debugger in my jquery code but It doesn't even go into the function. – fahime abouhamze May 27 '22 at 07:29
  • @Phuzi already proved a correct answer. Here is another way of linking an action with the loading state of each individual DOM element: https://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div-element . – Carsten Massmann May 27 '22 at 07:55
  • @fahime abouhamze, yes, I was just about to tell you that you can't add onload in ``... – Xinran Shen May 27 '22 at 07:58

1 Answers1

1

onload is not a global attribute you can't just stick it on any element and expect it to work.

What you should have done was call bringData from the ready function:

$(document).ready(function () {
    bringData(0);
});

function bringData(statusId) {
    $.ajax({
        url: '/Home/GetData',
        data: { id: statusId },
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        success: function (result) {
            $('#result1').html(result);
        }
    });
};

If you insist on using an onload attribute, then it should be on the <body> tag

<body onload="bringData(0)">
    ...
</body>
phuzi
  • 12,078
  • 3
  • 26
  • 50
  • I wrote the first part for bringData(0) and bringData(1) two times. It is better than copy the whole code. But Isn't there a way to call bringData(1) or bringData(3) in my view or better say call function and pass the input value in the view? @phuzi. I'll just want to make the less code but high efficient performance. – fahime abouhamze May 27 '22 at 08:37
  • You already have `bringData` that you can call with any statusId i.e. `bringData(7632)`. It sounds like you have another problem now. – phuzi May 27 '22 at 08:52