Download / add JS script asynchronously

Question

I use Laravel to create templates based on the main page. There are different JS scripts on different pages, so I created a template for importing JS scripts:

<!-- jQuery 2.1.3 --> <script src="{{ URL::asset('plugins/jQuery/jQuery-2.1.4.min.js') }}"></script> <!-- Bootstrap 3.3.2 JS --> <script src="{{ URL::asset('js/bootstrap.min.js') }}" type="text/javascript"></script> <!-- Ajax Page Loading --> <script> function ajax(url) { $('.main-content').fadeOut(100); //hide the page $('.spinner').show(); // show a spinner $.ajax(url, { async: true, success: function(data) { $('#header').html(data[0]); //append received header to header $('#content').hide().html(data[1]).fadeIn(500); //show the page again $('body').append(data[2]); //append scripts to body $('.spinner').hide(); }, }); } </script> @yield('extra-scripts') <--- /* HERE is where the scripts will be */ 

I also use AJAX to load only content without refreshing the page. The ajax function will be used to load any URL into the contents of the div. However, I also need to load the scripts for the page to work correctly.

Data is an array with three fields:

• 0 - html header
• 1 is the html content
• 2 - dynamically added scripts

The problem is that when I load the page, I get this error:

The synchronous XMLHttpRequest in the main thread is deprecated due to its detrimental effects on the end user. For more help, check out https://xhr.spec.whatwg.org/ .

I do not want to load the script in order to affect the user's work. Must be asynchronous.

What I already tried:

• jQuery.getScript

  • This solution requires me to move all the scripts to a separate JS file. This will probably solve the problem, but I would rather save them on the corresponding page.

• AjaxPreFilter

  • $. ajaxPrefilter with options.async = true causes the scripts to load after the page, thereby making some properties undefined and not working.

Answer 1

This warning will continue until you inject the script into the body of the document.

I would recommend using $.getScript , as this will load the script correctly. I do not understand why you want all javascripts to be on the same page from the first place. You probably want them in a separate file anyway to facilitate maintenance on the road and separate problems.

You can also use javascript vanilla for this:

 var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.setAttribute('src','your_script.js'); head.appendChild(script); 

If you insist on doing it this way, try typing it directly into the head document, not the body , and see if that helps.

In a more general note - it looks like you are creating a one-page application (SPA) - did you study JS frameworks like Angular , Backbone , etc.? they will handle all the heavy lifting for you and help you scale your application better. It smells a bit like trying to reinvent the wheel and can be a great thing as an educational process, but it may not be such a good idea in the long run.

Hope this helps.

Answer 2

What you are doing now is not the best practice. If you want to load pages using Ajax and dynamically invoke Js files, I would recommend that you use pjax .

Take a look here: https://github.com/defunkt/jquery-pjax

Since you are using laravel , you can easily implement this in pjax .

Here is the tutorial: https://laracasts.com/lessons/faster-page-loads-with-pjax