CODEWITHSUNDEEP
javascriptjqueryajax
Saroj
Saroj

Reputation: 1571

how to make an ajax call with jquery loaded in the body section not head section

I have a layout file where i included Jquery just before closing tag.

//layout.handlebars
<!DOCTYPE html>
<html>
  <head></head>
   <body>
    {{{body}}} // renders the body content
    <script src='/js/jquery-2.2.4.min.js'></script>    
   </body>
</html>

I also have a page specific javascript(helper.js) that makes an Ajax call.

<div>Some sample data</div>
<script src="/js/helper.js"></script>

but the problem here is jquery is loaded at the end of the page but i am referring to it in the external javascript before jquery is loaded. which shows me '$' is not defined and i know that is obvious.

One solution to this will be like adding jquery to the head section but that is not what i want.

Is there any approach that i can apply to make an ajax call from external file without moving Jquery to head section.

Any help is much appreciated!!

Upvotes: 0

Views: 90

Answers (3)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

Is there any approach that i can apply to make an ajax call from external file without moving Jquery to head section.

Yes, I assume you already understand the cause of the issue. As you see below the final content is ..

<!DOCTYPE html>
<html>
  <head></head>
   <body>
    <div>Some sample data</div>
    <script src="/js/helper.js"></script>  <!--Jquery is not loaded yet, and hence $ is undefined -->
    <script src='/js/jquery-2.2.4.min.js'></script>    
   </body>
</html>

As you already know one option is to move jquery anywhere in the HTML but make sure its loaded before any other jquery dependent files. Now since you don't want to take this option. we have another option.

Solution: Our only aim is to make sure the jquery library is loaded prior to any other jquery dependent files.

We can get the files on document.ready using $.getScript()

$(function(){
 $.getScript( "/js/helper.js", function( data, textStatus, jqxhr ) {      
  console.log( "Load was performed." );
 });
});

Extras: If you feel this is a overhead and you cannot add this code to all the files in your page (since there can be too many files ), You can write a generic function and a global array variable , This function will check for file paths in the array and execute each one synchronously and remove from the array. Make sure this generic function is called in every document.ready event.

Upvotes: 1

IYH
IYH

Reputation: 80

Well its not pretty but you could use some kind of test and wait loop something like

<script>
(function test(){
  if(  window.jQuery ){
    //your jQuery code
  } else {
    setTimeout(function(){ test(); }, 200);
  }
})
</script>

Upvotes: 0

Daniyal Awan
Daniyal Awan

Reputation: 107

One Solution is that You can put the jquery script at the start of body tag before {{{body}}} section .. In this way your helper script will be rendered after jquery and your problem will be solved .....

Upvotes: 0

Related Questions