11 Replies - 408 Views - Last Post: 16 February 2017 - 11:41 AM

#1 ognjengt  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 29-July 14

Is reloading scripts on ajax calls a good practice?

Posted 10 February 2017 - 10:56 AM

I'm using node.js with express, and ejs templating engine in my web application. I have separated some .ejs templates, in different files, and I want to use ajax to call a specific file when needed.

So I have a layout.ejs which is the main part, and when I select a link from the menu, in that layout.ejs I am rendering the specific page, via AJAX request. Nothing too complicated, just basic ajax, and loading a page in a specific div, of the layout.ejs page.
So I ran to a little problem. In my layout.ejs I have all the scripts that other pages use. So when I render a specific page inside the layout.ejs page, that specific page can't see the scripts.

I have found a way for this to work and that is to reload the scripts each time ajax call is executed, and it works well on my machine, but I'm wondering is this a good practice? What should maybe be a better alternative?
I am getting the "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/." though, should I be worried about something?

I just want to know other peoples opinions and if this solution is bad. Thanks in advance.

Is This A Good Question/Topic? 0
  • +

Replies To: Is reloading scripts on ajax calls a good practice?

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: Is reloading scripts on ajax calls a good practice?

Posted 10 February 2017 - 11:27 AM

Quote

So when I render a specific page inside the layout.ejs page, that specific page can't see the scripts.

What does that mean specifically, what exactly are you trying to do? Everything gets loaded into the same scope, but there are other issues that maybe you're not counting on. If you're attaching event handlers in the main code, for example, but then load content through ajax, the event handlers aren't going to fire on the new elements unless you're using something like event delegation to fire the events on a parent element like the body and then figure out which element actually received the event. If you're doing something else, then what exactly are you trying to do where you say it can't "see the scripts"?
Was This Post Helpful? 0
  • +
  • -

#3 ognjengt  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 29-July 14

Re: Is reloading scripts on ajax calls a good practice?

Posted 10 February 2017 - 11:34 AM

I'm saying that the scripts are loaded in the parent page and other pages get loaded in to the parent page, but all of the javascript code is related to the child page, so when a child page is loaded, events such as button clicks etc.. are not fired on the elements in that child page. Hope this makes it a bit clearer.

This post has been edited by ognjengt: 10 February 2017 - 11:34 AM

Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: Is reloading scripts on ajax calls a good practice?

Posted 10 February 2017 - 11:56 AM

How are you attaching the events? If you load some HTML/Javascript through ajax and use something like innerHTML to put it on the page, it will not automatically execute the Javascript in the ajax response. Otherwise, how are you attaching the events?
Was This Post Helpful? 0
  • +
  • -

#5 ognjengt  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 29-July 14

Re: Is reloading scripts on ajax calls a good practice?

Posted 11 February 2017 - 01:28 PM

I have external .js files which contain all the interactivity of the page, and on the ajax call for a particular page to show, im also calling $.getScripts().

I'm just wondering is this a good practice, or is there a better alternative.

This post has been edited by ognjengt: 11 February 2017 - 01:29 PM

Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: Is reloading scripts on ajax calls a good practice?

Posted 13 February 2017 - 10:23 AM

You should never need to reload Javascript files. If you have code you want to execute again then put it in a function and call it later. You can also attach events in a way that does not require the elements to be loaded when you attach the events. It's hard to suggest anything else without seeing code though.
Was This Post Helpful? 0
  • +
  • -

#7 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,126
  • Joined: 21-November 13

Re: Is reloading scripts on ajax calls a good practice?

Posted 13 February 2017 - 10:53 AM

I don't think it's inherently a bad practice to call scripts later. You basically need a require_once function in JS which will prevent scripts from being evaluated twice if the user visits the same page twice. I think there are libraries for that which also take care of dependencies and other fancy stuff. I never had to use them but I have seen the name bower pop up in many Github pages.

Concerning the act of evaluating a script: if you request a .js file hosted on your server there is no harm in running eval on it. If there were, it would mean you can't trust your own js files and you would have bigger problem to solve. It is just going to be a bit slow to initialise the JS interpreter, and you want to be sure your scripts don't have side effects (alter global variables or attributes of the document in a way that it could break something else or degenerate if done multiple times).

BUT, please make sure it is appropriate: if the code you want to re-parse at each page load is generic, what you are doing is wrong and you probably only need to delegate events, as ArtificialSoldier suggested, or better keep track of the state of the document (instead of starting fresh at each user interaction).
Was This Post Helpful? 0
  • +
  • -

#8 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: Is reloading scripts on ajax calls a good practice?

Posted 13 February 2017 - 11:16 AM

I don't see an issue with dynamically loading scripts, but if you need to reload a script then something probably isn't designed right. I'm not real clear which situation we're dealing with though.
Was This Post Helpful? 0
  • +
  • -

#9 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,126
  • Joined: 21-November 13

Re: Is reloading scripts on ajax calls a good practice?

Posted 13 February 2017 - 01:39 PM

Something I haven't mentioned is that when you initialise a script (or do anything even a little bit bit slow) in an event handler, the user is very likely to hate you. If you wait something like 100ms when you click on something, you will feel a latency, when a second of background task would have been unnoticed. People who design software know this but when you are a webdesigner you tend to forget it.
Was This Post Helpful? 0
  • +
  • -

#10 ognjengt  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 29-July 14

Re: Is reloading scripts on ajax calls a good practice?

Posted 16 February 2017 - 07:00 AM

Well, here is the problem. I want to build a single page application, without using any framework, so just some basic stuff. I have found a page.js plugin and it works pretty well, but here is the problem. I have a layout page, in which all the other pages are being loaded, so when I load a page into a layout page with an ajax call, scripts that are in layout page won't apply to the child page, such as clicks, etc... I really would like to find a way of achieving this efficiently and quick. So I just need some form of single page routing, and reloading only one part of the page, when clicking on the links, without the need of reloading the scripts on the layout page.
Was This Post Helpful? 0
  • +
  • -

#11 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: Is reloading scripts on ajax calls a good practice?

Posted 16 February 2017 - 11:22 AM

You can use event delegation to set a click handler on the parent that will apply to anything on the children also. You can then format your links in a way where all of the information needed by the click handler is in the link element, so that the click handler can get the element that was clicked on and handle it. e.g.:

<a href="page2.php" data-type="ajax">Page 2</a>
<a href="http://www.google.com" data-type="external" data-newwindow="true">Google</a>
<a href="#" data-type="function" data-function="show_gallery();">Show Gallery</a>


You can have a single click event handler on the parent that can handle clicks on whatever you want it to do, and the way to get it to apply to elements that are not on the page yet is to use event delegation.

https://learn.jquery...ent-delegation/
Was This Post Helpful? 0
  • +
  • -

#12 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,126
  • Joined: 21-November 13

Re: Is reloading scripts on ajax calls a good practice?

Posted 16 February 2017 - 11:41 AM

If it is a single-page app by design, you should standardise the behaviour of the pages you call and write general functions in the main document to handle them.

I personally don't call HTML pages directly, I have template files and raw data files in JSON and I generate the HTML on the client side.

Generally I don't need to add custom behaviours to pages called like that. If there are buttons to click or else, the behaviour is the same for every page so I call the same event handler whatever the page. Events are either set after each AJAX request, or they are delegated to a parent container.

When I want custom behaviours for some content, I add a property in my JSON telling me which function to execute (if it's already in the main document) or which script to load (if it's a hevy script I don't want to include in the main document).


AJAX was designed primarily to receive only XML (the X of AJAX). To my knowledge it can only handle raw data, and I don't think it should change (for example : when should your script execute when you request a document ? When it has finished downloading ? when the document is appended to the page ? what if you want to execute the script first and add the DOM later, or the contrary ?)

We don't know what kind of scripts you are loading so we can't be of good advice.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1