1

I'm trying to render one of my pages, and I have an Html.RenderAction() call at the top of the div I'd like to display. I'd like to call one of my js initializer methods in document.ready() from inside the page that is displayed via my RenderAction call, but it seems to be triggering document.ready() before the html in the page after the Html.RenderAction() call.

Because of this, the init function is checking data from a kendo element that hasn't loaded since it's being called before JQuery finishes up, and only sees the inputs that should be kendo inputs as default html <input> elements.

In other words, is there a way to delay the loading / call of RenderAction until the page its inside of loads? Or should I just use some ugly CSS to keep the section I need at the top of my div? Very basic summary of my code below:

<html>
...
<div>
  @Html.RenderAction("File that calls init() method")
  <...rest of page that I need to load first, including kendo text boxes/>
</div>

</html>

File that calls init() method

<div>
...
</div>
<script src="...">
  $(document).ready(function() {
    myJs.init(params)
  }
</script>

Now that I've gone to implement the answer below elsewhere, I've realized that when switching from document.ready to window.on('load',...), it's now broken another view that works similarly, but instead the @Html.RenderAction call is on the bottom:

...
<div>
  <>page including kendo inputs</>
  @Html.RenderAction("different file that calls same init() method")
</div>

</html>

Basically, document.ready works for me if the razor is before the kendo, but not the other way around - and window.on('load',function(){...}) works for the opposite.

UPDATE: I ended up having to just rearrange my page after a lot of trial and error looking for a fix for this - seems like there's no easy way around the order in which the razor loads on CSHTML pages

Ben
  • 62
  • 1
  • 8

2 Answers2

1

This might work, try using $(window).load(function() instead of $(document).ready(function()

<div>
...
</div>
<script src="...">
  $(window).load(function() {
    myJs.init(params)
  }
</script>

From the below link: "executes when complete page is fully loaded, including all frames, objects and images"

jQuery - What are differences between $(document).ready and $(window).load?

Speedwagon
  • 46
  • 3
  • 1
    Yep! That worked, thanks. The only change I had to make to what was suggested in that link you posted was to change ```$(window).load(function(){...})``` to ```$(window).on('load', function(){...})``` due to an update later on in that answer: https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed – Ben Sep 19 '19 at 13:18
0

I ended up having to just rearrange my page after a lot of trial and error looking for a fix for this - seems like there's no easy way around the order in which the razor loads on CSHTML pages.

Ben
  • 62
  • 1
  • 8