Make JavaScript script load after render in a huge React.JS webapp - javascript

I'm having a problem with React.JS. On my index.html of my WebApp, I load "script.js", which is in charge of making several things interactive (menu, search button, ...).
However, in some Components I use an element that is initialized when I load "script.js".
So, this element is not initialized when loading "script.js" (because "script.js" is loaded before render).
Knowing that this is a big WebApp, and that it wouldn't be clean to add a line of code to append a tag each time in a componentDidMount() function, would you have an idea of how I could do it ?
Thanks in advance.

Thanks #robert and #Kunukn, I've "succeed" to code it.
In my "script.js", at the end of the file I set window.searchInit = r.Ani.formSearch
And in my Component's componentDidMount() function, I call window.searchInit('.toggle-search');
Not clean as expected... But it works !

Related

Tabbed components in React.js HTML include

I am just currently learning React.js and I am trying to work on a simple project that can have some really heavy body content but I have to keep them in one page, so I chose tabbed components as a possible solution.
So what I'm planning is to put the tab contents into separate HTMLs and just include them into the main page hidden until their tab option is clicked, but does this mean that the HTMLs will only be loaded into the app once the tab option is clicked?
Normally I would think that the separate HTMLs would be loaded at the same time the main page is loaded, but using React.js, maybe the functionality is different?
Can someone please clarify this? Thank you very much!
A single page application is generally "loaded" immediately, and the views change based on interaction. So if you properly set up your layout, the content will be interpreted when you load the page.
What you are calling HTMLs is properly called Components. Everything in React is based on JavaScript. You would store your components in JavaScript files that end in .js not .html, and then a JavaScript function would return your JSX Component as its return value, which will trigger the DOM to reload.

How to save and load a page with two angular2 components from local storage?

I have been trying to save and load a page with two angular2 components from local storage with the next code but the css from components is never applied.
This is my code to save:
localStorage.setItem('body', JSON.stringify(document.getElementById("body").innerHTML));
This is my code to load:
document.getElementById("body").innerHTML=JSON.parse(localStorage.getItem("body"));
I hope to have explained my problem well
Sorry, you cannot do that. Angular likes to take over a lot of the DOM, so you cannot just replace the entire body of the DOM. However, if instead of doing the entire "body", you did a subset, then you could do this:
<div [innerHTML]="htmlVar">
</div>
Where htmlVar is a variable you loaded with something like:
this.htmlVar = JSON.parse(localStorage.getItem("htmlVar"))
Watch out, by default innerHTML will strip out lots of "unsafe" html. You can reenable most of them by calling DomSanitizer. Please note that you cannot use any Angular features in the html, like links with routerLink.

Just adding js script to typo3

I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:

Load external html file to div and use its js functions

I have some div:
<div id='dialog'></div>
Now I want to load into this div an external html file and use its js functions.
I know I can load it using jQuery.Load() and it works fine, the problem is that I want to use the html js functions.
The main problem is that I have several divs which I load this html file into them and I want that when I'm activating js function it will only work on the specific div.
Pass parameter to view that you are loading that will indicate container of the loaded view:
jQuery.Load(url, { containerId: 'dialog' })
I remember I had the problem back when jQuery1.4 was issued. In that version, .load() suddendly began stripping out the js when a target container was specified.
What I did at that time :
separate html and js in different files (let's say myhtml.html and myjs.js ), or views
have my js file act as a js module, with a public entry point function (say initContent) taking a jQuery element as a parameter
have an invisible link in myhtml.html, namely
after loading myhtml.html into my target div, search for $('a.dynamicJs') in my target div to extract js url, and entry point function from the href
if the js had not previously been loaded, dynamically load the js into the page trhough an ajax call
dynamically call the entry point function with the target div as parameter
This also worked with css.
It required some time to tweak it on all navigators (limited number of css sections on IE, different way to dynamically call a function), and I ended with much more code I expected in the first place. It also required a lot of refactoring of my html/js modules (but I must confess I ended having a code that was really cleaner)
I'm sure there are frameworks that handle this kind of situation way better by now. But this is what I came up with at that time.
Hope this will help

how to load a new script in a single-page app?

I'm trying to build a single-page app that has several views (screens, page contents)
My App's UI has a permanent menu bar and a "view area" which retrieves a view via Ajax, based on menu selections. This works great for simple HTML content and keeps my menu-script running on the background despite which view is being displayed.
But what if my view needs an additional script? How do you load and execute a script as a result of a view change (=a page fragment was loaded as a result of a button click) also, how do I get rid of that script when I choose a different view?
I know I can embed a script-tag into the page fragment and write the code there, but I'm really looking for a more robust way of doing this, preferably so that an instance of an object is created when the view is loaded and then discarded when the view changes.
yepnope.js is a great conditional loader. You could use it to check certain conditions (e.g. view, state) before loading a script. I don't think it has the ability to remove a script that's already been loaded, though.
You can use javascript to add a <script> tag in the same way you would any other tag.
The hardest part is knowing where to place it, but if you have control over your markup, this isn't too big a barrier.
Something along these lines:
function DST(url)
{
var s = document.createElement(’script’);
s.type=’text/javascript’;
s.src= url;
document.getElementsByTagName(’head’)[0].appendChild(s);
}
If you need something to happen automatically when you load that script, you should be able to use a self executing anonymous function to do the job.
(function(){alert('this happened automatically');})();
If you need to pass anything in to the function it would look like this:
(function($){alert('this happened automatically');})(jQuery);
If you really need to discard the scripts, you can delete the nodes, but it might be better to leave them in, in case a user reactivates a view, so you don't have to make the AJAX call and associated HTTP request, allowing the page to load faster.

Categories