Just adding js script to typo3 - javascript

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:

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.

Render Scripts-Section after scripts were loaded in ASP.NET Core PartialView

In an ASP.NET Core app, I've a dashboard with widgets. Every widget has its own PartialViews, so the full page is generated in the following way:
-Layout.cshtml
--Dashboard.cshtml
--- Widget1.cshtml
--- Widget2.cshtml
Following best practices according to fast page load times, JavaScript is loaded before the closing </body> tag in Layout.cshtml. After that, there is a section for custom JS, which I commonly use to initiate objects on page load. So this section looks like this:
<script asp-append-version="true" type="text/javascript" src="~/clientscript/page.min.js"></script>
#RenderSection("Js", required: false)
In my Views, which are using the Layout.cshtml as layout (in this example, its Dashboard.cshtml), I can define a section like
#section Js {
// Js Code here
}
which is rendered after the script tag containing all script files. So I can be sure, that all dependencies like jQuery or custom classes are avaliable here.
But I also need to do this in widgets like Widget1.cshtml for example. The problem is: I load the PartialView Widget1.cshtml in Dashboard.cshtml. In the documentation is written, that this is not possible:
If you declare a Razor section in a partial view, it will not be visible to its parent(s); it will be limited to the partial view.
But that's exactly what I need. Is there a way to work around this limitation? Shortly, the goal is to inject JavaScript from a PartialView to the LayoutView, with an regular View between them.
The only way I know is the usage of setInterval() with a low interval like 50ms, and check there if jQuery or some of my custom class is defined in a loop until they are. Its a JS solution yes. But it makes it possible to include the script-block directly in the PartialView without making usage of sections. It fits well when you depend on a single variable like jQuery.
But I need to wait for custom classes to get loaded. They're included after jQuery. So writing a generic function like waitForTypeLoaded(type, callback) is not possible. It would cause me to write always the raw setInterval() code, which seems not a smart solution for me.
Something I did to get my scripts to run after Jquery was done loading was in my Partial Views and View Components I used the "DOMContentLoaded" event to load all my jQuery js script after the page was done loading. That way I could defer the Load of jQuery and Still Have jQuery code on my pages.
<script>
window.addEventListener('DOMContentLoaded',
function() {
$('body')....
});
</script>
Your problem can be solved as mentioned in my answer to this post:
How to render scripts, generated in TagHelper process method, to the bottom of the page rather than next to the tag element?
To sum up, you can create a pair of tag helpers, one that can be located in a partial view and just stores its content in a temporary dictionary, and the other that renders the content at the appropriate position (e.g. in the layout page). I use it extensively to render small dynamically created scripts as the final scripts of the body.
Hope it helps.
Honestly, I would make one step back and look at architecture once again if you have such dilemmas.
Why not add to required scripts which will be used on a couple of views/partial views to the main layout? In ASP.NET MVC you can use bundling mechanism (or you can write our own) - minify and bundle them with other required. It won't be heavy...
Your approach looks like unnecessary complicated.

Adding CSS Class Based on URL with Javascript or Jquery within Wordpress Template

I am attempting to write a small script which will look at page URL and, based on what URL it sees, add a new class to an HTML element. More specifically, on this page:
http://pamaphilly.wpengine.com/volunteer/
I'm going to add a class for the active URL which will add an arrow marker to the appropriate left hand nav marker. I have tried this strategy: jQuery add class based on page URL and, when I used the script on a dummy page, it works fine. But when I try adding it to the Wordpress Template, nothing happens. I've tried adding the script at the bottom of the template file and just (as a test) embedding it in the php template. I'm guessing my failure relates to a Wordpress issues (probably a failure of knowledge on how to do this) but I would appreciate any guidance.
Thanks.
You need to include .slick before you can use it. (before script.js + in the same way you include your script.js file)
Why not do this with CSS and WordPress directly, and skip JavaScript?
You can use WordPress's body_class() function to dynamically add a class to the <body> of your page. Using CSS, you can then target your appropriate .volunteer .sidebar-member li via CSS.

Colorbox code working outside of Umbraco, but not within

We are new to Umbraco and coding within it, so I thank you in advance for your patience and assistance.
In short, we created a 'test' page utilizing a colorbox pop-up to display a form. It works perfectly in the test page.
When trying to integrate the code into Umbraco, when the "Request Info" button is clicked, the form opens in a full page, and the colorbox does not display.
I would appreciate any assistance that you could provide.
Test link (working):
http://online.saintleo.edu/Colorbox/Untitled-1.html
Example of a page where the "Request Info" button (yellow on right) opens full page, and NOT colorbox:
http://online.saintleo.edu/academics/masters-programs/master-of-accounting-(macc).aspx
I've spent the entire weekend trying to find the solution, hoping to get this resolved ASAP.
Thank you in advance, I appreciate your time and assistance.
This looks like a problem with how you have implemented your script in Umbraco. Just looking through Chrome's browser inspector, I can see that your script is failing to find the colorbox objects which means that something is prevent the library from being available. This is usually because a dependent javascript library has failed.
Looking at your source code, you are loading all your jQuery libraries at the bottom of your page. This is good practice, but you have placed your a second jQuery file reference, your colorbox file references and the custom colorbox code in the head of the page.
There are several things you will need to do:
Remove the jQuery reference from the head of the page;
Move the colorbox file references to the bottom of the page, after all the other javascript file references. You can leave the colorbox CSS file reference in the head.
Move the custom colorbox code to after all the other javascript file references. I usually place this kind of code in a separate file.
Depending on your Umbraco implementation:
If you are using masterpages, use a ContentPlaceholder to allow templates to drop javascript file references into the bottom of the page;
If you are using MVC views, use a footer section to do the same

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

Categories