1

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?

Improve this question
9
  • 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. Commented Jan 6, 2017 at 11:14
  • Move your script tag into the head. Commented Jan 6, 2017 at 11:19
  • 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 Commented Jan 6, 2017 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 Commented Jan 6, 2017 at 11:28
  • hope this make sense Commented Jan 6, 2017 at 11:28

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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
Why are you loading jquery in your ajax request? Don't do this
Yeah don't do that either
and jquery is after the body tag closed
take a look now
|
0

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.

Improve this answer

3 Comments

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
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
ok then what will be your approach to solve this type of design

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.