在页面加载时执行javascript函数

Question

Right now, I have a javascript function which is triggered onclick. However, I want the same function to be triggered when DOM is loaded. Following code works, however, I don't want to put 'script' tag in the middle of the view. Calling the function from the body tag is not an option here.

<script>document.addEventListener("DOMContentLoaded",function(){extractions.RefreshCheck(@check.ID)});</script>

Code snippet of where I want to implement this:

@foreach (var check in Model.FailedChecks)
{
   <li class="@( check.IsOK ? Html.Raw("bg-success") : Html.Raw("bg-danger") ) " cid="@check.ID">
    @Html.ActionLink(check.Display, "XList", "XList", new { filter = check.GetQuery(), Layout = check.Layout }, new { target = "_blank" }); 
    <span class="glyphicon glyphicon-refresh" onclick="extractions.RefreshCheck(@check.ID);" onload="initAutoRefresh"></span>

    @*<script>document.addEventListener("DOMContentLoaded",function(){extractions.RefreshCheck(@check.ID)});</script>*@
  </li>
}

Above codes work, but I do not want that script tag in my view. So I tried to add the following code in my javascript file using 'onload' eventlistner and it does not work. I think this is the problem.

@foreach (var check in Model.FailedChecks)
{
   <li class="@( check.IsOK ? Html.Raw("bg-success") : Html.Raw("bg-danger") ) " cid="@check.ID">
    @Html.ActionLink(check.Display, "XList", "XList", new { filter = check.GetQuery(), Layout = check.Layout }, new { target = "_blank" }); 
    <span class="glyphicon glyphicon-refresh" onclick="extractions.RefreshCheck(@check.ID);" onload="extractions.InitAutoRefresh()"></span>

  </li>
}

And my InitAutoRefresh function :

var extractions= {
    InitAutoRefresh: function () {
    if (document.readyState === 'complete') {
        RefreshCheck();
        console.log("function already loaded in DOM")
    } else {
        document.addEventListener('DOMContentLoaded', function () {
            RefreshCheck();
            console.log("function loaded in dom");
        });
    }

  },
RefreshCheck: function(intCheckId){
    $('li[cid=' + intCheckId + ']').addClass('bold');
    $.get(window.location + '/Home/UpdateIntegritycheck?checkId=' + intCheckId, function(data){
        $('li[cid='+intCheckId+']').replaceWith(data);
    });
  }
}

Function RefreshCheck works fine on click (ie it updates record). I would be more than happy to get your feedbacks. Thank you.

Answer 1

Try this code:

@section scripts{
    <script>document.addEventListener("DOMContentLoaded", function () { xtractions.RefreshCheck(id) });</script>
}

Answer 2

if you are using jquery then you can use

$(document).ready(function () { 
  your code here
});

Answer 3

One approach is to define custom attribute on your html tags on which you can fire conditionaly according to the tag value. Example :

 <span data-click-on-dom-ready="true" onclick="extractions.RefreshCheck(@check.ID);" ></span>

Then far away from your partial view, you can put the following:

$(document).ready(function () { 
  $("[data-click-on-dom-ready='true']").trigger('click');
});