Running Javascript at the end of page load

Question

I am trying to request a page in Ajax and a normal GET request. My basic layout is like this:

<html>
  <head>
    //css file
  </head>

 **************
  <body>

  <script> </script> // this script needs to be loaded at the end of the page load in both GET and AJAX

  </body>

 *****************
  //js files (jQuery)

</html>

THE area in * is loaded by ajax

If I make a GET request, I get the complete page. And if I make an Ajax request, I get only the body part (no jQuery).

Now, the body tag contains a script tag.

<script type="text/javascript">
  window.onload = function() {
    $.getJSON("/loc", function (data) {
      // .......
    });
  };
</script>

This code runs fine when I make a GET request. This script gets executed after the page loads. But when I make an Ajax request, the script doesn't execute, because the page is already loaded.

So I tried:

<script type="text/javascript">
  $(document).ready(function () {
    $.getJSON("/loc", function (data) {
      .....
    });
  });
</script>

Now this works fine with Ajax, but doesn't work with a GET request, because jQuery is at the end of the page.

script tag is inside the body tag and the jquery is after the body tag, so if i move it after the jQuery. So I need to make 2 designs for my page: 1 for my Ajax request and 1 for my GET request. If not in Ajax I will end up loading the jQuery script twice.

So my question is can I have a single script that runs for both Ajax and GET requests?

*this works fine with ajax but doesn't work with GET request* that sentence makes no sense. AJAX and GET are seperate things, it either works or it doesn't. There's no way it works in some scenarios but not others. — Liam, Jan 06 '17 at 11:14
actually i am using laravel template so base template is like i have updated it above the if the request is ajax then i return the body else full page but there i need to update some data after page loads — codenut, Jan 06 '17 at 11:24
its body that changes for each page rest of it remains same so in home page i need to load data from i url no matter it is ajax or GET — codenut, Jan 06 '17 at 11:28
after body content is loaded call `eval(document.getElementsByTagName('body')[0].innerHTML);` but be sure to call this after the contents are loaded. — Rajesh Jangid, Jan 06 '17 at 11:33
content is loading correctly its just i want to execute a script a script at the end without ` window.onload = function () {` because it doesn't exceuted if body is loaded already for ajax — codenut, Jan 06 '17 at 11:40
what I mean to say is you are "dynamically" loading the script inside body tag so the scripts doesn't execute. to execute the script inside body tag try calling eval function on that particular script — Rajesh Jangid, Jan 06 '17 at 11:47

score 2 · Answer 1 · answered Jan 06 '17 at 11:10

2

now this works fine with ajax but doesn't work with GET request because jquery is at the end of the page

put all your scripts(and script tags) after jquery and everything should work fine.

answered Jan 06 '17 at 11:10

blckt

81
8

it is inside the body tag ans script is after the body tag so i have move it after the jquery so i need to make 2 design of my page 1 for my ajax request and 1 for my GET if not the in Ajax i will end up loading jquery script twice – codenut Jan 06 '17 at 11:13
Why are you loading jquery in your ajax request? Don't do this – Liam Jan 06 '17 at 11:14
Yeah don't do that either – Liam Jan 06 '17 at 11:16
and jquery is after the body tag closed – codenut Jan 06 '17 at 11:17
take a look now – codenut Jan 06 '17 at 11:20
just try to use your code without onload event or use another one :) Or if you still want to use your approach handle window onload event like here http://stackoverflow.com/a/3520800/3059277 – blckt Jan 06 '17 at 11:26

score 0 · Answer 2 · answered Jan 06 '17 at 12:01

Your question is still not clear but to try and point you in the right direction.

Ok your fundermental issue here is:

this script needs to be loaded at the end of the page load in both GET and AJAX

You've not given details what this script is or why it must be loaded but I'm going to say, that it does not need to get loaded.

When you load the page, the script gets loaded. When you load the ajax, you don't need to reload the script because it's already loaded! If you need to invoke something in the script, that's a different matter, simply call the relevant method(s) but do not re-load the script. It's there already leave it alone.

I make a GET request, I get the complete page.

Again, don't do this. That's not how AJAX is supposed to work. Load only the secion of the page that you want to by dynamic:

<html>
  <head>
    //css file
  </head>
  <body>

  <script> </script> // this script needs to be loaded at the end of the page load in both GET and AJAX
  //NO IT DOESN'T!


  <div>
       **DYNAMIC section load this and only this**
  </div>
  </body>

  //you don't need to load JQUERY again. It's already loaded just use it.
  //js files (jQuery)

</html>

fine with Ajax, but doesn't work with a GET request,

It sounds like your trying to turn a simple link into an AJAX request. Which is fine but you can't simply replace a link with getJSON and expect it to just work. It's more complicated than that. Basically your a long way off where you need to be here. Spend some more time learning AJAX and async loading of pages. It's not as simple as dropping a few javascript funcitons into the page and viola it's all a single page app.

ok now in your html design let's say this is your template and complete page remain same except that div tag the content inside it changes for each page let say there are two pages home and setting d there is a menu in header of a page(definitely it isn't inside the div lets say just after body) Now when user is on settings page he click home from the menu so i don't want to load the complete page i will load the content of a home page i.e., div content and replace settings div with the help of ajax and in home i need to load all post which i am not sending it in div i am loading post — codenut, Jan 06 '17 at 12:21
i am loading post with another get script because post data is json but when user reloads the home page so i needs to send him complete page including the header and footer and when page loaded then i need to load my post — codenut, Jan 06 '17 at 12:22
ok then what will be your approach to solve this type of design — codenut, Jan 07 '17 at 13:20

Running Javascript at the end of page load

2 Answers2