CODEWITHSUNDEEP
javascriptjqueryhtmlajax
codenut
codenut

Reputation: 681

Running Javascript at the end of page load

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?

Upvotes: 1

Views: 2693

Answers (2)

Liam
Liam

Reputation: 29714

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.

Upvotes: 0

blckt
blckt

Reputation: 81

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.

Upvotes: 2

Related Questions